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
Solved! Go to Solution.
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.
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.
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.