CSS Styling on Protect Content Page

How do I get the CSS for the protected content to match the rest of the site.

We want to have the styling from this page. Login Page: http://grebbly.wpengine.com/my-account/

To be on this page http://grebbly.wpengine.com/protected-content/?redirect_to=http%3A%2F%2Fgrebbly.wpengine.com%2F

Any help you could provide would be very helpful. TY

  • Kasia Swiderska

    Hello john,

    Please try adding following CSS to your site:

    .ms-protected-content {
        border-color: #e0dede;
        border: 1px solid;
        padding: 30px;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .ms-protected-content h2 {    text-align: left !important;}
    
    .ms-membership-form-wrapper .login-remember label {display: inline;}
    
    .ms-protected-content .login-submit #wp-submit {
    background: #96c346;
        color: #ffffff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#96c346, endColorstr=#96c346);
        border-color: #ffffff;
        font-family: "PT Sans";
        font-weight: 400;
        letter-spacing: 0px;
        padding: 13px 29px;
        line-height: 17px;
        font-size: 14px;
        border: none;
        border-radius: 2px;
    }
    
    .ms-login-form + a {margin-left: 10px;}

    You can
    a) add it to the child theme style.css file
    b) use this small plugin https://pl.wordpress.org/plugins/custom-css-js/
    c) use WordPress Customizer field for custom CSS or your theme custom CSS if it has this option

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.