Changing style of membership pages

How can I style the membership pages? I'm using the divi theme.

  • KOC
    • Design Lord, Child of Thor

    Yes, I realize that. I'd like to change the look of all the membership pages but all I can find is the shortcode for those templates/pages which are embedded in my current template, however, I have no way to format them.

  • Bojan Radonic
    • Head of Support

    Hey again @KOC,

    As I mentioned above it would depend on what exactly are you looking to change. If these are just styles for those elements we could do it with CSS only and possibly just targeting those specific pages in case you want this only for them.

    If you need help with that please post links to the pages and let me know what you're looking to change so I can try to help with that :slight_smile:

    Cheers,
    Bojan

  • KOC
    • Design Lord, Child of Thor

    Okay, thanks.

    If you start from here: https://beta.karasoncrime.com/subscribe/
    and click the first subscription (one-time, one month only), you'll get to a page like this: https://beta.karasoncrime.com/register/?membership_id=20812
    I want this page to use my Divi Template settings so that the sign up form looks something like this: https://beta.karasoncrime.com/support/contact-us/
    where it's centered in the page and is responsive on smart devices. And if you register as a test, you'll get a screen like this:
    https://beta.karasoncrime.com/register/?action=register_user&step=payment_table&membership_id=20812
    which I would like formatted similarly.

    Your prompt reply is appreciated.

  • Bojan Radonic
    • Head of Support

    Hey again @KOC,

    I can see what you mean now but I'm not being able to inspect those pages properly because you've disabled right click on your site. There is an easy way to go around it but it still makes inspecting pages more time consuming.

    Would you mind disabling that or granting temporary admin access via our Dashboard plugin, which would be even better, so I can take a look?

    You'll find more information on how to do that by following this link: https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,
    Bojan

  • Michael Bissett
    • Recruit

    Hey @KOC, thanks for doing that! :slight_smile:

    In your child theme's style.css, I changed this code at the end:

    .ms-membership-form-wrapper{
        width: 50%;
        margin: 100px;
        align: left
        display: inline-block;}

    To this:

    .ms-membership-form-wrapper{
        width: 50%;
        margin: 100px auto;
    }

    And I also added in this CSS code:

    @media only screen and (max-width: 800px) {
    
    form#ms-shortcode-register-user-form .ms-form-element .wpmui-field-label {
        display: block;
    }
    
    form#ms-shortcode-register-user-form .ms-form-element .wpmui-field-input {
        float: none;
        width: 100%;
        margin-left: 0;
    }
    
    form#ms-shortcode-register-user-form button#register {
        margin-left: 1.4em;
    }
    
    form#ms-shortcode-register-user-form + a.wpmui-link.alignleft {
        margin-left: 1em;
    }
    
    }

    And it's looking good now, both on the "Create an Account" page, as well as the "Join Membership" page, can you confirm the same on your end, please?

    Kind Regards,
    Michael

  • KOC
    • Design Lord, Child of Thor

    Hi Michael, thanks!

    A couple of additional things if you don't mind. How do I remove the register text button from the login page. And if you were to click the text "Already have a user account?" which I would actually like it to say "Already have an account?" remove the register & cancel text buttons from the following login page?

  • Michael Bissett
    • Recruit

    Hey @KOC,

    On the removing of those Register & Cancel links, I've just taken care of that with this CSS code (inserted into your theme's style.css):

    .ms-membership-form-wrapper .ms-login-form + a {
        display: none;
    }
    
    .ms-membership-form-wrapper + a[title="Cancel"] {
        display: none;
    }

    As for the changing of that "Already have a user account?" text, I've taken care of that with the "Network Wide Text Change" module inside of our Ultimate Branding plugin (as I saw you had that plugin of ours installed on your site), can you please confirm that it's all looking as it should?

    Please advise,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.