Customizing Membership Login Form

We curently do not have built-in options that could customize the design of Membership Login Form. As of now, the only way to customize our form is to use custom CSS code.

You can use these CSS code below. Add the code to the LiveEditor of the page >> Page Settings >> Other Scripts >> Custom CSS.

/** For the Submit Button **/
input.btn.btn-primary {
background-color: #4CAF50;
border: 1px solid #4CAF50;
border-radius: 4px;
padding: 10px;
color: #DBEFDC;
transition-duration: 0.3s;
font-size: 20px;}
input.btn.btn-primary:hover {
background-color: #DBEFDC;
color: #4CAF50 !important;
border: 1px solid #4CAF50;}
input.btn.btn-primary:visited {
color: #DBEFDC;
}
/** For the Input Fields **/
input#ws-plugin--optimizemember-pro-login-widget-username,input#ws-plugin--optimizemember-pro-login-widget-password {
padding: 8px; margin: 0 0 10px;
}
input#ws-plugin--optimizemember-pro-login-widget-username:focus,input#ws-plugin--optimizemember-pro-login-widget-password:focus {
box-shadow: 1px 1px #C9E7CA, -1px -1px #C9E7CA;
transition-duration: 0.1s;
}
/** For the Labels **/
form div label {
display: inline-block;
font-weight: 300;
font-size: 14px;
}
.ws-plugin--optimizemember-pro-login-widget-lost-password {
font-size: 13px
}
/** For the Login Form Box **/
.ws-plugin--optimizemember-pro-login-widget-form {
padding: 20px;
box-shadow: 1px 1px 5px #DBEFDC, -1px -1px 5px #DBEFDC;
}

The above customization is for the green color theme. To change the color theme just replace the color hex codes #4CAF50, #DBEFDC, #C9E7CA with your own desired colors.

To change the text of the username field label

Add this code as HTML on your page in a HTML element

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("label[for=\'ws-plugin--optimizemember-pro-login-widget-username\']").text(\'Username:\');
});
</script>