Story Maps

Hack a Custom Background Color into Your Cascade Story Map

Disclaimer: You should not do this. It involves customizing Story Map json without a net. The perils are great and the risk of cataclysm simply too high to accept.

Claimer: You should definitely do this because it rules.

Ready? Markup hacking sleeves rolled up? Good good. I’d like you to cast off your trepidation and assume the mantle of brave and noble default-busting. Why? Because COLOR!

Color! Glorious color!

Coloring Inside the Lines

I’ve said it before, but here it is again. Those who choose software defaults are the most powerful people in the world. Now, the default theme of a Cascade story map is a white background and near-black text.

Cascade editor. The default background is white. Pretty jarring transition between text and graphics in this case.

But you have options! You can alternatively choose a dark theme, which is the reverse of that. And…well, that’s it.

You can choose between a light and a dark theme.

…or IS it?

Hack Time

I am here to tell you, this fine day, that you are not stuck with these two options. But to open up a world of color, you must confront the intricacies of JSON editing within AGO-Assistant. What is in there? Only what you take with you.

This is ago-assistant.esri.com. “A swiss army knife for your ArcGIS Online and Portal for ArcGIS accounts.” After agreeing to some apocalyptic warnings, I searched for my fires story map, then expanded the “I want to…” droplist.

AGO Assistant lets you do all sorts of helpful, but risky, stuff to your stuff.

If you choose the “View an item’s JSON” option, and select a Cascade story map (in this case, my “Fires & Population” story), the covers are pulled back to reveal the terrifying JSON markup guts of your story.

Oh boy, things are getting real. That's markup. Careful now!

There are two JSON files associated with Cascades. Description (metadata stuff) and Data (the story’s content and how it should look). We are interested in the Data file. If I were you, I’d first copy and paste the content into notepad as a backup, but you’ll do what you feel is right.

We’ll be taking a look at the “id”, “label”, “bgMain”, and “textMain” bits…

These are the doodads we'll tweak. Buckle up!

Ready? Ok, click the little pencil edit button to commence editing. Then choose some name for your new color scheme and give it to the id and label. I chose “BLAZE” because it sounded cool. Then put in your own custom hex colors for the background and text. I chose #430015 for the background and #CA0042 for the text, because those are the colors my maps use. And I want this story’s text and graphic elements to be gloriously seamless (here is a pretty handy tool for getting the hex code of a color).

There. I've done it. I've edited markup without messing up some semicolon or whatever. Rare indeed.

Save your edits. Ok, this is where it gets cool. Back in your story map editor, refresh the page (so the Cascade story map editor has your sneaky new edits). Now when you open up the options and look at the Appearance tab…YEAHHHHH! There it is. You hacker!

New theme hacked right in!

Choose this new theme, then save your story. And let the wonders of a custom crafted theme wash over you…

Oh my goodness. So much better.

With Great Power Comes Great Responsibility

A couple notes of caution, if you haven’t gathered this already. 1, It’s super easy to wreck stuff (this applies especially me) when editing the markup guts in AGO-Assistant. Be careful and copy over backup versions before you dig in. For realz. 2. Choose your colors wisely. I recommend a monochrome look, using two tones of the same hue. Classy. Here is a sampling of suggestions to get the juices flowing…

Hacky Mapping! John

About the author

I have far too much fun looking for ways to understand and present data visually, hopefully driving product strategy and engaging users. I work in the Content team at Esri, pushing and pulling data in all sorts of absurd ways -and then talking about it. I also get to spend time with the Story Maps team, working on fun and useful user experiences. When I'm not doing those things, I'm chasing around toddlers and wrangling chickens, and generally getting into other ad-hoc adventures. Life is good. Loads more how-to posts: esri.com/arcgis-blog/author/j_nelson/ My YouTube channel: youtube.com/c/JohnNelsonMaps Loads of Styles for Pro: esriurl.com/nelsonstyles Instagram: instagram.com/johnmnelson/

Connect:

Next Article

ArcGIS Runtime Local Server SDK 100.6 now available!

Read this article