storymap-tour icon indicating copy to clipboard operation
storymap-tour copied to clipboard

change marker color in carousel

Open upcamogie opened this issue 6 years ago • 1 comments

I altered the markers in my hosted app and now I need to figure out what I am leaving out of my overriding CSS in the index.html that would allow the change of color.

In the maptour-config file, Instead of adding a new color marker set, I changed the red one to reference a new folder called 'bike' because I did not have luck just adding some of the extended markers available for download. I am using the non src download version since all of my changes seem to be 'cosmetic'

around line 79 in the maptour-config.js, I altered the red color PIN_CFG: { r: { iconPath: 'resources/markers/bike/Bike', // A css class that define the color to be used for the Desktop carousel and builder organize popup cssClass: 'number-red' },

So I figured I need to change the 'number-red' class in my index.html to a new color. I added this code to my index.html where the 'custom CSS rules' text is located. Got this idea from this geonet post https://geonet.esri.com/thread/80582 but not modifying the 'min' file as it says there

around line 203...

My new icons show on the map but the carousal still has the red markers. What am I missing? thx

upcamogie avatar Aug 16 '17 16:08 upcamogie

I think I got it- experimented some more and also added these lines to my index.html .carouselScroller span.number-red:before { background-color:#bae352; /* background-image: url('media/bikesign.jpg'); */ }

the commented out is to see if I can use an image instead of the color (it works) Hopefully this thread may help someone else

upcamogie avatar Aug 16 '17 19:08 upcamogie