Protected Content - Login form, custom style

Hi there,

I have just updated the membership plugin to pro 2 and I noticed that the protected content page has a cool login form now. Loving it, but it doesn't look as good as it could be. How can I make sure it fits the the theme css?

Or maybe I can be cheeky and ask for a custom CSS snippet to make the form fit full width in the column I have on the page (using SiteOrigen builder). I'm trying to get the fields, buttons etc full width and maybe the register text into a button as well.

Check the screenshot or got to live website:
http://www.careertiger.co.nz/members/

Cheers,
Ronald

  • Vinod Dalvi

    Hi Ronald,

    I hope you are well today and thank you for your question.

    You can try achieving this by adding the following CSS code 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/

    body.page-template-page-fullwidth #pg-919-0 .panel-grid-cell {
      width: 100%;
      clear: both;
    }
    
    body.page-template-page-fullwidth #pg-919-0 .panel-grid-cell .ms-membership-form-wrapper > a,
    body.page-template-page-fullwidth #pg-919-0 .panel-grid-cell .login-remember.ms-field {
      width: 100px;
      max-width: 100%;
      margin: 0 auto;
      display: block;
    }
    
    body.page-template-page-fullwidth #pg-919-0 .panel-grid-cell .ms-membership-form-wrapper > a{
     background-color: #f47921;
      text-decoration: none;
      -moz-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      color: #fff;
      font-size: 14px;
      font-family: inherit;
      letter-spacing: 1.2px;
      padding: 12px;
      border-radius: 4px;
      text-align: center;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      box-sizing: border-box;
      border: none;
      line-height: 17px;
      cursor: pointer;
      text-shadow: none;
      width: 204px;
    }

    Best Regards,
    Vinod Dalvi

  • Ash

    Hello @dutchmen

    Yes, you have to match the ID and class name. Like in above code pg-919-0 is the ID and page-template-page-fullwidth is the class name.

    If you please share a link of that page we can help you with the correct selectors.

    Meanwhile would you please try the following code?

    .panel-grid-cell {
      width: 100% !important;
      clear: both !important;
    }
    
    .ms-membership-form-wrapper > a,
    .login-remember.ms-field {
      width: 100px !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      display: block !important;
    }
    
    .ms-membership-form-wrapper > a{
     background-color: #f47921 !important;
      text-decoration: none !important;
      -moz-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15) !important;
      -webkit-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15) !important;
      box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15) !important;
      color: #fff !important;
      font-size: 14px !important;
      font-family: inherit !important;
      letter-spacing: 1.2px !important;
      padding: 12px !important;
      border-radius: 4px !important;
      text-align: center !important;
      -webkit-transition: all .2s ease-in-out !important;
      transition: all .2s ease-in-out !important;
      box-sizing: border-box !important;
      border: none !important;
      line-height: 17px !important;
      cursor: pointer !important;
      text-shadow: none !important;
      width: 204px !important;
    }

    If it breaks other pages, please share a link of that page.

    Cheers
    Ash

  • Dutchman

    @Ashok

    Thanks for the feedback and explanation. The code you send me didn't do the work properly. Maybe because I use the Siteorigin pagebuilder plugin for the design of the page. I used it for all of the networks. Just the first one (on careertiger) worked really well.

    The other 2 networks I would like to apply to it are:
    http://www.cu2.co.nz
    http://www.edulink.co.nz

    Is there a way to get this code to work on other networks, as in how do I need to change the code to make it work. I tried changing the page ID accordingly, but that didnt work. Did I miss something?

    Cheers,
    Ronald

  • Vinod Dalvi

    Hi Ronald,

    You can try styling the protected content page on the site http://edulink.co.nz/members/ by using the following CSS code.

    body.page-template-default #pg-237-0 .panel-grid-cell {
      width: 100%;
      clear: both;
    }
    
    body.page-template-default #pg-237-0 .panel-grid-cell .ms-membership-form-wrapper > a,
    body.page-template-default #pg-237-0 .panel-grid-cell .login-remember.ms-field {
      width: 100px;
      max-width: 100%;
      margin: 0 auto;
      display: block;
    }
    
    body.page-template-default #pg-237-0 .panel-grid-cell .ms-membership-form-wrapper > a{
     background-color: #f47921;
      text-decoration: none;
      -moz-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.15);
      color: #fff;
      font-size: 14px;
      font-family: inherit;
      letter-spacing: 1.2px;
      padding: 12px;
      border-radius: 4px;
      text-align: center;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      box-sizing: border-box;
      border: none;
      line-height: 17px;
      cursor: pointer;
      text-shadow: none;
      width: 204px;
    }

    Cheers,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.