Acp Customize Login Page

BebeGFX · 08-06-2015, 10:42 AM

THIS tutorial I will show how you can edit the appearance of the ACP login page , after your common love ! Let 's start ! We go and look /forum/admin/skin_cp/acp.css version :

Search :

Code:
body.login_screen {
 background: -moz-linear-gradient(center top , #4A85B5 0%, #205889 100%) repeat scroll 0% 0% transparent;
 height: auto !important;
 }

Modify and obtain

Code:
body.login_screen {
 background: url("http://i.imgur.com/10GW1vp.jpg") repeat fixed 50% 0px / cover transparent;
 color: #BCBCBC;
 font: 11px tahoma,helvetica,arial,sans-serif;
 position: relative;
 }

Search:

Code:
#login {
 width: 450px;
 height: 220px;
 background: none repeat scroll 0% 0% #FFF;
 margin: 10% auto 0px;
 border-radius: 4px;
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
 position: relative;
 padding: 10px;
 }

MModify and obtain

Code:
#login {
 width: 450px;
 height: 220px;
 background-color: rgba(25, 25, 25, 0.9);
 margin: 10% auto 0px;
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
 position: relative;
 padding: 10px;
 }

We have to make a change and we finished , we seek :

Code:
#login_submit {
 background: none repeat scroll 0% 0% #E7EDF2;
 border-top: 1px solid #D0DCE6;
 padding: 20px 10px;
 text-align: center;
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 border-radius: 0px 0px 4px 4px;
 }

Modify and obtain

Code:
#login_submit {
 background-color: rgba(25, 25, 25, 0.9);
 border-top: 1px solid rgba(25, 25, 25, 0.9);
 padding: 20px 10px;
 text-align: center;
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 border-radius: 0px 0px 4px 4px;
 }

End result :
http://i.imgur.com/hzifAMu.png
Thank you for your attention , if you find this tutorial useful not forget to click " Like"

Acp Customize Login Page

Submitted by BebeGFX, 08-06-2015, 10:42 AM, Thread ID: 4609