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

[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 · G... >.  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 · G... >.

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 · Accepted solution]

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

[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.p shot.