More fun with styling classic Journal and Series story maps

Owen Evans

Published in

Classic Esri Story Maps Developers' Corner

4 min readOct 1, 2018

We’re back with more fun tweaks and styles you can add to your classic 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.

Using custom HTML in Map Journal and Map Series

In the Map Journal and Map Series Builders, there is a Source button that allows an author to view and edit the HTML…

developerscorner.storymaps.arcgis.com

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:

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>