New CSS Stylesheets included in WP-Members™

As many users know, the styles used in WP-Members™ can be customized and loaded in a separate stylesheet.  This post describes the process of setting that up and mapping the location of your custom stylesheet in the plugin option panel.  Starting with version 2.7.1, the plugin now includes some additional stylesheets that can be used as a framework to start your own custom stylesheet from, or you can use them as-is. 

2011 sidebar widget example

2011 stylesheet - sidebar widget

2011 stylesheet example - login and register forms

2011 stylesheet - login and register forms

The first is designed following the look of the Twenty Eleven default WordPress theme.  This gives the forms a little wider and larger look. Click on the screenshots to view an example of the sidebar widget and the login/register forms.

The second stems from a lot of requests that I get for sites that have a more narrow main content area.  Back when this plugin was first designed, Kubrick was the WordPress default theme.  So, I went back to that theme for this stylesheet option.  It has narrower forms and a smaller font size.

Kubrick stylesheet sidebar login widget example

Kubrick stylesheet sidebar widget

Kubrick stylesheet login and registration forms example

Kubrick stylesheet login and registration forms

To use either of these instead of the default stylesheet, you can put the path directly to them in the plugin settings as follows:

Twenty Eleven:

http://your_domain/wp-content/plugins/wp-members/css/wp-members-2011.css

Kubrick:

http://your_domain/wp-content/plugins/wp-members/css/wp-members-kubrick.css

Just like the default styles, you can use these stylesheets as a framework to customize so the forms fit seamlessly into your theme.  In fact, I encourage you to do so.  It will give your site a more polished and professional look.

If you use these stylesheets as-is, you can map directly to them in the plugin folder as indicated above.  However, if you customize them, it is important to store the customized stylesheet outside of the wp-members folder in your plugin directory as everything in that folder is overwritten when the plugin is upgraded.

  • http://www.thehumaninstinct.com Rob

    Great work Chad, really great.

    I have a problem though..I just installed the plugin and the labels and textareas on the login and registration forms are not aligned…the text areas are about 10px lower than the labels on the left.

    Some research has shown me that you may have addressed this is a previous release..but the issue is still there on my installation.

    Any suggestions?

    BTW I have linked to the 2011 CSS style sheet if that matters.

    Rob

    • http://butlerblog.com Chad

      Hi Rob – the stylesheets aren’t going to plug-and-play in every situation. In fact, it’s really intended that you customize them anyway.

      Here is some information that may help you with customizing the CSS: http://butlerblog.com/2011/07/25/customize-the-wp-members-stylesheet/

      You only need to specify the location of the custom stylesheet in the plugin settings. But, if you’re up to it, a more elegant way of loading a custom stylesheet is wp_enqueue_style:
      http://butlerblog.com/2012/02/20/loading-custom-stylesheets-with-wp_enqueue_style/

      There are three stylesheets included in the download – the default, and two others (since you are using the 2011 one, you already know this). This should give you a variety to start from. Ideally, you would create your own stylesheet to fully integrate with your theme, but these give you a good starting framework. However, due to the complexities of the 2011 styles, you might want to use the default stylesheet as your starting point.

      Lastly, when tracking down style issues, I highly recommend Firebug (getfirebug.com). It’s a free browser plugin and allows you to right-click and “inspect element” which will show you what properties are applied to a given element and where they are coming from (good for tracking down inherited properties from other stylesheets).

  • http://www.thehumaninstinct.com Rob

    Thanks for the fast reply Chad….I have switched between all three styles (the two new ones and the old) and the misalignment is happening on all three versions.

    I have seen another thread on your site here that shows others with the same issue…is there a patch or fix for this issue?

    (Firebugg is handy..but i wouldn’t know what to look for in terms of a CSS plugin issue.)

    I tried making the entire form wider but that didn’t change the alignment issue…any other suggestions?

    I am using a full width page so it should have no issues as far as i can tell.

    Rob

    • http://butlerblog.com Chad

      The problem doesn’t lie in the stylesheet by itself, but in how it relates (or doesn’t relate) to the other styled elements. Hence the suggestion to use Firebug. That gives you the ability to inspect various elements and it will tell you where the styles for a given element are coming from and what is inherited. That will make it easier to track down what you need to change (which may or may not be width related).

  • http://www.thehumaninstinct.com Rob

    Thanks Chad,

    I figured it out…your forms were inheriting the P tag css from my theme..so I fiddled with your 2011 CSS and got it to work.

    There is still the issue with the “remember me” checkbox being right on top of the Login button..but it isn’t a big deal so not too worried about it.

    Great work..thanks.

    • http://butlerblog.com Chad

      The checkbox issues is probably an inherited width for the html tag input. A checkbox is still an input tag, it this is the case in your theme (it would be inherited), you can add a definition for the ID #wpmem_reg for the input [type="checkbox"] and give it a narrower width.

      Just make sure you save your CSS externally and indicate that either in the plugin settings or with the enqueue process I indicated; otherwise, you’ll overwrite your customization when you upgrade the plugin.

  • http://www.thehumaninstinct.com Rob

    Okay..thanks Chad…things are working well now after some fiddling…

    One more issue and I have tried to find answer here but couldn’t…

    How do I remove the case-sensitivity of the ID and Password user info?

    The password generated in the welcome email has a complicated combination of upper, lower and symbols and I am afraid users will get frustrated.

    At a minimum..having something that clearly tells the users during registration and login that their info is case-sensitive would help.

    Any suggestions?

    Thanks…gonna get you a donation for all your hard work!

    Rob

    • http://butlerblog.com Chad

      A simpler password could be generated with a filter:

       
      /**
        * Override the WP random password generator
        */
      add_filter( 'random_password', 'my_random_password' ); 
      function my_random_password() 
      { 
      	$chars = 'abcdefghijklmnopqrstuvwxyz0123456789'; 
       	$password = ''; 
      	for( $i = 0; $i < 8; $i++ ) 
      		$password .= substr( $chars, wp_rand( 0, strlen( $chars ) - 1 ), 1 ); 
      		return $password; 
      }