By MD King on Wednesday, 18 February 2015
Posted in General Issues
Replies 8
Likes 0
Views 680
Votes 0
I need to change the "blue" of the login button - completely clashes with my site...

I have tried using my custom.css file - Gets overwritten
I have tried using a template override /$template/html/com_easysocial/styles/min.style.css

But the button is still blue! Any help appreciated.
Hello MD King.

Can you provide us a picture with more details about this issue, your backend and FTP access so we can check on this issue directly?
·
Wednesday, 18 February 2015 15:58
·
0 Likes
·
0 Votes
·
0 Comments
·
Picture below:


The site is on a dev server and no ftp access.
·
Thursday, 19 February 2015 04:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

I am really sorry for the delay of this reply as it is actually a public day off for us here. Generally, all blue buttons uses the class of btn-es-primary . What you can do is to override this class,


body div#fd .btn-es-register {
background: #000 !important;
}
·
Friday, 20 February 2015 18:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Already doing that - and it works on the "welcome" login.
But any other time still blue -- Here are the development (firebug) screenshots:


And the Custom.CSS is being loaded - just overriden somehow:


The site is now live, so login provided - No FTP layer - Tools installed for that.
Mike
·
Saturday, 21 February 2015 06:36
·
0 Likes
·
0 Votes
·
0 Comments
·
You need to use a more specific css selectors because the css properties already has an !important attribute. For instance, the login button on your home page could be modified using the selectors below,


body div#fd.es .es-form-login .btn-es-primary, body div#fd.es .es-form-login .btn-es-primary:focus {
background-color: #810d05 !important;
border-color: #454545 !important;
color: #fff !important;
}


This is a basic css rule where the more specific your selectors are, the higher precedence it is.
·
Sunday, 22 February 2015 16:37
·
0 Likes
·
0 Votes
·
0 Comments
·
Your premise works, but not as an override --
Corrected my CSS & added your code as well - Button still the same.
Edited $joomla/components/com_easysocial/themes/wireframe/styles/style.min.css

Removed the !important statements in the ES CSS file (my style is more important than the default style)
Works.
·
Monday, 23 February 2015 07:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for updating, glad that your issues are resolved now
·
Monday, 23 February 2015 11:52
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello MD King.

Did you resolve your issue?
·
Monday, 23 February 2015 11:55
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post