Docker CSS confusing me
By Sabih on Monday, 05 December 2016
Posted in General Issues
Likes 0
Views 102
Votes 0
Hey there,

I have some strange behaviour of the docker plugin relating to CSS modifications. In my custom.css I have the following code:



#es .btn-es-primary {

   color: #fff !important;

   background-image: none !important;

   background-color: #5BAB23;

   border: none !important;

}


It is working but not on every page. On some pages my CSS seems to be ignored and I just can not find out why. You can see it on my "DEVSITE/component/users/?view=login". (see credentials) There it is ignored though on DEVSITE/forum the correct CSS is used as you might see the login button is green instead of the default colorization.
It's probably not specific enough and you lost to the style.min.css. Some of the css attributes on EasySocial (especially buttons) are given highest priority by using !important to avoid template clubs from resetting button styles.

To be able to alter this, you could add a more specific css selector (To give it a higher precedence).

[gist]
body #es .btn-es-primary {
color: #fff !important;
background-image: none !important;
background-color: #5BAB23;
border: none !important;
}
[/gist]

This is not a bug in EasySocial and neither it is a flaw. This is how css works. In fact, this is why it is called css (cascading style sheet). To solve your curiosity, check out https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Sources
Mark
·
Monday, 05 December 2016 21:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

thank you for your help and your link. Now it is working and I have learned something new.
Sabih
·
Tuesday, 06 December 2016 21:43
·
0 Likes
·
0 Votes
·
0 Comments
·
You are most welcome Everyone is learning something new every day which is great because then you guys could help one another
Mark
·
Tuesday, 06 December 2016 23:03
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post