Private Page - Password Protected

[bcoplin]

So when I turn a page private and require a password it throws everything to the left of the screen. Is there a way via global css to have this centered and style the fonts and button so it matches the website?

Add Event | South Hills Church

Thank you in advance for your help.

[prakash_s]

Hello @bcoplin,

Thanks for writing to us.

To make the form center you can use this custom CSS code under X/Pro—>Theme Option—>CSS

form.post-password-form {
margin: 25px auto;
text-align: center;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[bcoplin]

@prakash_s

form.post-password-form {
margin: 25px auto;
text-align: center;
}

Thank you that worked to center the login, but how can i make the button match the site buttons?

[nabeel]

Hey @bcoplin,

This isn’t a default feature but this could be possible by using custom CSS that requires custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. To achieve your desired results, you can add the following code in the Theme Options > CSS:

.post-password-form input[type="submit"] {
    color: #1fbdf0;
    background: #0000;
    box-shadow: none;
    border: 2px solid #1fbdf0;
    text-shadow: none;
    padding: 5px 30px;
    border-radius: 0;
    font-size: 20px;
}

Hope this helps!