override CSS style that is with an "!important" in compiled
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
So I have this RokSprocket Strips module on my website, what I want to do is simply changing the navigation arrows' styles. When I try to change their mouse-over styles, I found thisin file master-35e1b245b950d5fb57ca9a505e40d8e0.css, It seems to me there is no way to override this in [templatename]-custom.css file, I have tried add many selectors and !important to the style as well but none worked. Do I have to modify the compiled CSS file?
.sprocket-strips .arrow:hover{background: #71C2A1 !important;}
And since I'm already asking this, it is a good time for me to finally understand how this compiled CSS file works. I have got several questions which I still need explanations after I read those articles about LESS:
1)I think I was once told that to modify the compiled CSS file is not good, cause the system will automatically re-generate the compiled CSS files based on LESS and CSS files, which will obsolete my change. Is that true? Cause I did try to make some direct modifcation to the compiled CSS files and it has been a few months things still look good.
2)In the template setting page, there is a section called "less compiler", does it indicate the compiling system only work with LESS files? and how does the options in this section work?
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
You've been lucky if your changes have remained. As soon as any ONE file in the list of files the compiler uses gets changed a new master-553bj5b3kk3.css is generated and all your changes are LOST.
Please see the section www.gantry-framework.org/documentation/j...-less-files-compiled ? for a better understanding on compiled files.
As for the the "!important" attribute a second one for the same CSS statement won't overwrite the original. The way to get around it is to specify your code a little differently so your statement is more specific thus having the highest priority.
Try this:
In your rt_templatename-custom.css <-{Click the LINK} file add this:.sprocket-strips-nav .sprocket-strips-arrows .arrow:hover { background: #FF0000; }
-
Time to create page: 0.040 seconds