Customizing theme colors in Map Journal and Map Series

Owen Evans
Mar 3, 2017 · 4 min read

The March 2017 update to ArcGIS Online includes a new feature called Shared Themes that lets an administrator set a logo and a palette of colors that can be used to apply consistent branding to web apps created by members of the organization.

For Story Map Series and Story Map Journal, the organization’s shared theme colors are used to generate an Organization Theme that is shown with the other theme options in builder.

Having an administrator configure a shared theme for your organization is the best way for most story map authors to apply branding to their stories; however, some authors may want to apply their organization’s theme colors in a different way or personalize the theme colors for individual stories.

Before the March 2017 update, the only way to use custom colors for a Map Series or Map Journal story was to download the app from GitHub, modify the code, and host the app yourself. But, as part of the work to support shared themes in these apps, the theme color values are now exposed as properties in the story configuration JSON. This means you can now specify theme colors for Map Series and Map Journal stories hosted on ArcGIS Online by editing the story JSON using a tool like ArcGIS Online Assistant.

WARNING #1 — Editing JSON can break your story!

If you’ve never edited story map JSON before it’s wise to first try it a few times on a test story until you’re comfortable with the procedure. If you choose to edit JSON for a published story, be aware of the risk you are taking and be sure to copy and save its original JSON in a text file in case something goes wrong.

WARNING #2If you’re not a web designer (or working with one) we strongly recommend you stick with one of the themes provided.

Here’s an example of the JSON that stores the theme for your story. The parameters you see will depend on the story type and layout (Map Series tabbed layout, Map Journal floating panel layout, etc.).

      "theme": {
"colors": {
"name": "side-default-1",
"themeMajor": "white",
"dotNav": "#777777",
"panel": "#FFFFFF",
"media": "#EEEEEE",
"text": "#000000",
"textLink": "#555",
"softText": "#c0c0c0",
"softBtn": "#444",
"esriLogo": "black"

To set theme colors for your story…

  1. Open ArcGIS Online Assistant and log into your ArcGIS account.

Here are some general notes and tips for configuring theme properties:

  • You can adjust the transparency of the floating panel in Map Journal using the panelOpa property. If panelOpa is not set, the floating panel will be 80% opaque.

You’ve edited the theme, now what?

Back in the builder under Settings > Theme you’ll see the organization theme (if configured by your administrator) and your modified theme, which is shown as the Current Theme since it’s currently applied to the story.

At this point, if you choose a theme other than Current Theme and save the story, your modified theme will not be available next time you load the story in builder. You’ll need to use the procedure above to edit the theme colors again.

Additional themes in Map Journal.

What if you don’t see JSON for the theme?

If you don’t see theme in your story JSON settings, it’s likely because you’ve never changed the theme of your story. Just choose a different theme in Settings > Theme, save your story, then refresh the JSON view in ArcGIS Online Assistant by clicking the item name in the left panel. This will write the colors to the JSON so you can edit them. Now you can proceed with the steps above.

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:

Owen Evans

Written by

Product Engineer on Esri's Story Maps Development Team.

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:

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