Jump to content
Sign in to follow this  
Sebastian C.

Personalizare Acp Login Page

Recommended Posts

În acest tutorial am să va arăt cum puteţi edita aspectul paginii de logare de la ACP , după bunul vostru plac ! Să începem ! Mergem în /forum/admin/skin_cp/acp.css şi căutăm :

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

Modificăm şi obţinem :

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;
}

Acum căutăm :

#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;
}

Modificăm şi obţinem :

#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;
}

Mai avem de făcut o modificare şi am terminat , căutăm :

#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;
}

Modificăm şi obţinem :

#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;
}

Rezultat final :

http://i.imgur.com/hzifAMu.png

 

Va mulţumesc pentru atenţie , dacă consideraţi acest tutorial util nu uitaţi să apăsaţi butonul "Like"

Edited by Sebastian C.

Share this post


Link to post
Share on other sites

Nu imi apare asa...

 

Cod-urile nemodificate sunt luate din sursa web deoarece n-am nici un exemplar de la acp.css nemodificat cauta doar numele codului nu si continutul si il vei gasi !

Share this post


Link to post
Share on other sites

Sunt si pe webflake acp-uri gata facute. Dar oricum, foarte folositor ;)

Foarte folositor nu e, dar na.

 

Frumos tutorialu (fie sau nu copy/paste), este personalizare pentru ACP, adica vorbim de ceva ce ar trebui sa aiba acces maxim 4-5 persoane ( si 4-5 persoane mi se pare mult ) si restu nici macar sa nu vada aceasta pagina :)

Share this post


Link to post
Share on other sites

Nu inteleg :? Ce sa fac sa editez?

Caută in ftp forum/admin/skin_cp/acp.CSS si dai click dreapta si dai edit si după faci pași care a spus sebi

Share this post


Link to post
Share on other sites

 

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

Modificăm şi obţinem :

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;
    overflow:hidden;
}

Daca va apare bara de scroll , adaugati overflow:hidden; in body.login_screen { .

Edited by Labrinth

Share this post


Link to post
Share on other sites

Mie nu imi merge. Am descarcat fisierul acp.css din ftp, l-am modificat exact asa cum a scris aici, l-am urcat iar in ftp ( cel modificat ) si acum ACP-ul imi arata ca inainte. De ce?

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×