Customize a theme for impactful stories

This tutorial will be retired April 2024. We apologize for any inconvenience this may cause. You may view an archived version of this tutorial here.

In this tutorial, you'll follow the workflow for an award-winning story created in the ArcGIS StoryMaps builder and see how theme and visual elements can help create a standout story. The theme of a story can drastically change the emotions that your reader might feel while reading. This story also demonstrates how stories can be just as, if not more, impactful when they contain less text and more graphics to emphasize their message.

This tutorial was last tested on December 1, 2023.

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role in an ArcGIS organization (see options for software access)

Customize a theme for impactful stories

Create a theme

The winning student story of the 2020 ArcGIS StoryMaps Competition, Hidden Realities, is an example of a custom theme at work. The story contains limited snippets of text and focuses primarily on using impactful graphics and theming to convey the story's message, raising awareness for ongoing femicides in Türkiye. The goal of this tutorial is to re-create the custom theme of this winning story and apply the theme to a story of your own.

Once you've read the winning story, you're ready to build your own version of the theme. The theme builder is available through the ArcGIS StoryMaps gallery.

Note:

If you're new to ArcGIS StoryMaps, try Get started with ArcGIS StoryMaps for a more general introduction.

1. Download the instructional folder of photos for your story and unzip it to an easily accessible location on your computer.
2. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

3. On the ribbon, click the Apps button. In the app launcher, click StoryMaps.

   

   The ArcGIS StoryMaps site appears. First, you'll use the theme builder to create a custom theme similar to the one featured in the Hidden Realities story.

4. Click the Themes tab.

   

   The Themes page appears. If you've previously created themes, they'll appear here.

5. Click New theme.

   

   The Theme builder appears. The builder provides sample text that mimics a typical story. It includes elements you'll likely include in your story, such as a title, subtitle, paragraphs, buttons, and separators. These elements will show the changes you're making to model how the font, text color, background color, and accents might look in your story.

Choose colors and fonts

Next, you'll start building the theme. The theme that the authors of the Hidden Realities story created is powerful in its simplicity. They primarily used three main colors—black, red, and white—to allow the images to stand out.

1. In the theme builder pane, click Untitled theme and type Hidden Realities theme.

   First, you'll change the most prominent theme color, the background.

2. Expand Colors. Click Background color and choose the black option.

   

   The theme preview pane shows the new background color. Next, you'll set an accent color. The accent color shows up in buttons, separators, text underlines, and more. The Hidden Realities story uses a bright red accent color that matches the symbol for the United Nations Sustainable Development Goal it's based on, Goal 5. For the somber theme of the story, the stark contrast of the red and black is also evocative of death, tying into the story's topic of femicide.

3. Expand Accent color and paste the hex value EF402B in the space provided in the box under the color palette.

   

   The accent color is updated in the theme preview pane. The buttons and separators and several other elements now show the red accent. Next, you'll change the text color.

4. Expand Typography.
5. For Title and headings, change the font color to white. Click Avenir Next and choose Charter BT.

   Note:

   When choosing colors, it's important to consider contrast. Having a high enough contrast ratio of text color to background ensures that the content is readable. There are many sites that provide ratio checks for Web Content Accessibility Guidelines compliance, such as this contrast checker. You can also read this blog for more in-depth discussion about color choices.

6. For Paragraph text, choose the same white text and Charter BT font.

   Finally, you'll set the caption text. In the original story, the authors chose more of a light green-blue color to title the pictures of deceased women.

7. For Caption text, set the font color to #809E9D. Captions use the same font as your paragraph text.

   With the main visual elements set, you can focus on the smaller details. This story doesn't include buttons, so you'll skip customizing that section.

8. Expand Quotes and choose the style with a vertical line on the side of the text.

   

