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; } } }

Changing the "tab bar" color in shortlist?

IanEichelberg

Hey all,

I've been working on a hosted app, and have already customized it by editing viewer-min.css. I have successfully added a custom banner, but I have been unable to find the settings on getting rid of or changing the color of the default grey bar behind the tabs (separating the header from the map/tab panels. Does anyone know what line(s) I would need to change? I tried "inspecting" on chrome to no avail.

I circled the grey area that I'm talking about to hopefully clear up what I'm trying to change.

Thanks,

Ian E

Find more posts tagged with

Accepted answers

RupertEssinger

Hi Ian, in last week's ArcGIS Online update we added the ability to change the header color in the Story Map Shortlist Builder. In the Builder, see the new Settings > Theme tab. This changes the color of the header area, including the area behind the tabs:

Rupert

All comments

MarkCooney

Hi Ian,

In order to change the color of the header, you will need to make changes in one of the js files, specifically in NavBar.js, here: <shortlist-storytelling-template-js/NavBar.js at master · Esri/shortlist-storytelling-template-js · GitHub >. You will want to change the parameter 'colors.header' to the color value you want to use. You will want to do this in the source code from the GitHub repo, and rebuild the app, instructions can be found here: <shortlist-storytelling-template-js/NavBar.js at master · Esri/shortlist-storytelling-template-js · GitHub >.

It is generally not a good idea to modify the minified code. It is better to modify the source code, and rebuild/minify the app. If you are only making style changes, their is a section in the index.html (around line 86) where you can inject your own custom css rules (look for the '/* CUSTOM CSS RULES */' comment in the index.html).

-Mark

RupertEssinger

Rupert

OriGudes3

Can someone explain how this could be done in the current version of map story? I don't think there is any option change colors! see attached snapshot. No color change options p shot.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.