Select to view content in your preferred language

Change the black banner in Cascade Story Map light theme to white?

1273
2
Jump to solution
09-07-2017 01:34 PM
KristinJ
Occasional Contributor

I need to change the banner in the light-themed Cascade Story Map to white for organizational style purposes.  I've tried modifying the json using AGOL assistant as well as adding custom css in the minified app code.  I can get most of the way there, but it doesn't look good.  I'm definitely a newb; any help is appreciated!

<style>
/* CUSTOM CSS RULES */
.story-header,
.story-header compact,
.logo-title-container,
.story-header compact #banner,
.story-header #banner {
color: #ffffff;
background-color: #ffffff;
}

.linkContainer,
.bookmarks,
.logo-wrapper {
background-color: #ffffff;
}

.title strong,
.bookmarks .navigation {
color: #002d72;
}

</style>

json

"settings": {
"theme": {
"colors": {
"id": "MyOrgStyle",
"label": "Light",
"themeMajor": "light",
"themeContrast": "light",
"bgMain": "#fff",
"textMain": "#002d72",
"selected": true

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Notable Contributor

Hi Judy -- To change the header style you'd need an experienced developer to modify a lot of styles since there are several components and states in the header bar that include fade transitions and the mobile view. We recommend keeping the banner bar black and only changing the style of the body of the story.

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

2 Replies
OwenGeo
Esri Notable Contributor

Hi Judy -- To change the header style you'd need an experienced developer to modify a lot of styles since there are several components and states in the header bar that include fade transitions and the mobile view. We recommend keeping the banner bar black and only changing the style of the body of the story.

Owen Evans
Lead Product Engineer | StoryMaps
KristinJ
Occasional Contributor

Thanks, Owen.  I appreciate there are lot of styles to modify, but just to clarify though, the only requisite changes necessary are to the styles in the viewer-min.css?  Do you know how many styles (and which ones) require modification?  Thanks.

0 Kudos