9. Expand Links and Separators and read the options available.

   In the Hidden Realities story, the creators used the single solid line aligned left. Used with the quote block, this effect creates a semi-box around the text, adding emphasis.

   

   For more information about these choices and the theme builder in general, read this story.

   Finally, you can choose to apply a logo. If you're working with branding guidelines or producing a story for a company or cause, it can be helpful to add a logo. Now, you're ready to save your theme and apply it to your story.

10. On the ribbon, click Publish
11. In the Publish options window, click Publish.

    

    Your theme is published.

12. On the StoryMaps ribbon, next to the Published badge, click the back button to return to the Themes overview.

Apply your theme to a new story

Once the theme is published, it's available to use in your stories. You'll create a story and use the Design options to add the custom theme to the story.

1. In ArcGIS StoryMaps, click the Stories tab.
2. At the top of the page, click New story and choose Start from scratch.

   

   A new story appears. Before adding elements to it, you'll add your custom theme.

3. On the ribbon, click Design.

   

4. In the Design pane, click Browse themes.

   

   The Choose a theme window appears. The Hidden Realities theme and any other custom themes you've created appear here.

5. In the Choose a theme window, click your Hidden Realities theme.

   The theme is applied to your story.

6. Close the Design pane.

Re-create elements of the story

To test the theme, you'll add a few of the text and graphic elements from the original story. In addition to a cover video, the authors used several types of blocks.

1. In the story builder, at the top of the Title page, click Add cover image or video.

   

2. Download a short, similar video clip from Pexels and save it to the same folder where you saved the story images.
3. In the Add an image or video window, click Browse your files and add the video you downloaded. Click Add.

   The default cover position is Minimal, so the video takes up half a page above the title. You'll update the video to fill the whole page.

4. Click Design. For Cover, click Full.

   

   The video now takes up the full title page, sitting underneath the title text instead of above.

5. Close the Design pane.
6. For Story title, type Custom Theme Exercise: Hidden Realities, and for the short introduction, type Femicide in Türkiye.
7. For the author byline, replace your name with Excerpts taken from the Hidden Realities story.

   Because you're using graphics and text from the Hidden Realities story, you want to clearly attribute the material to the original author.

8. Scroll past the cover and click Tell your story.

   The first element you want to re-create is the boxed quote at the top of the page.

9. Click Add content block and under Basic, click Separator.

   A separator is added right under the cover.

10. Point under the separator, click Add content block, and choose Text. Paste the story's opening text: SDG 5, achieving gender equality and empowering all women and girls, is not only a fundamental human right but also crucial for a sustainable future and an essential component of our human-centered development approach.

    In the story, this text is formatted as a quote block.

11. Highlight the text you just added. In the text formatting box, click Paragraph and choose Quote.

    

    Once you've added your quote text, you'll add an image block.

12. Point under the text, click Add content block, and choose Image.
13. In the Add an image window, click Browse your files, browse to the hiddenrealities-media folder you unzipped, and choose sdg5-logo.png for gender equality. Click Add.
14. Add another text block and format the text as a quote with the following text:

    SDG 5.2 calls to eliminate all forms of violence against women and girls in the public and private spheres, including trafficking and other types of exploitation.

15. Point under the quote, click Add content block, and choose Separator.

    Now you've built several of the blocks used in the original story. Finally, you'll review your work.

16. On the ribbon, click Preview.

    

    In preview mode, there are several options for preview available in the lower right corner, including mobile and tablet views.

17. In the story preview, scroll down and observe the story's content.
18. Click Close preview to go back to edit mode.

    Note:

    This story is meant to be an exercise only and should not be published, to avoid confusion with the original Hidden Realities story.

In this tutorial, you learned how to use the ArcGIS StoryMaps theme builder to customize a theme. The custom theme you built matches the mood and topic of the original story, and enhances the reader's experience by providing additional visual draw. While the theme is stylistically simple, the dramatic colors and accents make the story stand out.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Thanks to Eda Kazancioglu, Melissa Kaslowski, and Zeynep Abes for providing the original story and materials that are included in this tutorial.
• Instructional content and social media content are provided by the ArcGIS StoryMaps team.