Acp Customize Login Page

by BebeGFX - 08-06-2015, 10:42 AM
Closed Account
Posts:
76
Joined:
Jun 2015
Likes:
7
Credits:
73
Reputation:
0
2 Years of Service
#1
OP
Posted: 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"
bernard_h
27-09-2015, 10:42 AM
Kill
08-06-2015, 02:14 PM
MobiMyle
19-09-2015, 06:52 PM
NSA
17-09-2015, 07:08 AM
@Believer rocks
Paradigm
Posts:
1,287
Joined:
May 2015
Likes:
43
Credits:
-1,044
Reputation:
45
2 Years of Service
#2
Posted: 08-06-2015, 02:14 PM
Wow! Nice login dude!
Closed Account
Posts:
76
Joined:
Jun 2015
Likes:
7
Credits:
73
Reputation:
0
2 Years of Service
#3
OP
Posted: 08-06-2015, 04:27 PM (This post was last modified: 08-06-2015, 04:27 PM by BebeGFX.)
Thanks, if you want to change the background image change this link
Code:
http://i.imgur.com/10GW1vp.jpg
with the desired image.
YouR JuSt G4Y
Posts:
879
Joined:
Feb 2015
Likes:
32
Credits:
333
Reputation:
3
2 Years of Service
#4
Posted: 08-06-2015, 05:03 PM
That background pretty sexy af yo!
Fulltime Member
Posts:
1,134
Joined:
Apr 2015
Likes:
51
Credits:
117
Reputation:
37
2 Years of Service
#5
Posted: 16-06-2015, 03:43 AM
I did this and have saw nothing change :(
<div class="postbit-usertitle">
Posts:
646
Joined:
Feb 2015
Likes:
50
Credits:
1,214
Reputation:
35
2 Years of Service
#6
Posted: 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
[Image: UeTXrZ5.png]
Fulltime Member
Posts:
1,134
Joined:
Apr 2015
Likes:
51
Credits:
117
Reputation:
37
2 Years of Service
#7
Posted: 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:
<div class="postbit-usertitle">
Posts:
646
Joined:
Feb 2015
Likes:
50
Credits:
1,214
Reputation:
35
2 Years of Service
#8
Posted: 25-06-2015, 10:23 PM (This post was last modified: 25-06-2015, 10:24 PM by Oxygen.)
BTW guys this tutorial will not work for IPS 4.0.x
[Image: UeTXrZ5.png]
Novice
Posts:
44
Joined:
Jan 2015
Likes:
3
Credits:
1
Reputation:
0
2 Years of Service
#9
Posted: 06-07-2015, 09:42 AM
Nice tutorial Bro works fine with 3.x hope you can share same for 4.x Smile
Junior Member
Posts:
50
Joined:
Sep 2015
Likes:
4
Credits:
113
Reputation:
3
2 Years of Service
#10
Posted: 17-09-2015, 03:57 AM (This post was last modified: 17-09-2015, 11:40 AM by ihton.)
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 ;)
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)