Can't customize slideshow item color in custom.css

kiranshah

Hi,
I'm having trouble customizing the slideshow item color using custom.css in JA Company. I added the following code to custom.css:

.slideshow .slider-content-inner .item-desc {
color: red;
}

My style appears to be loading, but it seems it is not being applied because it is overridden by a style rule being subsequently loaded from a ThemeMagic style file (templates/ja_company/local/acm/slideshow/css/themes/capitallink/style.css).

How should I customize the style, if not in custom.css?

Ninja

kiranshah
Hi
You can try this code

.slideshow .slider-content-inner .item-desc {
color: red!important;
}

I need the site url too see the code is applied correctly. If its not working please share the site URL Here.

Regards

kiranshah

Thank you, that worked.

But...shouldn't have to use that directive! Seems like a bit of a design flaw with the template.

But thank you.

teitbite

kiranshah Hi actually no. It's a matter of CSS selector. You can use a higher priority selector including a layer above it, so the important rule won't be needed:

.t3-slideshow .slideshow .slider-content-inner .item-desc {
color: red;
}

What makes it neccessary to use "important" is an order of css files which in this case is a module's css file being loaded after template's files.

kiranshah

Right, that's why I think it's a design flaw. Using the JA Company template with the ACM module, one has to use this override for the selector due to the order of the css files being loaded. It'd probably be better if this particular attribute (the text color of the slideshow text!) would be parameterized.

Ninja

kiranshah
The custom.css file is used to override the changes, it depends on how the code is been used to override, Like if you use less no. of classes it apply on the other pages or section as well if same class has been used.
If you will get any issue in future you can let us know on forum so we will get it fixed for you.

Regards