topic Re: Journal Story Map - Change the header color in Classic Esri Story Maps Questions

Journal Story Map - Change the header color

Christian__Smitty_Smith — Fri, 07 Jul 2017 19:27:33 GMT

So I have read the blog on customizing the organization theme, and I have changed the header background color. In my story map, I then selected my organization theme. but instead of changing the header background color it only changed the background color for the page selector on the side (see attached image).

I have no issue with going into the AGOL assistant and changing the Json to override the background color, but I am not sure which syntax to use to do this. Any guidance for this would be great. Normally I would pull the code down and host on our own servers, but due to security issues I cannot do this at the time.

Re: Journal Story Map - Change the header color

Christian__Smitty_Smith — Fri, 07 Jul 2017 19:42:18 GMT

Using the developer tools in chrome I can see that in the css if I add a background color to the following I get the color I want.

.sectionPanel .header {

position: relative;

height: 55px;

background-color: #662D05;

}

Re: Journal Story Map - Change the header color

OwenGeo — Sun, 09 Jul 2017 19:46:53 GMT

Hi Smitty -- unfortunately you can't independently change the color of that area by editing the JSON. That requires downloading and tweaking the code and hosting the app yourself.

Re: Journal Story Map - Change the header color

OwenGeo — Mon, 10 Jul 2017 14:17:07 GMT

Hi Smitty -- Me again! 🙂 While you can't change the color by editing the JSON, you can still do it without hosting the app yourself. Map Journal has an HTML editor that you can use to add a <style> to override the CSS you found in the dev tools. See this article for details. Sorry for not remembering that before originally responding.