Select to view content in your preferred language

Color options for Collections header navigation

77
1
2 weeks ago
Status: Open
Labels (2)
AaronKoelker
Frequent Contributor

Currently, we can adjust the appearance of a StoryMap Collection's landing page via themes (which is great!). However, the themes do not apply to the header navigation buttons for both the tabbed and bulleted layouts. The backing color instead retains the default StoryMaps teal. 

It would be great if the StoryMap Collection pulled the color for these from the Button settings within the applied theme. Or if there are concerns with introducing accessibility issues here, at least giving users the option to change it to some neutral color combination like grey and black. 

This would be beneficial for organizations with strict branding policies, as well as to simply help the Collection appear more cohesive. 

AaronKoelker_1-1735924827557.png

 

1 Comment
AaronKoelker

Update: Perhaps this is just user error? I came across an example that appears to have theme colors applied to the header navigation. I went into my own theme settings and found there is a check box to "Use theme colors" for the header, and the tooltip says "Uses your theme’s background color, body text color, and fonts", however it's still unclear to me how this is determining the colors. Below is an example where the theme background is deep green and the body text is white, and when you hover the mouse over a tab it changes to a lighter green. Unclear where the lighter green comes from--if it's in the theme settings or if the StoryMap automatically dynamically takes a different value of the background hue.

AaronKoelker_0-1736441141166.png

Here is my own example where I've applied a theme with a white background and black text, and my accent color is orange. But the hover highlight is grey and the selected story is black. 

AaronKoelker_2-1736441584623.png

If this isn't just user error, then maybe the idea can be updated simply to clarify or give more control with how the theme is applied to the Collection navigation header.