1) Inside the main theme folder, open the config.php file. Scroll down to where you see "login" and you can change that to read your own custom page. In my case, I made this change:
From:
...
),
'login' => array(
'file' => 'general.php',
'regions' => array(),
),
...
To:
...
),
'login' => array(
'file' => 'login.php',
'regions' => array(),
),
....
2) Next, I copied the general.php file, so I can use the same theme settings for my login.php page. However, I took out all the unnecessary sections: langmenu, custom menu, and side blocks. So basically I just show my logo, the main content, and the footer.
3) Lastly, I added some custom CSS to my core.php page to make the login elements look the way I wanted to. I centered all the elements on screen with a nice background like this:
Here is the CSS I used to make this:
/* //////////////////////////////////////////////////// LOGIN PANEL //////////////////////////////////////////// */
.twocolumns div.loginpanel
{
border-right: 1px dashed #dadada !important;
}
.onecolumn div.loginpanel
{
position:relative;
width:35%;
margin: 0 auto;
background:#ececec;
background: -webkit-gradient(linear, 0 100, 0 bottom, from(#ececec), to(#bfbfbf));
background: -moz-linear-gradient(#ececec, #bfbfbf);
background: -ms-linear-gradient(#ececec, #bfbfbf);
background: -o-linear-gradient(#ececec, #bfbfbf);
background: linear-gradient(#ececec, #bfbfbf);
-pie-background: linear-gradient(#ececec, #bfbfbf);
border: 1px solid #a2a2a2;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url(PIE.htc);
}
div.loginpanel h2
{
text-align:center;
text-transform:none;
}
.loginbox .loginform
{
width: 100%;
height:20em;
vertical-align:middle;
}
.loginbox .loginform .form-input
{
vertical-align:middle;
text-align:center;
float:none;
clear:both;
width:100%;
padding-bottom:1em;
}
.loginbox .loginform .form-label
{
padding: 0em 0em 0.3em 2em;
text-align:center;
}
.loginbox .loginform .form-input #username,
.loginbox .loginform .form-input #password
{
position:relative;
min-height:1.7em;
width:60%;
border-size:1px inset #d9d9d9;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url(PIE.htc);
}
.loginbox .loginform .form-input #loginbtn
{
vertical-align:middle;
display:block;
padding:1em;
width:10em;
border:1px solid #bfbfbf;
position:relative;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior: url(PIE.htc);
}
.loginbox .loginform .form-input #loginbtn:hover
{
color:white;
background:#5b2d7e;
}
div.forgetpass,
div.centeredcookies
{
text-align:center;
}
/* //////////////////////////////////////////////////// END OF LOGIN PANEL //////////////////////////////////////////// */
