More fun with styling Journal and Series story maps

Owen Evans
Oct 1, 2018 · 4 min read

We’re back with more fun tweaks and styles you can add to your story maps to make them your own.

For information on how to use the code in this article in your own stories, review this article.

Styled Block Quotes or Callouts

Below is some code you can use to create colored boxes around text to separate it from the rest of your narrative. Like this:

A styled block in Map Journal

Use bright colors (that still fit with your story’s overall theme) for accenting key points, or muted colors/grays for a more subtle treatment. Feel free to play with the code to get your desired effect. You can remove or change the border style, adjust padding, or add any other effects you might want with CSS.

<style>
blockquote.orange-block {
font-style: italic;
color: black;
background: orange;
padding: 10px;
border: 1px solid black;
}
</style>
<blockquote class="orange-block">
<p>Agricultural yields vary widely around the world due to climate, management practices, and the mix of crops grown. This map shows average yields for 16 major crops.</p>
</blockquote>

Changing navigation bar colors in Journal

Ever want to change the background or foreground colors of the dot navigation bar in a Map Journal? Studying Up on Higher Education is an example of this.

You can make this modification and change the other main colors of your story by modifying its theme (which requires editing the story’s JSON configuration), or you can add a little CSS to the source view.

<style type="text/css">
.mainViewSideMap {
border-left: 1px solid #F2F2F2 !important;
}
.navDots.vertical {
background-color: #94B8B2 !important;
border: none !important;
}
.dot {
color: #3A665F !important;
}
</style>

More button styles

We’ve shared code for several button styles on this blog before (see links at the end of this article). The higher education story mentioned above has several nice button styles. They’re themed in different colors based on the section of the story in which they appear. For example,

Styled buttons in the Studying Up on Higher Education story

Here’s the CSS for those buttons, including the hover effects.

<style type="text/css">.btn-green {
display: inline-block;
font-weight: normal !important;
background-color: #DBE7E5;
color: #3A665F !important;
border-bottom: 2px solid #B8CFCB !important;
width: 50%;
border-radius: 2px;
padding: 1px 2px;
margin: 2px;
}
.btn-green:hover {
background-color: #4D887E;
border-bottom: 2px solid #4D887E !important;
color: #FFFFFF !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.btn-orange {
display: inline-block;
font-weight: normal !important;
background-color: #FCE6E0;
color: #B3634D !important;
border-bottom: 2px solid #F5B5A3 !important;
width: 50%;
border-radius: 2px;
padding: 1px 2px;
margin: 2px;
}
.btn-orange:hover {
background-color: #995541;
border-bottom: 2px solid #995541 !important;
color: #FFFFFF !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.btn-purple{
display: inline-block;
font-weight: normal !important;
background-color: #E1DDE9;
color: #4F416D !important;
border-bottom: 2px solid #A59ABD !important;
width: 50%;
border-radius: 2px;
padding: 1px 2px;
margin: 2px;
}
.btn-purple:hover {
background-color: #695691;
border-bottom: 2px solid #695691 !important;
color: #FFFFFF !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.btn-yellow {
display: inline-block;
font-weight: normal !important;
background-color: #F4EBD8;
color: #98762F !important;
border-bottom: 2px solid #DFC48B !important;
width: 50%;
border-radius: 2px;
padding: 1px 2px;
margin: 2px;
}
.btn-yellow:hover {
background-color: #CA9D3E;
border-bottom: 2px solid #CA9D3E !important;
color: #FFFFFF !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.btn-red{
display: inline-block;
font-weight: normal !important;
background-color: #E7D9DA;
color: #643235 !important;
border-bottom: 2px solid #B68E90 !important;
width: 50%;
border-radius: 2px;
padding: 1px 2px;
margin: 2px;
}
.btn-red:hover {
background-color: #854346;
border-bottom: 2px solid #854346 !important;
color: #FFFFFF !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.btn-inline {
display: inline-block;
text-decoration: none !important;
font-weight: bold !important;
background-color: transparent;
border: 0px solid transparent;
border-bottom: 0px solid transparent !important;
color: #00ccff !important;
border-radius: 2px;
padding: 0px 0px;
margin: 0px;
}
.btn-inline:hover {
background-color: transparent;
text-decoration: none !important;
font-weight: bold !important;
border: 0px solid transparent;
border-bottom: 0px solid transparent;
color: #ffffff !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
</style>

Further reading

You also might be interested in our previous articles with other Story Map style tweaks such as this one, this one, and this one.

Banner photo by Tiraya Adam on Unsplash

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