Story Maps Developers' Corner: Change the Color of a Cascade Header

Blog Post created by Cooper_Thomas-esristaff Employee on Mar 5, 2018

Jazz up the header of your story map with a splash of color.


Cooper Thomas on the Esri Story Maps team writes:


So, you want to change the color of your Cascade header. Sounds simple enough, right? Well, if you know exactly what to change, and where to do it, then the process is very simple.


White header

But that’s the rub: since the header’s color changes based on scroll position (or more precisely, its opacity changes), its color is defined using JavaScript. And modifying JavaScript-based styles is a bit more involved than simply adding CSS overrides to index.html. In order to change the header color, you’ll have to modify the development (i.e., unminified) version of the of the application source code, and then recompile the application before deploying it to your servers.


If that sounds intimidating, fear not. Again, as long as you know what/where to tweak—and the very purpose of this tutorial is to show you these things—then you shouldn’t have any trouble changing the color of your Cascade header. In this tutorial, we’ll essentially invert the appearance of the header, so that the background color is white, but the text is dark gray. Of course, you can use any other color combinations in your own story. Read on to get started.


Read the blog post...


> Change the Color of a Cascade Header