Customizing the Story Map Shortlist banner

By Bern Szukalski, Esri

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.

You can view other Shortlist apps created by Esri and the user community 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 your 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 in different ways 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 link, 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 your custom.css and start again. If you want to reset 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 changes, these 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 browser (in this case Chrome) developer tools, we can discover that the color of the banner is set in the #header element:

To change the banner color, edit custom.css and specify the new background color. In our file #header is an id selector and background-color is an attribute (in this case the hexadecimal color notation). The id and attribute were both obtained from the inspector shown above.

#header { background-color: #a8a875; }

This will change the header background to green.

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

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

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

Next we’ll add a background graphic to the header. From the inspector we know the header is 115px high, so we made our background image 115px high and about 1000px wide and saved it in the images folder. 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

Following the above procedure of identifying elements, then adding the desired changes to your custom.css using the id or class, you can continue to tweak the look and feel of your application. Below is our 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; }

This same technique 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.


Originally published at blogs.esri.com on April 7, 2014.