change button color
By Ferlin Mogot on Wednesday, 26 February 2014
Posted in Feature Requests (Not Supported)
Replies 5
Likes 0
Views 1.1K
Votes 0
Hello, I just changed register link to register button that linked to register page.
I change in modules/mod_easysocial_login/tmpl/default.php
Now, the register button is blue & I want to change to red.
I has added css code: (attached), in modules/mod_easysocial_login/styles/style.css
but not change.

You can check it here

can you help me?

Thanks
Hello Ferlin,

I just add .btn to your current css code:


body div.es-mod.mod-es-login .btn-es-register,

body div.es-mod.mod-es-login .btn-es-register:focus {

 color:#ffffff;

 text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);

 background-color:#C23D3D;

 background-image:-moz-linear-gradient(top, #FF0000, #C23D3D);

 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#FF0000), to(#C23D3D));

 background-image:-webkit-linear-gradient(top, #FF0000, #C23D3D);

 background-image:-o-linear-gradient(top, #FF0000, #C23D3D);

 background-image:linear-gradient(to bottom, #FF0000, #C23D3D);

 background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);

 border-color:#C23D3D #C23D3D #387038;

 border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

 *background-color:#C23D3D;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);

}


The part that I've changed is here:
Before:


body div.es-mod.mod-es-login .btn-es-register,

body div.es-mod.mod-es-login .btn-es-register:focus

After:


body div.es-mod.mod-es-login .btn.btn-es-register,

body div.es-mod.mod-es-login .btn.btn-es-register:focus


Hope this helps.
Nik Faris
·
Thursday, 27 February 2014 15:12
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Ferlin Mogot,

Sorry for late reply to this,
In my opinion, you should put your CSS customization code in your template CSS file for prevent when you update to next release version of EasySocial overridden your customization code. If you only want to change the register button color, you can apply this code in your template CSS file. 


.modal-es-register .btn-es-primary{

     background: #FF0000 !important;

}

Hope this help.
Arlex Wong
·
Wednesday, 26 February 2014 17:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello, I has added the code to templates/yoo_infinite/css/style.css, but not change.

Thanks
Ferlin Mogot
·
Thursday, 27 February 2014 10:46
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Ferlin,

I've changed it for you. Please have a look.
Nik Faris
·
Thursday, 27 February 2014 11:40
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Ferlin, I've changed it for you. Please have a look.

Thanks Nik. Btw, how to hack to be like that?

Thanks
Ferlin Mogot
·
Thursday, 27 February 2014 15:01
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post