Visit Part 1: The Story of Connecticut’s Changing Landscape and
Visit Part 2: Creating the Story Map of Connecticut’s Changing Landscape

This is part 3 of a 3-part blog about the Connecticut’s Changing Landscape Story Map. This blog is the most technical and is meant for folks that already have created a story map and are ready to move beyond what is available in the online template.  However, its not that technical.   I am not a coder, I am a hacker.  I like to explore the code, figure it out,  take it and use it.  The customization here only changes the way things look outside of the main stage and side panel.  It does not get into the guts of the story map code itself.  I am talking about the clothes of the paper doll, not the paper doll itself.

In order to take this plunge, you need to have access to a web server that can be seen by the internet.

 

Why Customize?

Well, to make it your own, obviously.  But some of the basic things that are possible include changing the graphic in the tab of the browser to your own, adding google analytics code, changing the colors and overall look and feel.

Maybe the best way to see why is to view the pre-customized and customized version of this story map.  Notice the difference in theme colors, graphic colors, the addition of a header and the removal of the social media icons on the top.

    

Where to Start

First, work on and perfect your story map in ArcGIS Online (AGOL).  Read part 2 if you haven’t done this yet.  Get all the data in order, then the AGOL maps and pop-ups, then the story map pages, text, graphics, maps, etc.  Get it as far as you possibly can.

Next, download the code from GitHub and save to your server.   The GitHub page has the code and instructions.  Read them.  After the code is downloaded and unzipped in the right place on the server (meaning that the internet can see it), add the map id to the index page.  The instructions are good and index/l code is well notated.

Test it out and be sure you can view your story map using your web server address.  If so, you are good to go.

For example, when I first downloaded the GitHub code and got things going, I accessed the same exact map and (guts and outsides) from the AGOL URL and from my server.  They aren’t the same now because of the customization, but that is how it should work at first.

http://uconnclear.maps.arcgis.com/apps/MapJournal/?appid=d2dcd66264a54ccfb50a15c40ec6f9b9 AND http://clear3.uconn.edu/viewers/ctstory/

Note: any edits made to the story map including the maps, pages, page content, main stage content, etc is still done online through AGOL.  Those changes will automatically show up in your story map when accessed through your server URL.

Graphics

Modify the graphics without touching the code. Dig into the files and find the image or use the Inspect Element capability (explained below).  If necessary, copy the image file (probably a png) from the server to a desktop computer and make a back-up copy. Open the file in photoshop or another image program and change it. Maybe fill the color. Or create a new icon that is the same size (number of pixels). Save it as the same name and replace the one in the same folder. The new graphic will show on your map.

For example, to change the color the arrow on the back button.
– use Inspect Element to determine that the file is saved in the resources>tpl>viewer>icons folder and is called mainmedia-back.png.

– locate the file and copy it to my desktop
– use Adobe Photoshop to change the blue portion   to gold  
– save the file as a .png then put it back on the server (same place, same name)
– that’s it!

Another (slightly more complicated) option is to give the file its own name, such as mainmedia-back_gold.png.  Using Inspect Element, locate the style that is linking to the file.  Here, it was .backArrow.  Change the css to link to your file name, instead of the default.  See the next section for more on changing css.

Looks and Feel: CSS

If you have never used CSS, I suggest reading up on it and then coming back.  I found that it worked well to create a new css (I called it styles.css) that I saved in the resources>custom>  folder in my story map files and then linked to it in the index/l.  All the css changes I made were done here.  This preserved the original files and kept (or helped) me from getting lost.

 

The “Inspect Element” Feature – Finding those Styles

Browsers can expose the source code of pages and reveal where the pieces are coming from, but you probably already knew that.  I like chrome or firefox.  Here is my approach:

– in a browser, I find something I want to change in my story map
– right-click over it and choose Inspect Element (A)
– the div class is highlighted (here, on the left in B) and all styles coming from different sytlesheets are listed (here, on the right in B)
– play around with the options and decide which style or styles need to be changed
– copy them to the styles.css on my server
– done! sometimes its takes some playing …

Here is an example.  Let’s say I wanted to change the Legend background color.  (A) I right-click over the Legend box and choose Inspect element.  The titleBtn div class is highlighted on the left (in my graphics) with all the styles contributing on the right.  (B) I click around and play a bit and find that the .mapControls .titleBtn style is what I need to change.  (C) I copy it and (D) paste it into my styles.css on the server and make the color change (from #CCC to #42D627).  And the Legend is now green! But not really cause I didn’t really do this to my story map.  I changed it to gray cause I like it gray.  But you get the point.

A)    B) 

C)    D) 

I made a lot of my modifications this way.  I spent some time browsing other story maps and finding things I liked.  Then I inspected their elements and went from there.  It’s a great way to learn.

 

That Little Icon on the Browser Tab

If you have a fav icon already, add the file, called favicon.ico to the same folder as the index/l on the server.  If not, google how to create one, create it and then add it to the folder on your server.

 

Adding Google Analytics

Google analytics code cannot be added to the story map unless the code is downloaded as we are discussing.  There are some blogs about it  (just google it – ha) and add it to the index/l page.

 

That is enough for now.  Hopefully some technical tidbits have been helpful in your storytelling. The End.

 

Connecticut’s Changing Landscape Story Map | Esri Storytelling with Maps Contest Winners | Esri Story Maps

---