Map Tour Custom CSS Best Practices

Question

I wanted to get input on the best way to customize a self-hosted map tour.  The application includes a minified stylesheet.  I've added a custom stylesheet that relies on the use of !important to override the default stylesheet.

I am well aware this is a bad practice.  However, whenever I've copied the minified code into a un-minifyer, there is no semi-colon after the last property setting.

I don't want to manually add-in all those semi-colons just so I can use the standard stylesheet and avoid the !important trick.

Any suggestions on how to accomplish this? I am using Komodo Edit as my text editor.

Thanks,

Patrick

pmckinney · Answer

Thanks for the info Gregory.  I ended up using the loadCSS function.  I also realized some of my selectors were not specific enough.

I'm trying to improve some story maps I developed when I was less skilled with front-end languages.

GregoryL_Azou · Answer

You should not need to use !important for all your override.

This must be because your stylesheet is loaded before the app stylesheet.

One way is to put your stylesheet in index.html as documented at GitHub - Esri/map-tour-storytelling-template-js: The Story Map Tour is ideal when you want to present a linear, place-ba…

Or you can use the loadCSS function after that point GitHub - Esri/map-tour-storytelling-template-js: The Story Map Tour is ideal when you want to present a linear, place-ba…

I don't recommend unminifying the CSS, if you want to edit the source code of the application, follow the following guide GitHub - Esri/map-tour-storytelling-template-js: The Story Map Tour is ideal when you want to present a linear, place-ba…  but I like better doing override in index.html or separate CSS, it makes it easier to upgrade the application