• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4010
  • Last Modified:

Add CSS Styling to s2member Pro Login Widget

I'm using the s2member 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: <?php echo s2member_pro_login_widget(); ?>

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.
  • 2
1 Solution
Ray PaseurCommented:
Might want to check this...

Here is the generated HTML (I added spacing for clarity).  The top div statement here is line 130 in the generated HTML.  You might try adding an explicit width to that style statement (perhaps try 400px for starters).

<div style="padding-top:16px;">

<h3>Membership Login</h3>

<div class="ws-plugin--s2member-pro-login-widget">
<form method="post" action="http://jsc.seozones1.com/wp-login.php" class="ws-plugin--s2member-pro-login-widget-form">

<div class="ws-plugin--s2member-pro-login-widget-username">
<label for="ws-plugin--s2member-pro-login-widget-username">Username:</label><br />
<input type="text" name="log" id="ws-plugin--s2member-pro-login-widget-username" title="Username" />

<div class="ws-plugin--s2member-pro-login-widget-password">
<label for="ws-plugin--s2member-pro-login-widget-password">Password:</label><br />
<input type="password" name="pwd" id="ws-plugin--s2member-pro-login-widget-password" title="Password" />

<div class="ws-plugin--s2member-pro-login-widget-lost-password">
<a href="http://jsc.seozones1.com/apply/" tabindex="-1">signup now</a> | <a href="http://jsc.seozones1.com/wp-login.php?action=lostpassword" tabindex="-1">forgot password?</a>

<div class="ws-plugin--s2member-pro-login-widget-remember-me">
<label><input type="checkbox" name="rememberme" value="forever" />Remember Me</label>

<div class="ws-plugin--s2member-pro-login-widget-submit">
<input type="submit" value="Log Me In" />


<div class="ws-plugin--s2member-pro-login-widget-code">
<div style="clear:both;"></div>

Open in new window

COwebmasterAuthor Commented:
good point.  Thanks Ray.
Ray PaseurCommented:
Thanks for the points! ~Ray

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now