IP.Board Tutorials

Acp Customize Login Page

Submitted by BebeGFX, , Thread ID: 4609

Thread Closed
08-06-2015, 10:42 AM
#1
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"

RE: Acp Customize Login Page

#2
Wow! Nice login dude!

RE: Acp Customize Login Page

OP
This post was last modified: 08-06-2015, 04:27 PM by BebeGFX
#3
Thanks, if you want to change the background image change this link
Code:
http://i.imgur.com/10GW1vp.jpg
with the desired image.

RE: Acp Customize Login Page

#4
That background pretty sexy af yo!

RE: Acp Customize Login Page

#5
I did this and have saw nothing change :(

RE: Acp Customize Login Page

#6
16-06-2015, 03:43 AM
Tropical Wrote:
I did this and have saw nothing change :(

IPB not MyBB
[Image: UeTXrZ5.png]

RE: Acp Customize Login Page

#7
25-06-2015, 10:19 PM
Oxygen Wrote:
16-06-2015, 03:43 AM
Tropical Wrote:
I did this and have saw nothing change :(

IPB not MyBB

Yep,
I saw that :noh:

RE: Acp Customize Login Page

This post was last modified: 25-06-2015, 10:24 PM by Oxygen
#8
BTW guys this tutorial will not work for IPS 4.0.x
[Image: UeTXrZ5.png]

RE: Acp Customize Login Page

#9
Nice tutorial Bro works fine with 3.x hope you can share same for 4.x Smile

RE: Acp Customize Login Page

This post was last modified: 17-09-2015, 11:40 AM by ihton
#10
Gonna try to adapt it to IPS4, I'll post any update on the progress ^^

EDIT1:
applications/core/dev/css/admin/system/login.css

This is where you should make the changes, to change the background you have to edit body#elLogin Wink

Users browsing this thread: 7 Guest(s)