Category cards link color customization in ArcGIS Hub using CSS – Limited workaround
ArcGIS Hub is designed to ensure visual consistency across your site through theme-based styling. However, we understand there are times when you may want more precise control, especially when your background and the link text color of your Category card conflict.
An enhancement request asked if users could customize the link color in Category cards independently of the Hub site’s link theme. Although this request won’t be addressed through native product changes at this time, we're sharing a simple and effective workaround to help you achieve the same result in the short term.
Example use case
Your site theme uses blue link text, which looks great across most of your site, including the footer. But you have placed a Category card on a blue background, causing the blue links to disappear.
Changing the body link color to white reverses things such that your Category card link is now visible, but your site footer links are invisible.
With the workaround prescribed below, you can independently change the Category card link color. This improves contrast without affecting the footer or other elements styled by the global body link color theme.
Why isn’t this customizable by default?
Currently, the Category card inherits link colors from the site’s theme settings. This ensures consistency across all cards and sections, including the footer and navigation elements. While this works for most cases, it can lead to contrast issues, especially if your card background and theme link color are too similar (Example; a blue link on a blue row illustrated above).
We would love to learn more about your use cases and preferences before making a product decision, so we invite you to post ideas on the ArcGIS Hub Ideas board.
Important note on future compatibility ArcGIS applications are transitioning many of its UI components to a shared component. These components do not support inline CSS overrides as prescribed below. As the Category card updates to the shared component, this workaround may no longer work. |
Step-by-step workaround to customize specific link text color
If you are working with the current Category card, here’s a temporary method to override the default link color by adding embedded CSS to a Text card and applying it to the Row that contains your Category card for example.
1. Add a Row card to your site layout.
2. In the Row’s settings, give it a CSS Class name (e.g., “custom-name”).
3. Place your Category card inside that Row.
4. Add a Text card anywhere on the page.
5. Select the “Edit in HTML” link at the bottom of the Text card.
6. Paste the following CSS snippet into the HTML editor. Be sure to:
> Update the class name to match your Row’s.
> Set your desired link color (e.g., white, orange, #123456, etc.).
<style>
.layout-section.custom-name .container .category-card .panel-footer {color: orange;}
</style>7. Save, publish your site, and view published site.
Why this matters
While Hub currently does not support independent link color controls directly within the Category card configuration, we hope this workaround provides a flexible, low-friction solution to help users resolve visual contrast issues without sacrificing overall design consistency.
Got flexible theming ideas for ArcGIS Hub?
We’ll continue to monitor feedback and explore ways to bring more flexibility to Hub site builders in the future and appreciate your input. Head over to the ArcGIS Hub Ideas board and share what you would like to see, such as:
1. Master themes at the organization level
2. Theming overrides for individual layout components
3. Per card appearance controls for individual layout components
4. Others?
Your stories and ideas will help guide future design and flexibility decisions in ArcGIS Hub. You can also sign up for the ArcGIS Hub User Lab, a fun, interactive way to test new features through research studies and usability testing.
Got more questions?
Feel free to drop a comment below. We’re here to help.