nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customize Story Map Shortlist to add photo in header

NBurling

I am working with the Storymaps shortlist app and have seen some beautiful examples in the gallery but I can't figure out how reproduce some of the features. For example this map as a photo as the header. Can someone help me figure out how I can do that? thanks

タグ付きの投稿をもっと見る

Accepted answers

cnnlly

Hi Nono,

It looks like that story map is hosted by Salt Lake County themselves rather than in ArcGIS Online - this means they can make additional styling changes to the app that you can't do in ArcGIS Online. It's possible to download the Shortlist app from here under the 'Host it yourself' section.

Carmel

All comments

cnnlly

Hi Nono,

Carmel

NBurling

Thanks Carmel, that makes sense. I wish I had the skills to develop something that sophisticated.

RupertEssinger

Yes, the custom header graphic stylings you see in examples like:

https://slco.org/ghosts-west-temple/
Beaverton Restaurant Week: Where to Eat
http://www.forestrygis.com/saf2016/index.html (the tabs have also been customized)

are achieved by downloading the source code and hosting it on the web yourself so you can modify it. Doing these sorts of customizations are one of the reasons we provide the source code for these app templates. In this configuration, the web map and the data it displays are still hosted in ArcGIS, and you author your Shortlist the same way, and the app resides in ArcGIS too. You tell your self-hosted version of the app source code to display that app. To find out more about what is involved in general, see the 'If You're a Developer" section of the Story Maps website > Resources page.

We don't expect every GIS user to be able to do this sort of customization. I've been at Esri for more than 25 years and I don't know how to do this . But it is fairly straightforward if you know some web development and there may well be a web person in your organization who could work with you on it.

One trade off to remember with self-hosting our app code: as your source code is no longer hosted in our cloud, it doesn't automatically get updated when we fix issues or add enhancements.

Rupert

NathanHeick

Hi Nono,

Earlier this year, I was in the same situation as you. I wanted to make a good looking story map with a lot of the cool features other people have employed. Initially, I had not previously done any customizations. There are two options here, download the ready-to-deploy app or download the source code here. The easiest way is to download the ready-to deploy app. If you unzip the application and open up index.html, Esri developers have left a spot for us to make CSS style changes to the application. With these style changes, you can do a lot to change the appearance of the app.

<style>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/* CUSTOM CSS RULES */</SPAN>
</style>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

You want to set the background image of the top portion of the application which is the element with id="header". To do this, you can do the following:

<style>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/* CUSTOM CSS RULES */</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#header</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url("resources/banner.jpg")</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-size</SPAN><SPAN class="punctuation token">:</SPAN> 100% 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You need to add the CSS rule above to index.html and save your banner image in the resources folder of the application as "banner.jpg". You could also pass in a URL to the image if it is hosted somewhere else.

Then, you will need to deploy the app on a web server. If that sounds like too much, this would be very easy for a web developer in your IT department. If you want to make changes beyond just style changes, you would need to download the source code, modify it, and compile it using Node.JS and Grunt.

Currently, I have a development version of the app I am working on here:

https://d315r0g26gh8i4.cloudfront.net/

This link will eventually go away, but the production app will be named Facilities and will be under the Los Angeles County Sanitation Districts AGOL organizational account under my username. I started out really simple and then continued to make more and more changes. I even tweaked the mobile layout. I will say that the CSS changes provide the most bang for the buck. I added about 4 CSS changes at the beginning and it really improved the app.

I hope that helps.

Nathan

NBurling

Thanks Nathan, your map is beautiful. I will look into it though I suspect my skills will not be up to it. More to learn I guess. I sure appreciate this community and also Storymaps in general. You make it so easy for even a non coder to create something of beauty and value.

NathanHeick

Let me add that I think that most of the beauty in story maps comes from the underlying content. Beautiful pictures make a big difference, without any customization at all. That's really the first step of getting the most out of the story maps. Next, CSS style changes give you more control over the presentation. Finally, modifying the HTML and JavaScript let you change the style and behavior of the app. For example, if you click on Scholl Canyon Landfill on my app, it turns on a layer unique to that facility. Remember, many of Esri's story map gallery applications are not custom, but they have really good photographs and good stories to tell.

Try this out yourself and let me know if you have any issues.

Nathan

FengChen2

Hi Nathan, your map is beautiful and thank you for share the info. I have a few questions:

I try to add background image as you suggested, but my image only shows until the top of the tabs, not as the same as yours – your image shows as the background of the tabs in between, how do you do that?
Where do you customize the color of the inactive tab?
Do you customize the content of story at CSV file using html?

Thank you.

Feng

NathanHeick

Hi Feng,

Here are the answers to your questions:

1. First, you have to make the background of the header and the navigation bar transparent. To do that, you could add the following CSS rules to index.html:

