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

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

Get Fresh Content Delivered

Join and get free content delivered automatically each time we publish.

Comments

    • says

      No problem Mansuur – I keep trying to make the plugin as easy to integrate as possible. I get most ideas like this when I have a lot of email requests for similar support issues.

  1. Brenda says

    Hi Chad,

    I must be doing something wrong! I have created a new .css file and it appears under Appearance/Editor. Yours (the original) is still under WP-Members/Edit.

    My problem is that my new .css file is not overriding the original.

    What am I missing please?

    Thank you

    • says

      Hi Brenda – did you specify the location of the new stylesheet in the plugin options (full path as shown above)?

  2. says

    I’ve installed the login widget on my home page successfully. I’m wondering why I get both the sidebar widget and the default login?

    I’d prefer that only the widget shows on my main page.

    • says

      The WP-Members widget does not have any control over any other widgets or anything else you might have on your sidebar. Sounds like you have the default Meta widget on your sidebar as well (although, depending on your theme, it could be something else as well). Take a look, and if you have a widget called “meta,” that contains the default login. Otherwise, you’ll need to examine what other possible widgets you have.

  3. says

    Hi Chad —

    First off, thank you for the awesome plug-in!

    I’m having a bit of a problem, and without asking you or anyone to parse my code, would you be able to tell me generally what I’m doing wrong here? Essentially the WP-Members code seems to “break” my layout. I’m doing this small e-commerce site, http://www.afrikconnect.com, and I created the css and html so that he main content on each page is surrounded by an ever-expanding white box with a rounded-corner border (depending on the amount of content). Example here: http://afrikconnect.com/services/voip/

    So the problem is that when I put in the wp-members code calls, it seems to not play nice with my css. Basically it puts the stuff in the exact same spot regardless, and it forces other content to wrap around it. And my nice content box DOESN’T wrap around it. I know that sounds confusing, but here’s the quick example: http://afrikconnect.com/solutions/reseller-registration/

    When I look at the html, I see that your program has creates a div called wpmem_reg, but then for some reason it no longer allows my general content (the headline and the initial paragraph) to be before the stuff from the WP-Members div. I assume I there is some quick and easy CSS fix, but my brain power is failing me on this one… any idea what I can do to get this working right? Thanks again for the awesome plugin…

    • says

      Hi Richard – thanks for the kind words on the plugin. I hope you can get it integrated ok.

      Worst case scenario, you might have to make some code modification in the plugin (not really a good idea because you’d need to re-hack in the event of an upgrade) and put in some type of shim (like a transparent gif) to stretch the page wrap.

      I’m not sure how it might work, but you might be able to force the page height with CSS in some way either within your theme CSS or customizing the plugin CSS. Regardless, you are going to need to work on some custom CSS for the forms to get them to look well integrated with your site.

      You might also try the legacy forms (table-based). This is in the plugin settings. Try those and see if they work better. They aren’t as flexible CSS-wise, but they do have some div wrappers so you can style them.

      Hope that gives you some ideas/help.

      • says

        Hi Chad —

        Yay! The legacy forms thing solved 80% of it; I’m not sure why, but the my headlines and text are still showing up below the forms… but that’s something I can probably figure out. It’s pretty clear your CSS and my CSS weren’t playing nice and I definitely think I’ll tweak mine before messing with yours…

        But for right now it’s working great and I appreciate the help and the valuable plugin!

  4. john culpepper says

    I created some custom fields but the TOS didn’t shift down when I activated them. What is the control to make this happen? I can put a modified style in my theme to control this and insulate me from updates.

    • says

      You can drag-and-drop the fields into the order you want in the Field Management panel. New fields are always added to the end of the array, so once you have added any new fields, you’ll need to drag-and-drop them to the order you want them to show to the user on the front end.

  5. says

    Hello Chad,

    Thank you so much for providing this plugin! So far so good!

    I do have a question about customization, and this is from a total CSS newbie: I’ve got the wp-members.CSS open in the editor and I’m trying to locate the width controls for the input text boxes… They’re a bit narrow for my taste, but I’m not seeing where to modify them. What am I missing?

    Thanks so much for any help you can provide here…

    Best,
    Christine

    P.S. can’t seem to find the controls for the label font sizes either?

    • says

      There is not a specific property in the default css file for the input. But you can define on by using #wpmem_reg input{ …properties here… } and/or #wpmem_login input{ …properties here… }

      The label font size you are probably looking right over… it is set at 115% of the inherited font size. You can change this as a %, px, em, etc.

      • says

        Thanks Chad! That’ll help!

        I’ll do my best not to beleaguer you with questions… but I do have another? I’m testing this increasingly awesome plugin (!) (will be donating soon!), and I’m curious about how to get the registration emails not to read from “WordPress”, but rather from me. Is this a silly question? Am I missing something obvious? Sorry if I am… I’m rather new to this whole WordPress planet as you can probably surmise.

        Thanks again!

        P.S. Should I be posting this question in another area?

  6. says

    Hello Chad!

    Once again, thank you for your cool plugin! Once I start having members and requiring their logging in, I’m sure I’ll be so ecstatic that I’ll be happy to donate. Still trying to work it all out at the moment.

    Please excuse my total newbie status… I’ve installed the wp-members.css and it does appear to be working, however, I’ve got a border around my forms and I can’t seem to locate where it’s coming from? Can you take a look and let me know where I should start digging? http://luminanceastrology.com/members-area/

    I used your wp-members.css exactly as is, unaltered.

    Thanks a bunch!
    Christine

    • says

      Christine – thanks for the comments. I took a look at your site and I’m not sure what you did, but your site is not loading the plugin’s stylesheet so you are not actually using “wp-members.css exactly as is, unaltered.”

      If you are going to use the included css without changes, you actually don’t need to do anything – if you set the location of the stylesheet in the plugin’s options, take it out and the default stylesheet should will load automatically. Alternatively, if you specify a location for the stylesheet in the plugin settings, you need to make sure that it is actually in that location.

  7. Kasper says

    Dear Chad,

    Thanks again for providing this plugin and all the help and faq’s about it.
    Unfortunately I’ve ran into this rather strange error:

    Doing the above, creating a wp-members.css copy in my childtheme, redirecting the plugin there. I happily started modifying the .css from the wordpress editor for the file in the childtheme.

    After the first change I figured lets check if it’s working: Success the background color changed, so I went on and decided to remove the dotted border by specifying border: none; (instead of the border: 1px dotted colorthingy;) saved it again, didn’t work. tried border: 0px; … didn’t work. tried changing the background color of another part, didn’t work.

    Somehow after the first succesfull edit of the CSS file, no other changes seem to work and save correctly anymore.

    I also tried restarting my browser as to empty the cache, but no changes unfortunately.

    Any help would be greatly appreciated !

    Cheers,

    Kasper

    • says

      If the first change you made was reflected, then you have it set up right. There may be some caching issues that are preventing you from seeing the additional changes – rather than exit your browswer, I would suggest a couple of browser tools more geared towards development. If you are using Firefox or Chrome, you can get Chris Pederick’s Web Developer Toolbar. This allows you to do a lot of things, but most specifically allows you to reload the CSS directly (i.e. when you’ve made a change). Also, I would recommend Firebug. This is indispensable for CSS as it allows you to right click and “inspect element” which will show you all of the CSS properties effecting a specific element. That way you can see what’s inherited from other stylesheets (many times, my answer for the changes you didn’t see take effect would be that these were inherited properties from other stylesheets – although I don’t suspect that’s the case with the dashed border).

      Also, if you are using a caching plugin in WordPress, it would be highly recommended to turn it off while you are working on this.

      • Kasper says

        Sorry for the late reply, some things got in the way of working on my website.

        However your help certainly boosted me along again. I indeed forgot about my caching plugin I had installed. Removed it completely and all worked as intended. When I’m finished I’ll just reinstall the plugin.

        Actually ashamed of myself that I didn’t notice it in my firebug window, it clearly said it got the css out of the folder of the caching plugin.

        Thanks again and sorry for my lazy eye there ;)

  8. says

    Hi Chad,

    Your plug-in is really great but I’m having an issue with the formatting on my login page. The “Forgot password? Click here to reset” and “New User? Click here to register” is blocking my login button.

    • says

      There was a fix in 2.6.4 to prevent wpautop/wptexturize from putting a line break in that was pushing down the login button. In the just released 2.6.5, this was expanded to wrap the entire form. If that does not correct the issue, let me know.

      • Marco says

        I have version 2.7 and have the same issue (with TwentyTen): the links are covering the login button.
        I switched to legacy forms (table) and it works.
        The layout however has too much space vertically between the fields: how can I control the table layout? I wish to use the CSS but this issue (see above) is forcing me to work with the tables.

        I really plan to use your plugin and donate (I love that you made translation easy and I want to contribute) however I have a few issues that I don’t know how to fix. (I will write them in another comment).

        • Marco says

          I finished reading the manual and FAQ and worked out all the issues I have. It seems a very well done plugin and I will proceed with the translation (Italian). And the donation.

          I have purchased another membership plugin that doesn’t let me customize things as much as WP-Members and I had to look for another solution and it seems that I found it in your plugin.

          I restate my request and make another one:

          1) How to customize the appearance of the forms made manged with the legacy version (CSS seems not to work on my TwentyTen)?

          2) How can I integrate WP-Members with Aweber registration? That would be a huge feature. Alternatively how to email all the registered users? (maybe there is a WP plugin for that… I will investigate). But integration with an autoresponder would be a hit.

        • says

          Thanks for your comments Marco. With the introduction of the wautop override that was implemented in the plugin, 99% of these issues with the login button being covered are the result of a property being inherited from some other stylesheet (most likely your theme).

          If you have a stylesheet that specifies a width property for the html input tag, it will likely cause the checkbox (which is part of the html input tag) to be overly wide and push everything lower. More properly designed CSS would be more specific, such as:

          input[type="text"] { width: 200px; }

          Otherwise, the property would effect all input tags, including checkboxes.

          But that brings us to the point: the included CSS is intended more as a guide to what you *can* do to integrate it with your theme. I know that people use it “as-is” and that’s fine, too – I’m glad they like it enough to use it that way. But with the number of vastly different themes out there, I much preferred designing this plugin’s output to be as flexible as possible so that users could customize the output without customizing the plugin (customizing plugin code means you need to redo when you upgrade, and we don’t want to do that).

          So… in cases like these (and like Fay’s below), it is usually a simple matter of tracking down what properties are being inherited from other stylesheets and setting a property to override that. This can be accomplished in either a WP-Members custom stylesheet using the above instructions, or in your theme’s stylesheet – it doesn’t matter which.

          To track these kind of things down, I highly recommend using FireBug. It is a browser add-on that allows, among other things, to inspect a given element by right clicking and it will show you all the CSS properties assigned to that element and where they are located. (getfirebug.com)

          In this case, if it is the remember me checkbox having a width property associated with it, you just need a property to specify the width of the checkbox to make it smaller like this:

          #wpmem_reg input[type="checkbox"] { width: 20px;; }

          I would really recommend you take another look at using the CSS forms as they are FAR more flexible than the old forms. Also the legacy forms are just that, a legacy of old code from much earlier versions of the plugin (this plugin has been around since WP FIRST introduced the plugin API six or so years ago). The legacy forms had been slated to be deprecated from the plugin in version 2.8 (although they may hang on one more cycle), so I wouldn’t rely on them if you can avoid it.

          It is my hope to replace them with more flexible hooks that will allow users to create their own custom forms – at least that’s my plan for now.

          Speaking of hooks, this brings us to your next question/request. In the new 2.7.1 version, which is presently available in a public beta release, there are some new hooks for users to make things a little more flexible. At present these are somewhat “experimental” in nature – meaning that where they are and the naming convention I used are subject to some change before documenting them fully as an available feature (we did this with the pluggable functions feature where it was available several versions ahead of being considered fully implemented).

          Anyway, while there isn’t anything for you to hook into Aweber at this time, there will likely be in the future. The current hooks are filters for various text that is output (such as the links of the login page and register page if the user is logged in), and actions for things like redirect after login or registration. There will be documentation on these forthcoming when this becomes a full release. I am already working out code for adding some action hooks in the registration process, although these won’t make it into 2.7.1, but that is what will give users the ability to hook into Aweber, ConstantContact, MailChimp, and things like that.

          As far as building in a separate email list feature, it’s not really in the plan. There are already plugins that do that, and most users that use this on a professional level use something like the two mentioned above anyway, so the effort required to create it wouldn’t really be worth it. And the risk would be making the plugin too bulky for something that isn’t really needed.

  9. Fay says

    I would like to change the width of the boxes displayed on the register page, both before and after a person registers as they conflict with the sidebar widgets I have. How can I most easily accomplish this. I am only so familiar with wordpress. Thank you!

    • Fay says

      Also, the “remember me” text, “login” button, “clear form” buttons, etc. are also not in the proper alignment. Thank you.

      • says

        That would have to do with the width. To adjust the width of the form, you’ll need to make adjustments to the CSS specifications for the fieldset (the total width) and also the various elements.

        • Fay says

          Thanks for the speedy reply. I made various modifications and was able to get the field boxes under control (by making them slightly less wide), but not the remember me text or the login, clear form or submit button. Can you please more specific as to what needs to be changed to accommodate this? Thank you.

          • says

            That actually sounds like a problem with the plugin. WP has a function that puts line breaks into the content before it sends it to the browser. WP-Members has a filter that turns that off for the forms. However, depending on other plugins, and when that filter is fired, it is possible that WP is putting a line break in that shouldn’t be there. That’s what I suspect, anyway. View the generated source of a page that is exhibiting this behavior, save it as a text file, then contact me via the contact form and I’ll give you an email address to send it to. We’ll go from there.

  10. says

    hello

    I love your plugin and will donate soon but i need help. i need to change the color of the confurmation box my subscribers see after they subscribe. my website is black and white so the message is hard to read. i’m a novice so please instruct step by step. thanks so much!

    • says

      You are on the right page – follow the instructions above to customize the styles. Any styles that are not specified in the stylesheet are inherited from your other style definitions, so if you may need to specify a property for color of the various elements.

  11. Ezekiel says

    Hi Chad thanks again for your strong work.

    I changed all the width in the wp-members css file to 200px but it did not change any of my width problems in terms of the registration form overlapping into the sidebar widget and also I noticed that the First Name input box is missing. Any ideas?

    Thanks

  12. Ezekiel says

    I ended up using the legacy forms instead and that fixed my width problems. Is there a downside to not using the css based form?

    • says

      Yes, the downside is that the legacy forms are scheduled to be deprecated in 2.8. If you are using them, you won’t be able to upgrade.

      In your original post, you said you changed “all” the widths to 200px, but I suspect you didn’t mean “all.” And that wouldn’t necessarily change things because there is a width to the entire fieldset and there are widths to various elements. Also there are margins and padding to consider.

      If you have a narrower content area, I would suggest starting with the wp-members-kubrick stylesheet that is included in the download. That might be a better place to start.

      Also, make sure you are following the process described here for customizing the stylesheet, otherwise you’ll just overwrite your changes when you upgrade.

  13. Ezekiel says

    Here’s the edited kubrick stylesheet I made it 200px width for the input boxes

    … code removed by admin …

    • says

      Dude – there is NO need to post an entire stylesheet in the comments.

      What you have here is very random. I think you need to take a look at what you have and what each of the elements you’ve made changes to are supposed to be doing.

      In this stylesheet, you have simply made everything 200px wide. The problem is, one of those definitions is for the width allotted for the entire form. So you have an area 200 pixels wide and you are trying to put a label 200 pixels wide next to an input area that is 200 pixels wide. That adds up to 400 pixels of width that needs to fit into an area you’ve set at 200 pixels. (And that doesn’t include the padding and margins that have to be considered.) That’s not gonna work.

      The kubrick changes you made are similar, except here you are jamming 345 pixels of width (not including padding and margins) into 300 pixels. BUT… Did you try starting with the kubrick style as-is first? As is, the forms are only 452 pixels wide, and your theme’s #content div is 540 pixels. To me, it would be better to use that one as-is for a starting point.

    • says

      Hi Marko – when posting a comment on a specific post, please keep things on topic – this question doesn’t involve the WP-Members stylesheet. Secondly, I am unfamiliar with the group plugin so unless you have specific questions, I don’t really know what to tell you.

    • says

      That’s likely caused by some inherited CSS properties. You probably will need to make some additional style definitions to override it.

    • says

      That depends – if you are using a theme directly, then yes. If you follow WordPress best practices such as using a child theme for your customizations, and you update the parent theme, then no. Also, you don’t necessarily have to keep this in the theme folder either. It can go anywhere as long as you have the proper location in the plugin settings.

  14. says

    Hello,

    Great plug-in, very happy with the functionality. I’m having two problems (that are probably the same thing), and can’t find the CSS to fix them. On the Register form, the “Clear Form” button takes up virtually all the area, and “Submit” gets pushed outside the boundary. Similarly, on the “Existing Users Login” form, it appears the checkbox takes up all the space, and the “Login” button gets pushed over the boundary.

    I know it’s a width issue somewhere, and have been trying for awhile to identify where in the CSS to update it. Any ideas?

    One additional question – is there a way to auto-log users in when they register? Meaning, currently a user registers (I have it un-moderated), and then they have to again enter their login and password; could successful registration also serve as a log-in?

    Thanks again for the great plug-in!

    • says

      Second question first – not at this time.

      The other issue, if you are looking to change something in the WP-Members CSS, it is likely that you are looking in the wrong place. There is no width specification for those elements. It is likely that you have a property in your theme’s stylesheet (or perhaps another stylesheet) that specifies a width for the html input tag (which does not differentiate between text input, checkbox, etc which are all input tags). You probably need to define a specific property for the button to override the inherited property.

      • says

        Ok, I wasn’t able to update it via the Input tag, but I did find CSS code in the wp-members/css/wp-members.css file that I was able to add a width element to, which fixed the immediate problem – so the New Users Registration looks good. Now, I still have an issue with the Existing Users Login, and it stems from the “Remember Me” element. I think the checkbox named “rememberme” is assigned a width based on my theme (as you mentioned above); this may be a dumb question, but where is the code that calls the rememberme element so that I can add a class to it? Since I’m using shortcodes I can’t find it.

        • says

          A checkbox is also an input tag. Again, this would the result of a CSS property definition for that tag (probably in your theme). You’ll need to specify something to override that. Probably something like:

          #wpmem_login input[type="checkbox"] { width: 20px; }

  15. says

    Hi, I’d like the place the field labels inside the fields to make a compact simple form (and get rid of the one outside the fields). Anyone got any ideas on how to accomplish this?

    Could be a future feature to add to the admin. Could be used even with the normal field labels as extra information or examples of what to put in the fields.

    • says

      You could use the filter wpmem_register_form (and/or wpmem_login_form) to filter the html string that is generated, probably using php’s str_replace function to take out what you don’t want and replacing with what you want. This is a fairly new filter so there isn’t much documentation (actually there’s none yet, other than in various comments).

  16. LupoBello says

    Plugin very useful bu CSS customization would be much easier is the form where generated with a div for each row and then splitting it into a label and input field part. That would allow sizing by % much like primary and secondary within 2011 itself.

    L

    • says

      I have considered some changes in that regard, but with the large number of users effected by a wholesale change I have not made a final decision.

      In the meantime, there are two form filters available – wpmem_login_form and wpmem_register_form that receive the html string for the form. You could use something like php’s str_replace to change the elements you want to change and end up with a fully customized form that is still compatible with plugin upgrades.

  17. says

    Hi there,
    love the functionality of the plugin, but there’s something I’m missing somewhere.

    I’ve changed the custom css in the settings so it’s choosing the Kubrick theme, but can’t figure out why there’s no box for the password to sit in (both in the sidebar widget form and the registration page). I’m not good with css, so don’t want to play too much with it!

    And now when I try and revert to one of the other themes, it’s not playing ball at all- just stays the same as the Kubrick theme.

    Any ideas? Many thanks for your time.

    Rhiannon

    • says

      If you have specified a stylesheet in the plugin’s settings, that will remain the same until you change it in that setting.

      • R says

        Yes, I’ve changed this several times in the plugin setting with no change.

        The real problem is that there is a box for the username to be typed in, but no box visible for the password. In both sidebar widget and registration page areas.

  18. Cyrus Olu says

    Wonderful plugin Chad, thanks you’ve made things easier.
    I tried to change the css of my wp-member registration form by following your tutorial. I have insert the url of where the css should be in the custom css: field, yet i see no changes to my form. Pls help