how to tweak membership login widget?

[cote289]

Hello

I'm setting up my site at www.trulysimpletech.com and I'd like some help/advice on how to tweak the membership login widget?

currently it takes up 100% of the sidebar and looks bad

what code do i need to add to have some padding or margin so its not at 100% and looks a little cleaner?

see screenshots:
http://awesomescreenshot.com/093dskd20
http://awesomescreenshot.com/0e8dskead

I've tried tweaking the code in s2-member-pro.css but its not quite working as expected.

any help is greatly appreciated

thanks for the great plugin

Ben

[Cristián Lávaque]

The widget container has an ID, as do all the divs inside it. Did you try using them as selectors?

[cote289]

i'm not sure what you mean by selectors.

I'm still fairly new to CSS and that type of code, but am learning quick.

thanks

Ben

[sgtcory]

Cristian is referring to the selector for the division that holds the login form :

Code: Select all

<div class="ws-plugin--s2member-pro-login-widget">

So the class here is : ws-plugin--s2member-pro-login-widget

So you would want to add something like this to your CSS :

Code: Select all

.ws-plugin--s2member-pro-login-widget {padding: 20px;}

Where you add this is up to you, but if your theme supports custom css in the admin section, then you can paste that there. If not, you can put this is the very bottom of your style.css or another css file that your theme uses.

[Cristián Lávaque]

Thanks for your help, sgtcory.

i'm not sure what you mean by selectors.

No problem, it's good that you want to learn.

This tutorial may help you with that http://css.maxdesign.com.au/selectutorial/

Here's more documentation on them http://www.w3.org/TR/CSS2/selector.html

Selectors are what you use to select what you'll style. The Pro Login Widget has a lot of IDs defined that you can use to style those parts specifically.