#header {

background-color: transparent;

}

        #nav-bar {
                background-color: transparent !important;
        }
</style>

Then you need to set the background image on the entire area including both the navigation bar and the header. This area is called the headerNavBarPanel. To do this, you can change the CSS I provided earlier to the following:

#header {

background-color: transparent;

}

        #nav-bar {
                background-color: transparent !important;
        }
</style>

There is actually code in the application setting the header and nav-bar colors using jQuery. This CSS overrides the styles set in the code and is easier for you to add and remove later.

2. You will have to download the source code to change the tab colors and tab text colors. It is stored in an object on line 897 of the MainView.js file. The location of the MainView.js file in the source code hierarchy is shown on the linked GitHub page. You can easily do a file search for MainView.js as well.

var colors = {
        header: app.data.getWebAppData().getThemeOptions().headerColor,
        tabText: '#d8d8d8',
        tab: '#666',
        tabTextActive: '#fff',
        tabActive: '#999',
        tabTextHover: '#fff',
        tabHover: '#666'
};

If you replace the line:

header: app.data.getWebAppData().getThemeOptions().headerColor,

with:

header: 'transparent',

it has the same effect as:

        #nav-bar {
                background-color: transparent !important;
        }

although it may have some other side effects I haven't researched.

3. The version of the code I am using uses a feature collection stored in the web map. Early in the process I realized that I did not want to edit the data as features in the web map. Also, I knew I wanted the description field to have HTML so that I could make the detail panel have a paragraph, a table of information, and a link to a more detailed facility web page. So, I created a feature class in a geodatabase with all of the natural data fields that I wanted to store and present. Then, I wrote a Python script that would read the features and their 19 fields, generate the HTML for the description field, and update the web map in ArcGIS Online. I had written my own library of tools for working with AGOL items, but you could do the same with the new ArcGIS API for Python,with urllib and urllib2 in Python 2.7, or manually using the ArcGIS Online Assistant. I can make changes in ArcMap to the data and republish the web map in 20 seconds and never touch any HTML.

Now, I am a little rusty on CSV files and feature collections. You should be able to delete the point layer in the web map and readd it using a CSV file with the correct fields. That would make it easier for you to type in the HTML in the CSV file. Otherwise, the Map Viewer and the App Builder, I believe, will take any HTML code you write and escape the <, >, and & characters when it stores it in the feature collection. When it displays it on the page, it will look like the code you entered, not the web page elements it represents, like images or hyperlinks. With the CSV file approach, the feature collection will store HTML and the web map and web app will render the HTML elements correctly.

Also, the latest version of the shortlist story map supports feature services, so it becomes a little easier to understand what's going on.

You can also add other supporting layers to the web map. Just add them after the story points layer.

Enjoy,

Nathan

FengChen2

Thank you so much Nathan for the quick reply.

I try the first one right away and change the CSS as you suggested, however my map does show the background image at the headerNavBarPanel area, maybe I missed something else?

Also, once I download the source code MainView.js, which folder at the template should I save it at?

Lots of helpful info at #3 for me to digest, thank you!

BrandonPrice

Hi Nathan,

How were you able to add the basemap toggle? Was this easy to do? I have a storymap series I would like to add that to that I have downloaded to my server at work.

-Brandon

BrandonGuo_1-1758170906277.gif

Screenshot 2025-09-18 091626.png

image (11).png

Screenshot 2025-09-18 093004.png

NathanHeick

Hi Brandon,

You need to start by reading the JavaScript API documentation and become familiar with adding widgets to applications. There are two options for basemap widgets, the BasemapGallery widget and the BasemapToggle widget. The basic pattern is to add a div element as a child to the map div. This will hold the layout of the widget. Next, you need to create an instance of the widget in the JavaScript code, setup any event handlers, and start the widget up. Finally, you need to modify the CSS if you don't like the styling of the widget.

I chose the BasemapGallery widget and made it look like the BasemapToggle by using only one basemap at a time and wiring an event handler that changes the basemap everytime the widget is clicked. I built my own basemap that combines the World Imagery service with a vector tile service for reference labels. I put the JavaScript code in the initializeUI function in the Core.js file and added the appropriate module imports to the top of the file. I tweaked the CSS to give it a different look and feel. Finally, I added some code to resize the widget so that it is smaller on a mobile device.

You may have to use jQuery's .append method to add the widget div to the map div. I just edited index.html because the map div was defined there already. If you have multiple maps in your story map, the map divs may get injected at run time. Also, you may need one widget for each map in the story. So, you need to understand the particular code base you are working with and how to create widgets using the API. I had never done this before, but I figured out the concept and applied it. The JavaScript API is doing most of the work. You are just specifying where the widget will go, configuring the widget, and starting it up.

Nathan

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.