topic Re: Customizing Shortlist Story Map in Classic Esri Story Maps Questions

Customizing Shortlist Story Map

PaydenMcRoberts1 — Fri, 08 Sep 2017 21:15:47 GMT

I've been following the instructions in this 2014 blog post to customize some style elements of my Shortlist Story Map. All was fine as I added a header image and changed some style colors in the left pane and the list objects in the pane. However, even after searching through the DOM, I haven't been able to find the right div object to change the color of the tabs or the navigation bar under them. Does anyone know the names of these objects? They've changed since 2014 and I can't seem to find them.

Re: Customizing Shortlist Story Map

DarrenWiens2 — Fri, 08 Sep 2017 21:21:42 GMT

Can you find it using the Chrome dev tools element inspection tool?

Otherwise, can you post a screenshot of exactly what you're looking for, and what settings you use to make a right-hand navigation div?

Re: Customizing Shortlist Story Map

PaydenMcRoberts1 — Fri, 08 Sep 2017 21:35:01 GMT

This is what I'm talking about (the area I've outlined in red):

I'm just trying to figure out the name of that div and the name of the div for the tabs so that I can add css to style them. I've used Firefox Developer Version, but I haven't been able to find a name in the DOM that works.

Re: Customizing Shortlist Story Map

DarrenWiens2 — Fri, 08 Sep 2017 21:37:20 GMT

It's id="nav-bar" for me.

In Chrome Dev tools there's a button to inspect DOM elements: Inspect and Edit Pages and Styles | Web | Google Developers

Re: Customizing Shortlist Story Map

PaydenMcRoberts1 — Fri, 08 Sep 2017 22:15:01 GMT

I've tried adding nav-bar to the style tag but it didn't work.

Re: Customizing Shortlist Story Map

MarkCooney — Mon, 11 Sep 2017 21:47:31 GMT

Try using the important css rule.

#nav-bar {

background: 'red' !important;

}