Apply CSS Styling to Pro Login Widget

I’m using the Pro Login Widget on my wordpress page but my page is full width and the login fields stretch across the content area. I’m displaying the widget using the following php code:

Here is my url to my page: http://jsc.seozones1.com/apply/

I want to apply css to the form (and fields) so that the fields (and Submit button) don’t stretch across like it’s doing. What would I need to do to fix it and also tuck the form under the text on the left side. I also don’t want to use tables but divs and css techniques.

Any help is greatly appreciated, thanks.

• This topic was modified 4 years, 4 months ago by  Eduan. Reason: Moved to the customer support forums

I figured it out, thanks.

Hello Mike,

Glad you were able to solve your problem. :) Also, thanks for the update.

If you don’t mind, what fix did you apply for this?

I just added width:250px; to the div style tag, so…

Oh OK, thanks! I’m sure this will help other site owners. ;)

How would make changes to the styling on the button and form fields in css? I tried the following to my theme css file but it doesn’t work:

div.ws-plugin–s2member-pro-login-widget {
background: #FF0000;
}

• This reply was modified 4 years, 4 months ago by  Mike Waller.

You have to use the selectors for those. For example, the submit button’s I think would be:

[hilite pre_code]
.ws-plugin--s2member-pro-login-widget-submit input {background-color: red;}
[/hilite]

Okay, this worked on that:

div.ws-plugin–s2member-pro-login-widget-submit input {
background-color: #734C29;
color: #F0D7C6;
border-color: #deba9d;
}

However, how would I change the color on the title Login? on this page: http://jsc.seozones1.com/apply/

Hi !

I have the same problem but I can’t wind where to insert the code ” width:250px”

Can you help me please ? I am launching my website on monday :/

Thank You !!

Have a nice day,

Sarah

Hello Sarah,

You would add that to the style attribute that the button would have. I suggest you learn a little bit about CSS so you can achieve this correctly: http://w3schools.com/css/default.asp

Hope this helps. :)