Change the Color of a Cascade Header

Jazz up the header of your story map with a splash of color—or no color at all.

Cooper Thomas
Jan 26, 2018 · 7 min read

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.

Image for post
Image for post
An example of a custom white header. See it in action here.

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.

Requirements:

  • A code editor (Sublime Text, Atom, and Notepad++ are all good options)
  • A basic understanding of JavaScript and CSS
  • A web server to host your customized story map

Getting started:

  1. Clone or download the application source code from Github. (Remember, you want to grab the unminified code, not the production-ready code available on the “Releases” page.)
  2. Open a command line window and navigate to your working directory. Run npm install and then npm install -g grunt-cli to install the required dependencies. (Note: if you receive an error message after entering either of these commands, try sudo npm install or sudo npm install -g grunt-cli , and input your account password when prompted.)
  3. Once the installations are complete, run grunt dev to initiate the testing environment. This command will build the application once, and then “watch” the source code; if you make any changes, it will automatically rebuild the affected portion only and, if required, refresh the page in the browser.
  4. Open a second command line window pointing at the same directory, and run grunt server (or another command that fires up a local server).
  5. Open a browser window, and navigate to localhost:8080/src/?appid=APP ID HERE. Be sure to insert the ID of a valid, public Cascade story in lieu of the placeholder text. Your story should load, as expected.

If you’re new to hosting or haven’t worked with the development version of the code before, the article below includes a bit more information on the process:

Now that you’ve set up your local development environment, it’s time to dive into the customization!

Changing the header color

Note that there are actually two files called Cover.jsx within the project; you want the one in the app/storymaps/tpl/view/section/Cover directory, not the one in the app/storymaps/tpl/print/section directory.

Why so many different files, you wonder? Their names should provide a clue: we’re not just changing the background color of the header element, but also the color of the story title, bookmarks, and share icons. We’ll work through these four files one by one.

Please note that the line numbers cited in this tutorial are current as of the time of publishing, but may change slightly due to future application updates.

Cover.jsx

Navigate to line 132 of Cover.jsx. The updateContent method affects the opacity of the header’s background color. You’ll notice that the alpha value on line 135 is dynamically determined by the scroll position—pretty clever, right? Replace the RGB values on line 135 with your desired values. In this example, we’re changing the header color to white, so I’ll replace the default RGB values (0,0,0) with mine (255,255,255).

Next, update the RGB values on line 138: in my case, that’s 255,255,255. Leave the alpha value of 0 (invisible) untouched. Here’s how the whole method should look, after you’ve made those changes:

One file down, three to go.

Header.jsx

this._node.css(‘background-color’, ‘rgba(255,255,255,1)’);

Short and sweet. Let’s move on.

Header.less

Most of these style tweaks are self-explanatory, but in a nutshell, here’s what they do.

  • Change the header background color to white (#FFF; fallback)
  • Reduce the opacity of the header drop shadow, as the default opacity is visually overpowering with a white header
  • Change the glow color of the cover logo to white (#FFF)
  • Change the header text color from white to dark gray (#4C4C4C)
  • Change the header link hover color to black (#000)
  • Change the cover header link hover color to white (#FFF)

The .compact class defines how the header appears on the cover page. I recommend using CMD/CTRL+F to search within the file for the appropriate CSS selectors. Note that if you’re changing your header background color to something other than white, or if you have an especially colorful (or desaturated!) cover background image or video, you may need to choose different supplementary colors (drop shadows/glows, link hover colors, etc.).

.story-header {
background-color: rgba(255,255,255,1);
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
}
.story-header.compact {
background-color: rgba(255,255,255,0);
color: #4C4C4C;
}
.story-header.compact .logoImg {
-webkit-filter: drop-shadow(0px 0px 3px #FFF);
filter: drop-shadow(0px 0px 3px #FFF);
}
.story-header .title {
color: #4C4C4C;
}
.story-header .share {
color: #4C4C4C;
}
.story-header .share:hover {
color: #000;
}
.story-header .link:hover {
color: #000;
}
.story-header.compact .link:hover {
color: #FFF;
}

Note that all of these CSS rules should already exist in the file; you’re just updating the color values, except the last one (cover link hover color), which you’ll have to manually add in order to overwrite the default values.

Just one more file to go!

Bookmark.less

.bookmark {
color: #4C4C4C;
&.active {
color: #000;
}
}

Depending on your header color, you may also need to change the bookmark button border color. You can update the border property in this file as well…but I’ll leave you to figure that one out.

Once you’re satisfied with the appearance of your header, add your application ID to the application configuration section of index.html. Now is also a good time to fill out those Open Graph tags, so that your story looks great when shared on social media.

When you’re totally happy, run grunt. This will build the application from your customized source, and place the fresh, production-ready code in a deploy folder in your project directory. All that’s left to do is publish the contents of the deploy folder to your server, and wait for the kudos to come rolling in!

Don’t forget that you can combine this customization with other visual tweaks outlined on this blog. Below are some additional ideas that you might find useful. We’d love to see what you come up with.

Oh, and be sure to check out the Winter Olympics story map demoed here. Ten points to anyone who can spot additional customizations!

Image for post
Image for post

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new…

Cooper Thomas

Written by

Cartographer and product designer @ ArcGIS StoryMaps

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Cooper Thomas

Written by

Cartographer and product designer @ ArcGIS StoryMaps

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store