Create buttons for story actions in classic Journal or Series story maps

Owen Evans
Nov 18, 2015 · 5 min read

This article covers a topic related to the classic Esri Story Maps templates. Story authors are encouraged to use the current-generation ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.

Image for post
Image for post

One way to improve your Map Journal or Map Series is to add customHTML to create attractive buttons for story actions to replace the standard dashed underline link style.

Image for post
Image for post
Standard link style (left) vs. button style (right)

Story actions are links that change something about your story. Actions can change the media that’s displayed in the main stage (change an image to a map, map to an image, map to a video, etc.), change something about a map (like toggle visible layers, navigate to a different area, or make a pop-up appear), or link to another section of your story.

If you’ve never used story actions before, see this blog. To see an example of story action buttons see section 2 of this Map Journal.

Image for post
Image for post

The code below creates a <style> named btn-orange that you can use for an action button.

<style type="text/css">
.btn-orange {
display: inline-block;
background-color: #f0ad4e;
border-color: #f0ad4e !important;
color: #fff !important;
padding: 3px 8px;
border-radius: 5px;
}
</style>

Add this code while editing a section in your story using the Source View (indicated by the orange circle). You can then reference the style by name in that section or any other section of your Story Map. For this reason, you may find it easiest to add and manage all your <style> code in the Home Section of your journal.

Image for post
Image for post
Editing a section in Source View

If you want multiple button styles, copy the code in the <style> tag as many times as you need and change the name and properties for each new style.

Here’s how each property affects the button’s appearance if you want to try some different options:

  • background-color — main color of the button
  • border-color—color of the button’s border (in our examples this is the same as the button color)
  • color — color of the button text
  • padding — size of the button (height and width, respectively)
  • border-radius — amount of rounding for the button corners

Colors can be specified by using either hex color values or HTML color names. See the end of this post for more button style examples and effects.

Note the use of the !important modifier. Declaring a border-color and color will conflict with the application’s default style, and conflicts may also occur if you choose to override other properties. If you don’t see your changes applied, use !important next to that property to force your style to override the default.

To create a story action button:

  1. Highlight some text and configure a story action.
  2. Access the Source View and find the <a> tag with your action.
  3. Add a class attribute to the <a> tag referencing the style you want to apply to the button.
  4. Exit Source View and save the section.

Your code should look something like this:

<a class="btn-blue" data-storymaps="MJ-ACTION-1447532330384" data-storymaps-type="media">Show 100-year floodplain</a>

In some stories you might want to use the code below as a shortcut to style all story actions without requiring any edit to individual actions.

a[data-storymaps] {
display: inline-block;
background-color: #f0ad4e;
border-color: #f0ad4e !important;
color: #fff !important;
padding: 1px 6px;
border-radius: 10px;
}

Here are some more style examples that look good with a white background.

Stand-alone buttons: This style is good for a single word or short phrase on its own line between paragraphs. The text is slightly larger to help the button stand out.

Image for post
Image for post
Stand-alone button style
<style type="text/css">
.btn-orange- {
display: inline-block;
font-size: 120%;
background-color: #f0ad4e;
border-color: #f0ad4e !important;
color: #fff !important;
padding: 5px 15px;
border-radius: 10px;
}

.btn-green {
display: inline-block;
font-size: 120%;
background-color: #449d44;
border-color: #449d44 !important;
color: #fff !important;
padding: 5px 15px;
border-radius: 10px;
}

.btn-blue {
display: inline-block;
font-size: 120%;
background-color: #337ab7;
border-color: #337ab7 !important;
color: #fff !important;
padding: 5px 15px;
border-radius: 10px;
}
</style>

In-line buttons: This button style can be used on text in a sentence or paragraph.

Image for post
Image for post
In-line button style

Using display: inline-block prevents text wrapping from occurring in the middle of your link, so if you use this it’s best to keep the number of words in the link short to prevent awkward text-wrapping situations.

<style type="text/css">
.btn-orange {
display: inline-block;
background-color: #f0ad4e;
border-color: #f0ad4e !important;
color: #fff !important;
padding: 1px 6px;
border-radius: 10px;
}

.btn-green {
display: inline-block;
background-color: #449d44;
border-color: #449d44 !important;
color: #fff !important;
padding: 1px 6px;
border-radius: 10px;
}

.btn-blue {
display: inline-block;
background-color: #337ab7;
border-color: #337ab7 !important;
color: #fff !important;
padding: 1px 6px;
border-radius: 10px;
}
</style>

Hover effects: Adding a hover effect is a good way to provide visual feedback for your readers when they mouse over an action button. Add these anywhere inside your existing <style> tag.

<style>
.btn-orange:hover {
background-color: #ec971f;
border-color: #ec971f !important;
}
.btn-green:hover {
background-color: #5cb85c;
border-color: #5cb85c !important;
}
.btn-blue:hover {
background-color: #286090;
border-color: #286090!important;
}
</style>

This article was updated in December 2016 to reflect a name change from “main stage actions” to “story actions” and again in June 2018 to include Map Series.

Classic Esri Story Maps Developers' Corner

Tips and tricks for classic Esri Story Maps

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store