nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Allow changes to font-size and color in Category cards

Trippetoe

In a Category card, i'd like to edit the font-size and font color for each card. The ability to change the appearance of the Category icon already exists, e.g. you can select the color of the icon. i'd like the ability to change the font color to match the icon color and the customize the font size.

Currently i am customizing the font on Category cards by adding on to an existing esri class in a text card on my page.

        .panel-footer {
          font-size:18px;
          color: #16a8b5;
        }

i suspect that approach (adding to base Hub classes) is not a recommended tact. Additionally it forces all category cards to have the same color and size. I can imagine a scenario where each Category card might have its own color and font size.

Find more posts tagged with

Category Card

Status: Open

Comments

KlaraSchmitt

Hello,

I can add your suggestions to the category card backlog, but in the meantime, yes we generally recommend avoiding appending styles to our base classes because using generic classes means our stylesheets may take precedent over embeded styles. So if you are going to do it, I'd recommend adding a unique class to the row (Row Settings > Appearance) and then using that in your Text Card to target the panel class.

.mysite-cat-row .panel-footer {font-size: 18px; color: #16a8b5;}

This makes the applied styles more specific, so that if we do change the root class in our global stylesheets, it's unlikely to step on your more granular specification.

Trippetoe

Hi @KlaraSchmitt

Thanks for your suggestion, but it seems like either i don't have something right, or the 'Row CSS Class' isn't working like its supposed to. It seems that the contents of the text box are added to the class attribute as a literal value rather than as a styling. Any thoughts about other approaches i can take

Thank you for your help.

KlaraSchmitt

@Trippetoe

I think perhaps I didn't do a good job explaining this. You want to put "metro-cat-row" as the unique class in that CSS Row Class field. No CSS yet. Then in your Text Card somewhere on the page, you would do an embed <style> tag but use that class to target the base class (.panel-footer) with more specificity. You were likely doing it already. My tip was more so to safeguard your Text Card styles by involving a unique class as a selector.

<style>
/* This goes in your text card. */
.metro-cat-row .category-card .panel-footer {font-size: 18px; color: #16a8b5;}
</style>

Trippetoe

@KlaraSchmitt

Perfect. Thank you for the clarification; it makes sense and works!