Create buttons for story actions in classic Journal or Series story maps
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.
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.
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.
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:
- Highlight some text and configure a story action.
- Access the Source View and find the <a> tag with your action.
- Add a class attribute to the <a> tag referencing the style you want to apply to the button.
- 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.
<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.
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.
