How do I customize the bullet icons?

3043
7
02-27-2015 07:10 PM
JamiDennis
New Contributor III

I would like to customize the bullet icons on my Story map, like they did on this Smithsonian map here:

Zoo Babies | An Esri Story Map

How would I do that? I downloaded the template from github and put it on my server.  I was able to modify colors and such easily, but I want to put custom icons in the bullets. 

Tags (3)
7 Replies
JamiDennis
New Contributor III

anyone?

0 Kudos
KathrynAngleton
New Contributor III

Have you tried creating or searching for the desired icons and then uploading them within the icons/resources (whichever it is for this template) folder? That should work. Then make sure in your CSV or whatever you're using for your points, you point back to the new icons. If you look in the source code you should find where the icons are coming into play, and then just insert your custom icons into the folder specified. Try an inspect element on your current icons when viewing the site on your server if you're unsure of which code contains the icons element.

0 Kudos
JamiDennis
New Contributor III

Thanks Kathryn, I believe I tried that but to no avail. I've set it aside for a bit, but will try this again when i get back to it and let you know if it worked or not. Just to be clear, this is for the bullet icons that are used in place of tabs for the story map. In the example Zoo Babies maps it is the icons at the top in the header, where you click to navigate to the different animals. The default just puts numbers up there, but I'd like to have icons instead.

0 Kudos
KathrynAngleton
New Contributor III

Oh, I misunderstood, sorry about that. I just did a quick inspect element on those tabs you were talking about. It looks like you'll have to load your custom images into "resources/images/mapMarkers" or something similar to this folder, as I said before, I've never worked with this specific story map. Then double check the CSS script to make sure the existing markers are in there because you might need to change what they are called within that script. Here's a screenshot of what I'm seeing:

Untitled.png

JamiDennis
New Contributor III

yeah, those are the map markers, not the bullet icons on the top. I've gone though the CSS and thought I had found the location for the files, but it's probably something simple that i'm overlooking. I'll dig through the code again and see what I can find. I would think that's it's in the CSS styling. I was able to change just about everything else except those bullets. I'm probably just looking in the wrong place.

Thanks for the input. Good to know that I'm at least on the right track!

0 Kudos
OwenGeo
Esri Frequent Contributor

Jami -- I inspected the bullets icons at the top of the app and they use the same graphic resources as the map markers (they just chop off the bottom portion so they look like circles), so if you change the map marker assets and update all URLs I believe your images should also appear in the bullets.

 2015-05-28 at 2.55.36 PM.JPG

Also, I see your original post was from Feb 2015, so I assume you downloaded the Zoo Babies app code from here. In March 2015 we released the Story Map Series app, which incorporates this bulleted layout (as well as tabbed and side accordion layouts) and has a builder configuration experience. That app is also available on github if you want to look at customizing its look and feel.

Owen

Owen Evans
Lead Product Engineer | StoryMaps
JamiDennis
New Contributor III

thanks Owen!  Yes, I have been pulled onto other projects so hadn't seen the updated release. I'll check it out, as I'll need to get seriously back into this next month.

0 Kudos