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

[CarmelConnolly · Accepted solution]

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

[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>
    /* CUSTOM CSS RULES */
</style>‍‍‍‍‍‍

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>
    /* CUSTOM CSS RULES */
    #header {
        background-image: url("resources/banner.jpg");
        background-size: 100% 100%;
    }
</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

[FengChen2]

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

1. 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?
2. Where do you customize the color of the inactive tab?
3. 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:

<style>
        /* CUSTOM CSS RULES */

        #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:

<style>
        /* CUSTOM CSS RULES */
        #headerNavBarPanel {
                background-image: url("resources/banner.jpg");
                background-size: 100% 100%;
        }

        #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!

[NathanHeick]

Hi Feng,

I updated my original post after doing some testing.  My code also had a CSS rule to make the header background color transparent.  You need to add that.  Also, the CSS rule for making the nav-bar transparent was not accurate.  The JavaScript code sets a CSS rule on the nav-bar background color to !important, which overrides the CSS rule I told you to add.  If you add !important to yours too, it will override the one from the JavaScript.  I didn't actually use !important in my code.  I ended up modifying the JavaScript, which would be harder for you to understand up front.

I had never touched CSS before this app.  I just used the developer tools (F11) to navigate the DOM and see which CSS classes and element ids were being used.  I looked at the CSS rules to see how they related to what's on screen.  In the developer tools, you can modify the web page styles in memory to test things out before you make the change in index.html.  Furthermore, I didn't touch the JavaScript until I had accomplished everything I could in CSS.  Once you get into the JavaScript, you have to follow the execution of the JavaScript code starting in index.html.  After a little filtering of information, you realize that almost everything is in six files.  There is a file for config, the MainView, the NavBar, the TilePanel, the DetailPanel, etc.  There are a lot of files you don't need to understand.  I added a Search widget in the map with custom behavior, a basemap toggle, layers that turn on and off with individual tabs, layers that turn on and off with individual points, tab specific zoom extents, and a county specific zoom button.  Some of these things Esri had already started in the code or have implemented since.

Have fun,

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.