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"

Kill · 08-06-2015, 02:14 PM

Wow! Nice login dude!

BebeGFX · 08-06-2015, 04:27 PM

Thanks, if you want to change the background image change this link

Code:
http://i.imgur.com/10GW1vp.jpg

with the desired image.

Mr_Joker · 08-06-2015, 05:03 PM

That background pretty sexy af yo!

Tropical · 16-06-2015, 03:43 AM

I did this and have saw nothing change :(

Oxygen · 25-06-2015, 10:19 PM

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

IPB not MyBB

Tropical · 25-06-2015, 10:21 PM

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:

Oxygen · 25-06-2015, 10:23 PM

BTW guys this tutorial will not work for IPS 4.0.x

Admin · 06-07-2015, 09:42 AM

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

ihton · 17-09-2015, 03:57 AM

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

Acp Customize Login Page

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

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page

RE: Acp Customize Login Page