Modification of Login page for SuiteP theme, pretty straightforward and responsive :)

Hello All,

Just wanted to let you all know that modifying the login screen is pretty straightforward. With a little bit of html and css you can make your screens look like this :

http://nbd-atm.powerplaydestination.com/

I put this little bit of code in the login.tpl for the video :

www.screencast.com/t/hMdPGRsm1

then i added this css to my custom theme style.css :

/* This is all for the login.tpl located here : /custom/themes/SuiteP/tpls */
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
}
div.p_login #loginform {
position: relative;
background-color: #1274b4 !important;
}
.p_login_top
{
display:none;
}
.p_login_middle
{
background-color:initial !important;
background-image:url(https://dev-atm.powerplaydestination.com/custom/include/images/pp-login-bg.jpg) !important;
background-size:cover;
height:100%;


}
.p_login_bottom
{
display:none;
}
2 Likes

This is awesome! Exactly what I was looking for, thank you!

Btw here’s the code from your screenshot, I added a publicly available video as a placeholder in case someone wants to try it

<div class="p_login_middle">

    <video autoplay muted loop id="myVideo">
        <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
1 Like

Nbd-atm link not working can u pls check or share screenshot

Yes that suite has been discontinued… you can view another one here :
https://kap-atm.powerplaydestination.com/