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.

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.

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 publicly shared Story Map Cascade
• 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:

What follows is a brief guide to downloading the source code and setting up a local development environment:

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:

An introduction to hosting your own Story Map

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

Changing the header color

Open the src folder in your code editor. You will need to make changes to the following files: Cover.jsx; Header.jsx; Header.less; and Bookmarks.less. The fastest way to locate these files is to press CMD/CTRL+P, which will allow you to search the current project directory (which should be src) for those specific files.

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

The cover page is the first thing your readers will see when they encounter your story map, so it makes sense to begin our header makeover here. Incidentally, the header background isn’t even visible when the cover first loads; only after the reader has scrolled about halfway down the page does it begin to slowly fade in. But just because the header background initially invisible doesn’t mean that it doesn’t have a color assigned. By default, that color is black.

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

Navigate to line 198. This line simply ensures that, the header background color is “reset” to white once the reader has moved passed the cover page. Replace the RGB values on this line (0,0,0) with the RGB values of your desired background color. Again, leave the alpha value (1) as-is. Here’s how that line should look once you’re done (assuming you’re also changing the header color to white).

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

Short and sweet. Let’s move on.

Header.less

In some cases, changing the header background color may render the header text illegible, due to low contrast between the two colors. In this example, we need to change the text from its default color of white to something else.

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

Finally, you should update the color of your bookmarks to match the updated style of your header.

.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.

Grow Your Story Maps Audience with Open Graph Tags

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.

Customize the theme and fonts in Cascade

Add a Language Switcher to a Cascade Story

Adding Image Hyperlinks to a Cascade

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

Past Is Prologue in the Race for Olympic Gold