Journal Story Map - Change the header color

1400
3
Jump to solution
07-07-2017 12:27 PM
Christian__Smitty_Smith
New Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Notable Contributor

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.

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

3 Replies
Christian__Smitty_Smith
New Contributor III

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;

}
0 Kudos
OwenGeo
Esri Notable Contributor

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.

Owen Evans
Lead Product Engineer | StoryMaps
OwenGeo
Esri Notable Contributor

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.

Owen Evans
Lead Product Engineer | StoryMaps