Add flavor to your stories with theme builder
Learn how to customize the look and feel of your stories like never before
If you've glanced at one of these ArcGIS StoryMaps tutorials before, you might be noticing that this one looks a lot different. In fact, if you're at all familiar with ArcGIS StoryMaps, this story likely looks different than most that you've seen before. That's because with the theme builder tool, first rolled out in September, 2020 , it's possible to customize a story with any color scheme you can dream of, choose from an expanded list of fonts (including the Google Fonts library), plus configure the style of a half-dozen other story elements.
Creating your own theme is easy — just follow the 14 steps of this tutorial to learn everything you need to know about how to give your stories a unique visual language. Feel free to follow along in the ArcGIS StoryMaps builder for some hands-on learning as you read.
Design a custom theme
Step 1: Access your themes library
The easiest way to get started with custom themes is through your themes library, which is accessible via one of the tabs on the left-hand side of your My Projects page (along with stories and collections).
Click on Themes and you'll see a screen that looks similar to your stories or collections pages — your saved themes will live here once you've created them. If you haven't created any custom themes yet, the library will be empty, with a large prompt in the middle to "Create your first theme."
Tip: You can also access your themes library via the design panel when in the builder for a story — just click manage next to the Theme heading.
Step 2: Start a new theme and give it a name
Click +New theme button in the upper right-hand corner of the library to to enter the theme builder (if you haven't created any themes before, the Create new theme in the middle of your empty library also accomplishes this). You'll then be prompted to select one of the six pre-fabricated themes that comes with ArcGIS StoryMaps to use as a starting point.
The theme builder layout consists of two major components: To the right, occupying most of the window, is a generic sample story. It will automatically update as you adjust theming options, so you can see in real time how your theme will look as a finished product.
On the left-hand side when you first create a new theme are the six standard preset themes that are available in the ArcGIS StoryMaps builder. For any new theme, you must select one of them to use as a base. Once you've selected your starting point, that panel will be replaced by all the theming options themselves, separated into eight categories. At the top of this theming panel is a box where you can name the theme; go ahead and give it a distinctive title so it'll be easy to pick out from your library later.
In the following slides, we'll walk through every available theming option in turn.
Tip: Like stories and collections, you can also duplicate themes via the More actions (three dots) menu either on the theme's card in the theme library or the header bar while in the theme builder. This means that you can feel free to experiment as much as you'd like while creating themes—just duplicate your theme any time you want to create a backup copy.
Step 3: Get acquainted with the Colors options and choose the background color
This first category of theming options is arguably the most important. The combination of colors used throughout a story can set its mood, match a topic, or complement branding.
Click on Colors in the theming panel to expose a list of theme-based coloring options. (Note that all new themes are pre-populated with the attributes from the existing Summit theme).
First, you'll want to determine the story's background color. (Note that the credits section, embed cards, and the inline audio block will always take on a slightly darker or lighter version of the background color.)
Click the color chip to reveal a selection of "Basic colors," a limited spectrum of six neutral tones. Underneath these is a color picker that you can play with to find your perfect hue. You can also enter a hex color code, if you already have one, into the text field below. The hex code for any custom color produced by the color picker will also be generated in that field, so you can save it somewhere for future reference.
Tip: As you work your way through the Color options, it's important to be mindful of making appropriate aesthetic decisions. Good choices benefit all readers, especially those with accessibility requirements. Check out this story for some great advice in that regard.
Step 4: Continue setting up your theme's color palette
Continuing down the Colors menu, your next decision is to choose the story's header color. This is the strip that stays pinned to the top of the story as you scroll down and contains the title and options for sharing/favoriting the story, as well as your profile menu if you're logged in to ArcGIS Online.
You have the option to make the story header either white or black, but you can also opt to have it match the story's background color by checking the box next to Use theme colors.
Next up is the primary accent color, the color that will be initially used for design elements such as buttons, separators, quotes, express map/guided tour points, and text hyperlinks. The "Basic color" options here consist of a preselected ten-color rainbow, along with, again, the color picker.
Finally, you can also opt to provide two additional accent colors that will also appear in the in-builder palette as the "recommended" choices when changing the color of text or an express map feature. The standard choices here are the same array as for the primary accent color, and there is indeed the color picker as an option as well.
Step 5: Fun with fonts — the Typography options
Now that you've settled on a color scheme for your theme, it's time to determine how the text will look. Click Typography to reveal these options, broken down into the three main categories of text used in ArcGIS StoryMaps: Title and headings, Paragraph text, and Caption text.
For the first two of those, you can select from a drop-down list of 31 different fonts. You can also access the entire library of Google Fonts, but more on that in the next step.
You can change the color of both text types, either by picking from a five-tone grayscale spectrum or by once again using the color picker or inputting a hex code.
Captions are tied to the Paragraph text font, but you can change their color in the same way as the others.
You can also adjust the initial font size using the slider bar above the font picker. Note that the heading text size will also change relative to the paragraph text size. You can also still make individual blocks of text larger (or smaller, in briefings) using the text formatting tools in the story/briefing builder.
Tip: When choosing a font pairing in ArcGIS StoryMaps, consider a coupling of one serif with one sans serif, or using the same single font throughout. A combination of two different serif or sans serif fonts can work, but make sure there's enough visual distinction between the two.
Step 6: Dive into Google Fonts
Should the 31 pre-selected fonts not quite meet your design needs, you can instead opt to bring in open-source fonts from Google Fonts , via a font picker right in the theme builder.
Click Add from Google Fonts (beta) at the top of the font drop-down list to access the Google Fonts library. Initially, the displayed list has been curated down to only those font families that have the full complement of bold and italic styles.
To explore all 1,000+ Google Fonts, toggle the Show all options button above the font list. A caution symbol will appear next to those families that are missing either bold or italic styles.
When you click on a font's name, a preview of all four styles of that font (regular, bold, italic, and bold + italic) will appear to the right. For some fonts, you will have the ability to adjust the weight of that font's regular and bold styles as they will display in your theme.
Once you've settled on a font, click Add family at the bottom right to bring that font into your theme. Any fonts you've added will now appear in the drop-down font list with a wireframe globe symbol next to them.
Tip: If your organization’s brand font is not open source, look for open source alternatives that closely match licensed fonts. A quick web search should reveal if there’s a similar font that can work for you. Sites such as Typewolf provide information about alternative fonts as well as advice on choosing and pairing fonts.
Step 7: Choose your button style
The next four theme builder controls govern the appearance of four story elements: Buttons, Quotes, Links, and Separators. For each, there are multiple styles to choose from, plus the option of setting a custom color via the ten-color palette or color picker/hex code (otherwise, they will use the theme's primary accent color).
Buttons are used to call special attention to a link out of a story. They can appear as a rectangular block, a block with slightly rounded edges, or an oval shape. Their text is the same as the paragraph text font and will start out as either be white or black, depending on which contrasts better against the button color. Like the overall button color, you can also set a custom text label color if you'd like (but be sure to pay attention to the contrast checker to make sure the text will be easily readable against the button color).
Step 8: Choose your quote style
Quotes are one of the text formatting options and can be used to emphasize something a person said that is important to your story.
Quotes always use the theme's Title and heading font and color. There are five style options, plus an option to center-align the text. The five styles are:
- A vertical line on the left side of the text (with center alignment, it takes the form of horizontal lines above and below the text).
- A double quotation mark at the top left of the text (with center alignment, it is centered above the text).
- A box around the text with a double quotation mark at the top left (with center alignment, the quotation mark is centered above the text).
- A large double quotation mark to the left of the text (with center alignment, it is centered above the text).
- A solid fill behind the text. Note that with this option, the text will either be white or black depending on whether the color of the fill is light or dark.
Step 9: Choose your hyperlink style
There are three hyperlink options as well: a solid line underneath the linked text, a dashed line underneath the linked text, or a colored fill in the linked text's background. For that last style, the linked text will either be black or white (regardless of paragraph text color) to best contrast with the link color.
Step 10: Configure your theme's separator graphic
There are three in-house separator options: a thin single line, a double line where the top line is much thicker, or three diamonds. For all three, you have the choice of left- or right-adjusting the separator, or centering it. For the two line styles, you can also opt to extend it across the full width of a text block.
You can also upload an image to serve as your own custom separator. Click the photograph symbol beneath the three other options to bring up a file picker from which you can select an image on your computer to use (animated GIFs are allowed!). Like the other separator styles, you can choose whether to left- or right-align your custom separator or center it. Or, you can opt for full width, which will repeat the graphic multiple times across the screen.
Step 11: Specify a default basemap
It wouldn't be ArcGIS StoryMaps without the "maps," and in theme builder you can select a basemap that will appear as the default basemap any time you add an express map or map tour to a story using that theme (you can always override the theme basemap and choose a different one for each individual express map or map tour within a story).
Unfurling the basemap tab will display a thumbnail of the current theme basemap along with its name. Click on that to open a basemap picker consisting of sixteen pre-selected basemaps. You can pan and zoom in the sample map in theme builder to see how different basemaps look at different scales in different parts of the world.
If you've got a custom web map in mind that you'd like to use as a basemap, just click the Browse more maps button at the bottom of the basemap picker. You'll be taken to your library of available maps, including your own maps, maps you've favorited, are shared to groups you're a part of, reside in your organization, or have been produced by the ArcGIS Living Atlas of the World . (Note that only the basemap layers for a web map will be pulled in when it's being used as a theme's basemap.)
Tip: A good basemap goes a long way towards effective cartographic storytelling. Check out this blog post for a brief guide to choosing the right basemap for your theme.
Step 12: Add a logo to your theme
Finally, you can use your theme to promote your organization's brand by adding a logo to it. This logo will appear in the header of any story that uses this theme.
To add one, simply click Logo to expose a simple upload field. Click the + to upload your logo image. After the upload is complete, two more fields will appear: Logo link, where you can enter a URL that will turn the logo in the header into a clickable hyperlink, and Logo alternative text, where you can describe your logo for use by screen readers.
Step 13: Publish your theme
When you've finished adjusting your theme's settings, scan the sample story one last time to make sure everything looks good and is readable, then click Publish in the app header.
As with stories, you'll see three options for publishing: Private, My organization, and Everyone (public). Privately means only you can see the theme, and publishing to your organization will allow anyone else in your organization to browse and use that theme and see it in a story. Be aware that anyone who views a story whose theme is restricted to them will see that story in the default Summit theme instead.
Note that you also have the option to share a theme with a particular group; if your organization has an "approved themes" group set up, that group will appear at the top of the list of groups with an icon indicating it is the designated group for approved themes. For more information on setting up and using an approved themes group in your organization, read this blog post .
Step 14: Add your theme to a story
Enter the builder for the story you want to use your theme with and open the design panel in the header. Underneath the standard offering of prepackaged themes, you will see a button for the Featured themes gallery (some additional pre-designed themes that you can use), and beneath that is another button for Browse my themes. Clicking that will take you to the theme browser, where you will see all the themes you've created, with a thumbnail depicting each theme's color scheme and font types, offering a visual preview of the theme.
You'll also see a few additional tabs near the top of the page. If your organization has an approved themes group set up, you'll see an Approved tab second from right. All themes shared to the approved themes group will show up in there. Then there are tabs for My Favorites, My Groups, My Organization, and Public content, all of which are self-explanatory (and searchable, to help you quickly zero in on the theme you're looking for).
Click on a theme to instantly apply it to your story! Note that the same process can also be used to apply a theme to a collection, too.
Tip: To start a fresh story utilizing one of your custom themes right off the bat, find the theme you want in My Themes and open its "Quick actions" menu (the three dots in the lower right hand corner of its card). The first item is Start a new story; click to launch the story builder to a blank story already incorporating that theme. (Note that clicking directly on the card for a theme that doesn't belong to you will immediately create a new story using that theme.)
The expansive design power of the ArcGIS StoryMaps theme builder gives storytellers immense control over their story's look and feel, but that power must be wielded responsibly. It's important that storytellers never lose sight of good design principles. To that end, my colleague, Allen Carroll, has put together a primer covering some of the dos and don'ts that go into putting together a great aesthetic theme for your stories.
It's also important to know that theme builder is far from a finished product; more features and capabilities are in the works for it. If you have any feedback after creating a theme of your own, if there's anything you would like to see added to theme builder, by all means, please share it with us ! And, while you're sharing, be sure to tell us about your fresh themes and the creative stories you've applied them to on Twitter at @ArcGIS StoryMaps .
Looking for more resources?
We have lots of articles, tutorials, videos, and more available on our website. It's a great repository for anyone looking to take their ArcGIS StoryMaps skills to the next level.