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.)

  • Ed

    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

    • http://butlerblog.com Chad

      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

        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!

        • http://butlerblog.com Chad

          Thanks Ed, glad that worked out for you.

      • http://www.fromproductstoservices.com Tony

        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.

  • http://www.futurecollegefund.com Desiree Shank

    Hi! I want to change the CSS of the Registration Form to match my site better. I’m not comfortable with CSS. Can you help me?

    • http://butlerblog.com Chad

      If you need custom work done for the plugin, send me a project scope via the contact form and I will get you a quote.

  • http://jefknight.com Jef Knight

    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

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

      Thanks!

  • Lack

    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.

    • http://butlerblog.com Chad

      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/

  • http://aliarts.co.nz Lesley

    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!

    • http://butlerblog.com Chad

      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.)

      • http://aliarts.co.nz Lesley

        My bad, I overlooked this solution because I was caught up in editing the table. Sorry to bother you.

  • http://www.elearningzone.cymrucaretraining.com Ed

    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!

  • http://www.sint-caecilia.nl/wp2012 frans geerts

    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

    • http://butlerblog.com Chad

      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

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