eMember: How do I change the 'Login' button & username and pass box colors?

[theoshealth]

Currently the default ‘Login’ button is blue and the user/password boxes are white on top and grey on the bottom. How do I customize their colors, to match my site? Thank you in advance for your response.

[Peter]

To change the login button colors open the eMember_style.css file and look for the following code:

input.eMember_button{

background-color: #4D90FE !important;

background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);

border: 1px solid #3079ED;

color: #FFFFFF !important;

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

font-size: 14px !important;

font-family: arial;

font-weight:bold;

text-decoration: none;

vertical-align: middle;

cursor:pointer;

padding: 3px 30px 3px 30px !important;

margin:5px 0px;

width:auto !important;

}

Firstly delete the following line:

background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);

Then set the colors for your button by modifying the color codes in the lines beginning with “background-color” and “color”. (the first sets background color and the second sets the text color of the button)

For the input boxes, sometimes your theme will set the styling for these. However you

can also modify these values by looking for the following code and adjusting whatever you want:

.eMember_text_input { font-size: 1.3em; height:auto; color: #444; background: #eee; border: 1px solid #aaa; border-right-color: #ddd; border-bottom-color: #ddd; width: 85% !important; padding:4px !important;}

Note: you may need to use the “!important” keyword if your theme tries to override this.

[theoshealth]

Many thanks.

[mgroffy]

I have an interesting hurdle. I changed the color of the login button, but for the life of me can’t figure out how to change the hover appearance. The color of the button is dark blue with white text, but when I hover I get a white box with white text.

Any hints?

[Peter]

@mgroffy – please post a link to your page so we can take a look with firebug.

[mgroffy]

[www.iaff2099.org/]

[admin]

I just checked the link you shared and looks like the hover is working correctly.

[jkd]

It seems all the css button settings for eMember are set with !important. This makes it intensive to override them in our child-themes.

Question: Wouldn’t it be better if the eMember css file didn’t specify !important on all those settings?

That way, we could override only the settings that need changing in our child theme’s style sheet and not have to worry about future upgrades changing the files back again.

[admin]

We prefer not to use !important but we found that too many users use themes that are not nicely coded. These themes tend to mess up the widget of the login widget and eventually the customers blame us. This is why we have coded it so our widget look the way we show in our demo regardless of whatever coding mistakes you may have in your theme (this is the goal but it is very challenging to achieve it 100%).

eMember has a custom style sheet file (css/eMember_custom_style.css) that is loaded after the core eMember css file. So you can apply your CSS customization tweaks in this custom file to override any changes.

[jkd]

Yeah, I kinda figured that was the reason for the !important settings.

Regarding the custom style sheet…. if the plugin is upgraded using the instructions to disable, delete, reinstall the new version, wouldn’t that include the removal of the custom style sheet as well? Or maybe I don’t fully understand/appreciate the value of having that custom style sheet?

[Peter]

if the plugin is upgraded using the instructions to disable, delete, reinstall the new version, wouldn’t that include the removal of the custom style sheet as well?

Yes that’s right. It is up to you to keep a copy of the custom stylesheet file on your computer or somewhere else and simply copy this file over after you have upgraded the plugin.

The value of the custom style sheet is that you are not modifying the main CSS code of the plugin. If you stuff things up you can simply delete the contents of custom stylesheet file and things will go back to default settings. Also, we never add any code to the custom stylesheet. So you always have full control of that file (This way you do not need to worry about which lines of CSS code we may have modified).

[Cervellotto]

Hi, I’m Sandra and I’m trying to customize the background user / password boxes. I pased code in the first page in the eMember_custom_style.css but when I update the page of my blog, this new color will appear for a second and then returns to the default color. I also added the word !Important but the color remains the same. How can I do?

[Cervellotto]

I discovered that there was a change, but not in the login widget, but in the user profile fields.

Someone can tell me how do I change the background color of the widget’s login?

[admin]

Please post a link to the page where you have the login widget so we can see it in our browser.

[Cervellotto]

[http://cervellotto.net/]

I noticed that on the internet explorer I see the new color, but on google chrome no. why?

If it is possibile I would like to change color of box ok widget. Is it possibile to insert a gradient grey, because at the momento is white and I don’t like.

If it is possibile what is the code to do it.

Thanks a lot

Sandra

[Author]

Posts