Customizing the Shortlist Story Map banner

Shortlist is a popular story map template application that is ideal for presenting a curated list of points of interest in a particular geographic area. A good example is the Palm Springs Shortlist, featuring fun, food, hotels, and design topics located throughout Palm Springs, California.

Other Shortlist apps created by Esri and the user community can be viewed at the Story Maps Gallery.

To make a Shortlist app you must first download the template, author a web map with locations of interest, add the web map ID to the template, and finally host the app from a server. This straightforward process is documented in an online tutorial.

The default Shortlist header is gray, but you can easily add visual spice by changing the color scheme or adding your own custom banner to match your organization’s look and feel. Here are several examples:

Before you begin

You should already have a successfully deployed Shortlist application. If not, follow the instructions in the Shortlist tutorial before moving on to the banner customization steps below. We’ll consider several possibilities – changing the color scheme of the banner, adding a banner graphic, and changing the color scheme of core template elements.

The changes can be made by overriding the default style settings of the application. The style changes can be made by editing the application source, by changing styles in the <head> or <body> elements of the index.html, or by using a separate cascading style sheet (CSS) that can be referenced in the index.html.

In this example a new stylesheet will be created to make the desired changes. This approach has a couple of advantages; the application source code is not altered making it easy to return to the default, and all of the customizations are in a single location. To setup the custom.css file, follow the steps below:

Step 1: Add a link to custom.css

In the index.html file, add a link to the custom.css stylesheet that will contain the style changes. Open the index.html in any text editor, and locate the links to existing stylesheets near the top of the file. Copy and paste one of the existing links to the end of the list, and rename the file referenced to custom.css, as shown below:

Or copy and paste the line below into index.html after the link to style.css as shown above:

<link rel="stylesheet" type="text/css" href="css/custom.css">

Step 2: Create the custom.css file

In the CSS folder of the Shortlist source, create a new empty file named custom.css. Changes described later will be made to this file only. If things go awry, just delete custom.css and start again. If you want to go back to the original template as downloaded, simply remove the reference to custom.css from the index.html.

Step 3: Determine the style element you want to change

Using the inspection tools available in your browser, you can peer at the Document Object Model (DOM) to discover the elements you will need to change. See the specific developer documentation for Chrome, Firefox, or other browsers to learn more.

Once you’ve discovered the elements, add them to the custom.css and make the desired changes. These changes will override the application defaults.

Example – Changing the banner color

The default color scheme for Shortlist is white text on different gray backgrounds, as shown below:

The first change we want to make is to alter the color of the dark gray banner at the top of the application. Using the browser (in this case Chrome) developer tools, we can discover that the color of the banner background color is set in the #header element:

To change the banner color, edit custom.css and use the id and attributes of the element to set a new background color. In your custom.css add the id #header and set the background-color attribute to the desired color (in this case the hexadecimal color value). The id and attribute were both obtained from the inspector as shown above.

#header {
  background-color: #a8a875;
}

The above CSS will change the header background to green, as shown below.

To change the font color add the color attribute with the desired color:

#header {
  background: #a8a875;
  color:#333;
}

The Shortlist application banner now has dark gray text on a green background:

Next add a background graphic to the header. From the inspector we can discover that the header is 115px high. A custom banner image was made 115px high and 1000px wide, and saved to the images folder of the Map Tour. To make the image more pleasing, a fade-to-transparent gradient (which will let the background color show through) was applied to the right side of the graphic.

We also wanted the image to display once without repeating, and to be anchored on the left side. The changes made to custom.css to display the background image as described are shown here:

#header {
  background-color: #a8a875;
  background-image: url("../images/austin-ban.png");
  background-repeat: no-repeat;
  background-position: left;
  color:#333;
}

Here’s how the banner looks after these changes:

Doing More

By following the steps above in which you identify elements and then add the desired changes to custom.css using the id or class, you can continue to tweak your application’s look and feel. Below is the final Shortlist app, with additional customizations for the tab colors, thumbnail background, and header divider:

The custom.css file used is shown below:

#header {
background-color: #a8a875;
background-image: url("../images/austin-ban.png");
background-repeat: no-repeat;
background-position: left;
color:#333;
}
.tab {
background-color:#a8a875;
}
.tab.tab-selected {
background-color:#e2deb6;
color: #000;
}
#divStrip {
background-color: #dcc999;
}
#paneLeft {
background-color: #e2deb6;
}
.tab-selected {
background-color:#b9b9b9;
color:#FFFFFF;
cursor:default;
}

The same techniques can be applied to any application template.

For more information

More information about customizing the Shortlist template is available by viewing the Readme file found in the downloaded source.

Thanks to Corey Baker, Esri San Antonio, for contributions to this post.

This entry was posted in ArcGIS Online, Story Maps and tagged , , , . Bookmark the permalink.

Leave a Reply

6 Comments

  1. templatetesting says:

    Here are some custom shortlists that we know about. (These entries in ArcGIS Online have all been tagged with ‘story map’, ‘shortlist’ and ‘custom’ to help people find them):

    http://www.arcgis.com/home/search.html?q=shortlist%20custom&t=content&sortField=modified&sortOrder=desc

  2. tybelt says:

    Great post this can be very useful.

    Along this same line of thinking does anybody know if it is possible to add transparency to the divStrip, and panelLeft? It would create a clean look if the map could be extended behind these elements.

    • Bern Szukalski says:

      The alternate “integrated” layout style places the media on the right, but displays the map behind the elements. I’ve added your suggestion to support that with the “standard” laytout to the list of enhancements to consider moving forward. It would be possible to do this using overrides, or if not then working with the source. I’ve not considered this myself, but will look into it – stay tuned for a follow-up post.

  3. urbannature says:

    This is great, thanks! Just the kind of tutorial I was looking for…

  4. dtm124 says:

    I’m trying to change the text in the pop-up box that says “Details >>” to “Expand.” I’m inspecting the element and I see the code where it is but I can’t tell which file it’s referencing so I can go in and change it. I’m also a coding rookie so I”m sure the answer is in front of me…I just can’t seem to locate it. Thanks.

    • Bern Szukalski says:

      That change can be made in main.js located in the apps folder of the source. Just search for “Details >>” and change the text to anything you want. You will also need to have DETAILS_PANEL set to true in the index.html to enable that panel.