Use the code below to customize the login screen (add a background image, color, etc) when using the Padlock feature:
1)Log into your App Manager and select your app.
2) Click Colors from the left-hand-side of the screen (or the middle of the screen).
3) Scroll down to the Advanced SCSS box. If there is already code in the box do not delete it! Simply add this code “below” the last character of code in the box.
/** Begin customize login screen.*/
.customer-view.modal ion-content .list .item.item-text-wrap {
display:none;
};
.customer-view.modal ion-content .list .item.item-divider {
display:none;
};
.customer-view.modal ion-content .list .item.item-custom input::placeholder {
color:white;
font-size:15px;
};
.customer-view.modal ion-content .list .item.item-custom input{
color:white;
font-size:15px;
};
.customer-view.modal ion-content .list [class="item item-custom item-icon-left ng-binding"] {
background-color:transparent;
color:white;
border-left:transparent;
border-right:transparent;
border-top:transparent;
border-bottom-color:#ffffff;
margin-left:25%;
margin-right:25%;
};
.customer-view.modal ion-content .list .item.item-custom .input-label {
display:none;
};
.customer-view.modal ion-content .list .item.checkbox-custom span {
color:white;
};
.customer-view.modal ion-content .list label{
background-color:transparent;
color:white;
margin:0% 25% 0% 25%;
border-left:transparent;
border-right:transparent;
border-top:transparent;
border-bottom-color:#ffffff;
};
/*
.customer-view.modal ion-content .list .item:nth-child(4) {
margin:0% 25% 0% 25%;
border-color:transparent;
text-align:center;
};
*/
.customer-view.modal ion-content [class="button button-positive button-positive-custom ng-binding button-full"] {
background-color:#ee4b63;
height:30px;
width:60%;
margin:0% 20% 0% 20%;
text-align:center;
};
.customer-view.modal ion-content {
background-image:url("https://st.depositphotos.com/1244201/2496/i/950/depositphotos_24962239-stock-photo-blue-wooden-background.jpg");
height:520px;
border:2px solid white;
};
.customer-view.modal ion-content .list .item{
background-color:transparent;
color:white;
border-left:transparent;
border-right:transparent;
border-top:transparent;
border-bottom-color:#ffffff;
margin-left:20%;
margin-right:20%;
padding-left:0px;
width:60%;
}
/** for privacy policy text*/
.customer-view.modal ion-content .list label.item.checkbox-custom{
padding-left:47px;
width:100%;
}
.customer-view.modal ion-content .list .item .icon{
display:none;
}
/** End customize login screen.*/4)Click Save.
Note: Replace the various hex colors (ex:“ffffff”) to the colors that you would like to use. In addition, be sure to change the image url to use your image: