Change Layout and Function of Membership Login Page

I'm building a site for a client that is a printing company. They asked me to build a site with a subdomain and have it available only to members of the company that they will be providing products to on the subdomain - i.e. business cards, flyers, etc.

I am using the membership plugin from WPMU. Is there a setting in this plugin to change the layout or does it have to be done with CSS? Currently the login form is full width. I'd like to make it 1/2 and add an image in the second column. Additionally I'd like to make the button bigger.

Also when I submit the proper login information the page flashes for a second then comes back. Is this normal?
https://topgolf.hawkeyeprint.com/

  • Predrag Dubajic

    Hi David,

    Since this question is about our product I have moved your question to our support forum, Members forum is more of a general discussion section and it doesn't guarantee staff response.

    About the question, unfortunately the registration itself is not a separate page that could be further modified from WordPress directly.
    What you can do is adjust the width by using some CSS and add the image with a small script.

    In order to do this you will need to add below code in your child theme functions.php or as a mu-plugin:

    function add_image_to_form() { ?>
    
    	<script type="text/javascript">
    		jQuery ( document ).ready(function() {
    			jQuery( '#ms-shortcode-register-user-form' ).after( '<img id="my-custom-image" src="IMAGE_URL" />' );
    		});
    	</script>
    
    <?php }
    add_action( 'wp_footer', 'add_image_to_form' );

    In that code replace "IMAGE_URL" with the URL of the image you want to show next to the form.

    And now adjust the width with some CSS like this:

    /* Form width */
    #ms-shortcode-register-user-form {
        width: 50%;
        float: left;
    }
    
    /* Image width */
    #my-custom-image {
        max-width: 50%;
        float: left;
    }
    
    /* Button width */
    #ms-shortcode-register-user-form button#register {
        padding: 20px 75px;
    }

    I've added comments in that code as it includes code for adjusting button width as well so you know what to adjust.
    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Hope this helps.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.