Create Buttons for Story Actions in Map Journal or Map Series

Owen Evans
Nov 18, 2015 · 5 min read

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.

Standard link style (left) vs. button style (right)

What are story actions?

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.

Defining the style

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.

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.

Creating the button

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>

Apply a style to all buttons in a story

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;
}

More examples

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.

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.

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.

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: http://storymaps.arcgis.com

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: http://storymaps.arcgis.com

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