Protected Content Text Aligning Right

I made some appearance changes to http://silver-hart.com/register/ and got it to look as my client wanted. Only now, all of the text connected to this plug-in is aligning right and I could really use another pair of eyes. They want to launch this week and that's the last fix -- if I could just figure out how I messed up the css. Any help is appreciated. Love the plug-in and it's functionality. Thank you in advance!

  • Tina
    • New Recruit

    Thank you so much for a quick reply. I did figure it out. Now if could figure out how to make the graphics I made linked to the memberships instead of the "sign up" buttons (client request), well, everything would be perfect. Love WPMUDEV. Love the plug-ins. Awesome stuff!

  • Vinod Dalvi
    • WP Unicorn

    Hi @Tina,

    Thank you for your reply.

    Now if could figure out how to make the graphics I made linked to the memberships instead of the "sign up" buttons (client request), well, everything would be perfect.

    You can achieve this by using the following CSS code by adding it in the style.css file of your child theme or add it in your site using the following plugin.

    https://wordpress.org/plugins/simple-custom-css/

    .ms-membership-form .ms-membership-details-wrapper {
    position: relative;
    }
    .ms-membership-form .ms-bottom-bar {
    position: absolute;
    top: 36px;
    left: 16px;
    width: 219px;
    height: 220px;
    border-radius: 124px;
    visibility: hidden;
    }
    .ms-membership-form .ms-price-details .ms-description {
    cursor: pointer;
    }

    Best Regards,
    Vinod Dalvi

  • Patrick
    • Support Monkey

    Hi there @Tina

    I hope you don't mind me jumping in here.

    My colleague @Vinod Dalvi is on the right track there; this can definitely be achieved with CSS. But those style rules do need a bit of tweaking to get the graphic to be clickable.

    We need to give the ms-bottom-bar an absolute position within its parent details-wrapper & specify that position (the first 2 lines below). Then adjust the position & size of the ms-signup-button inside by increasing the padding and giving it a border-radius to make it round (3rd line below). Finally, the backgrounds & text color are set to transparent (lines 2, 3 & 4 which sets the hover background color).

    .ms-membership-form-wrapper .ms-membership-details-wrapper {position:relative;}
    
    .ms-membership-form-wrapper .ms-bottom-bar {background:transparent; left:13px; top:30px; position:absolute;}
    
    .ms-membership-form-wrapper .ms-signup-button {background:transparent; border-radius:110px; color:transparent; margin-left:0; padding:102px 85px;}
    
    .ms-membership-form-wrapper .ms-signup-button:hover {background:transparent;}

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.