Change color/padding for Registration form on Membership2 Plugin

Hello,

I was able to search the forum and find some CSS to move the form over to the left on this page below but I want to move it over more to line up with Registration:

http://2020sov.org/register/?step=register

I cannot see the fields next to the field titles. So I can’t tell where to click the mouse to enter data. I modified some of the CSS but don’t know the styles for the fields. I’d also like to remove a lot of the whitepace between Registration and Create An Acct. I took out the top padding on the form but that doesn’t seem to be working. I’m using the simple CSS plugin.

I also want to move the form over on this page to so it lines up with the sentence under Protected Content.

http://2020sov.org/protected-content/?redirect_to=http%3A%2F%2F2020sov.org%2Fmembers-only%2F

I have given access to the site through the WPMU dashboard in case that is helpful.

Thank you,

Felisha

  • Ken Kimbrell
    • The Crimson Coder

    Hello Felisha-

    I see you have a question regarding modifications to the style of your login/registration form. Happy to help you!

    After looking over your site, and trying to recreate your desired results, I came up with this modification to your CSS. You will want to apply this CSS to your style.css file in your Child Theme, or you can enter it through the wordpress dashboard on the front-end customizer, by going to Appearance -> Customize -> Additional CSS. In addition you can also enter the modified CSS into your simple CSS plugin as well. The idea is to make sure you are entering the modified CSS in an area where it can not be overwritten when your theme updates.

    div.ms-membership-form-wrapper{

    padding: 0px !important;
    margin: 0px !important;
    width: 100%;

    }

    div.form input{

    border: solid #dddddd 1px;
    width: 100%;
    padding: 5px;

    }

    p.login-remember.ms-field{

    margin-bottom: 0px !important;

    }

    p.login-remember.ms-field label{

    position: relative;
    top: -35px;

    }

    input#rememberme{

    position: relative;
    right: 200px;
    height: 20px;
    top: 4px

    }

    form#ms-shortcode-register-user-form input{

    width: 100%;
    border: solid #dddddd 1px;
    padding: 5px;

    }

    /*
    *With the use of media-queries we can change styles based on the current
    *view-port width
    */

    @media only screen and (max-width: 1079px) and (min-width: 570px){

    input#rememberme{
    position: relative;
    right: 0px;
    height: 20px;
    top: 2px
    }

    }

    @media only screen and (max-width: 569px){

    input#rememberme{
    position: relative;
    right: 0px;
    height: 20px;
    top: 25px

    }

    }

    Let me know how this works for you!

    Take Care,

    Ken – WPMU DEV Support

  • Renee
    • WPMU DEV Initiate

    Also I’m using one of you guys child themes…the Issue one. I clicked on the theme and then custom CSS but it takes me to the simple css plugin page. Where do I find the style sheet for the child theme?

    Thanks again,

    Felisha

  • Ken Kimbrell
    • The Crimson Coder

    Felisha-

    If you could go back to your child-theme’s style.css and remove the custom style I recommended. I will go into your dashboard and see if I can make it work for you on your simple CSS plugin page. That way you have all your custom CSS in one location :slight_smile:

    Take Care,

    Ken – WPMU DEV Support

  • Ken Kimbrell
    • The Crimson Coder

    Felisha-

    I enabled the Simple CSS plugin and entered the modified CSS below your current CSS that was already in there. I believe I was able to achieve your desired result :slight_smile: If you are not able to see the CSS style changes to the login/registration form, then I recommend clearing your browsers history and cache. In addition to that, you can also open your site on another browser and see how your site and the CSS styles handle across multiple browsers.

    Let me know how this works for you!

    Take Care,

    Ken – WPMU DEV Support

  • Renee
    • WPMU DEV Initiate

    Yay that is great thank you! The Registration page is perfect. I refreshed the Protected page. You’re so right about the browser. It’s perfect in Chrome but in FF that checkbox has a mind of its own. Love all the help so much thank you!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.