Customize the WP-Members™ stylesheet

WP-Members™ is designed to work out-of-the-box, yet be extensible and customizable.  The layout of the forms and dialog messages are a good example, with the ability to easily define a custom stylesheet in the plugin options. 

I don’t recommend making edits to the core files, and the included CSS is no different.  But you can use the included CSS as an easy base to begin from.  Here are some steps to follow so that you can easily set up a custom CSS file for your installation and be able to edit it in the WP Theme Editor:

  1. Copy the included default stylesheet /css/wp-members.css.
  2. Save it to your theme folder.
  3. In the plugin options specify this location for Custom CSS:

    http://mydomain.com/wp-content/themes/mytheme/wp-members.css

    (Don’t copy/paste – you’ll need to specify the correct path for your domain/theme)

  4. Open the theme editor (Appearance > Editor) and look for wp-members.css in the list.
  5. Make any edits/changes you need.  Click “Update File” when you are done.

Now you can edit the CSS for WP-Members, save your changes, and not have to worry about overwriting your customizations when you upgrade the plugin.  (Be sure to maintain a backup copy of your changes though, just in case something would go wrong with your site somewhere else.)

Comments

  1. Ed says

    Hi Chad!
    I think your plugin is fantastic, it does exactly what I want, but I have run into a problem.
    On the members area, when viewing members info or resetting the password, the table holding the data becomes jumbled up. This also happens when prompted to login via a login page. You can see what I mean here: http://www.cymrucaretraining.com/e-learning-zone/candidate-info/
    I am not really sure how to resolve this issue – is it a code problem or a css problem and where do I go to put this right?
    Any help would be much appreciated. Many thanks,
    Ed

    • Chad says

      That could be fixed with CSS. In fact, you probably should consider customizing the forms if you know CSS. The default forms are really intended as an example to show what can be done, but customizing will make them look more fully integrated. There is info on that in the post above.

      A quick fix for what you described actually requires a filter to add a clear div (which I am considering adding to the forms in a future release). Add this to your functions.php file for the easy way out:

      add_filter( 'wpmem_register_form', 'register_clear_div' );
      function register_clear_div( $form ) {
      	$form = str_replace( '</div><label', '</div><div class="clear"></div><label', $form );
      	return $form;
      }
      
      add_filter( 'wpmem_login_form', 'login_clear_div' );
      function login_clear_div( $form ) {
      	$form = str_replace( '<label for="password">', '<div class="clear"></div><label for="password">', $form );
      	return $form;
      }
      • Ed says

        Hi Chad,
        Thank you so much for your help. I’m a bit of a beginner with CSS although I will certainly be looking into customising the forms at some point in the future. For now though, your quick fix worked a treat and everything looks the way it should.
        Once again, thank you so much. I am now going to make a donation as you certainly deserve it for your brilliant plugin and excellent support.
        Cheers,
        Ed!

      • Tony says

        Hi Chad
        Thanks for the great plug-in. Its the best I have found.
        I think I have the same problem as above. When I view the registration form the boxes where the registration info is typed has dropped down one so they don’t line up. Is this the fix and if so for the complete newbe can you tell me exactly where I put this code as I cant seem to find the functions.php file. Many thanks.
        Tony.

  2. Jef Knight says

    Thanks for this.

    My “First Name*” box was pushed over to the right and so had no box to enter the actual name.
    This fixed it.

    Cheers

    • Darla Ottman says

      I had the exact same issue as Jef in IE, but not FF. This fixed mine as well.

      Thanks!

  3. Lack says

    Hi Chad,

    I’m trying to customize the registration page of my website by getting rid of the “New Users Registration” title box and also to place the “clear form” and “submit” buttons beside each other. Can you let me know where can I find the codes to modify the above? Thanks.

    • Chad says

      You can use the wpmem_register_heading filter for the heading (and you’ll probably want to use the wpmem_user_edit_heading for the user update page – it’s the same form). If the clear and submit buttons are not next to each other, then you have some CSS issues to work on which entails customizing the stylesheet (or for more advanced use, filtering elements of the form with wpmem_register_form).

      A list of filters is here: http://rocketgeek.com/plugins/wp-members/users-guide/filter-hooks/

  4. Lesley says

    Hey Chad

    Thank you so much for a fabulous plugin, and providing it free! That is totally awesome =)

    I’ve just got a quick question, I’ve installed it on a site I am working on here:

    http://bit.ly/QkHxuU

    As you can see it is breaking free from the page. I tried editing the table in the core document, but this didn’t seem to work, and probably not the best option. I just want to drop the textarea down under the label so it fits in the page.

    Thanks so much for your help, it’s so very much appreciated!

    • Chad says

      You are trying to fit a form that is 630 pixels wide into a content area that is 500 pixels wide.

      The plugin forms are all defined by CSS properties, so do not edit the core files to change it – that is quite bad for a number of reasons, the first and primary of which is that you would have to repeat the process when you update the plugin, and putting yourself in a situation that requires you do overlook updates can be bad for security if one of those updates corrects any type of security vulnerability.

      But I digress…

      You are posting this question on a post that gives you the answer, so my question is how much of it did you read and how much of it did you not understand? That sounds snarky, but I don’t intend it to be. My objective is to figure out what needs to be clarified so that people are able to read the support information that has been written for this plugin and then be able to act on it.

      (Also, for your situation, you might want to start with a completely blank stylesheet rather than using the default; in that case, just create a blank wp-members.css and use that in place of copying the default as outlined above.)

  5. Ed says

    Hi Chad
    Still loving your plugin – it just works!
    However, I wondered what the easiest way to create a line break was, between the
    ‘You are logged in as…’ and the ‘Click here to logout’
    lines when the login status is used as a widget?
    As it stands there is no space between these lines and they would just look better on the website with a space between them. Is this a stylesheet edit?
    Any chance you could let me know where to go to make a change to this and what I need to add?
    Many thanks.
    Ed!

  6. frans geerts says

    Hi Chad,
    Your pluging just does the job for our website (just in test). But there is still one problem, the input fields in the forms are always returning upper-case though I typed in lower-case. Can I tell you what I did wrong, cause in another website using your plugin eveything was OK!
    Many thanks.
    Frans

    • Chad says

      I don’t think I’d be able to troubleshoot that for you. There is nothing in the plugin that would set the case one way or the other, so whatever is causing this would be coming from outside the plugin.

      • frans geerts says

        You’re right, I already made a change in the .css of the WP theme … it’s OK now. Thanks for your concern anyway!