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 stylesheet - sidebar widget

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 widget

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.