How do I customize the bullet icons?

[JamiDennis]

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. 

[JamiDennis]

anyone?

[KathrynAngleton]

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.

[JamiDennis]

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.

[KathrynAngleton]

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:

[JamiDennis]

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!

[OwenGeo]

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.

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

[JamiDennis]

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.