VGH: Jak upiększyć panel logowania

Dzięki poradnikowi dowiecie się jak edytując przy pomocy CSS kilka pseudoklas, można uzyskać ładnie wyglądający domyślny panel logowania.
Na pierwszym zdjęciu od lewej widać jak normalnie wygląda ten panel, zaś zdjęcia obok pokazują co można tzw. upiększyć za pomocą CSS.

Pseudoklasy i klasy wykorzystywane do edycji panelu logowania:

• form[name="loginform"]
• .textbox[name="user_name"]
• .textbox[name="user_pass"]
• .button[name="login"]

Poniżej podaje przykład stylizacji panelu logowania dla stylu jasnego i ciemnego, tak jak widać na zdjęciach powyżej.

1. Dodaj nowy lub edytuj istniejący panel:
PA -> Zarządzanie stroną -> Zarządzanie panelami

2. W treść panelu wklej jeden z poniższych kodów.
CSS do stylu jasnego:

<style type="text/css">
/*-------Jak upiększyć panel logowania?--------------------*/
/*-------Kod przygotowany przez fantagiro || fantidesign.blogspot.com----------------*/
form[name="loginform"] {
font-size:0px!important; 
padding-top:10px}

.textbox[name="user_name"], .textbox[name="user_pass"] {
margin-top:5px;
width:160px!important;
height:28px;
padding:2px;
padding-left:17px!important;
color:#000;
font-size:12px;
border:1px solid #999;
background-color: #fff;
box-shadow: 1px 1px 3px #999
}

.textbox[name="user_name"]:hover, .textbox[name="user_pass"]:hover {
border:1px solid #777;
background-color: #fff;
box-shadow: 1px 1px 3px #999
}

.textbox[name="user_name"] {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa55/d6ea58e6ec59d9dd42e923bea0e42f1c11747.png);  
background-repeat: no-repeat;  
background-position:center left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.textbox[name="user_name"]:hover {
background-color:transparent;
background-image: url(http://cdn3.iconfinder.com/data/icons/musthave/16/User.png);  
background-repeat: no-repeat;  
background-position:center left;
}

.textbox[name="user_pass"] {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa43/d90efec41c73b0b8f2f14147694f5c3412418.png);  
background-repeat: no-repeat;  
background-position:center left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.textbox[name="user_pass"]:hover {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa53/335a346117ec538853105766820cf7cb14951.png);  
background-repeat: no-repeat;  
background-position:center left;
}

 .button[name="login" ], input[name="remember_me"] {
height:30px;
padding:3px;
color:#333;
letter-spacing:1px;
font-weight:bold;
font-size:10px;
margin-left:5px;
margin-top:5px;
border:1px solid #fff;
background-color: #bbb;
box-shadow: 1px 1px 3px #666;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.button[name="login" ]:hover{
border:1px solid #fff;
background-color: #aaa;
box-shadow: 1px 1px 3px #666}
</style>

CSS do stylu ciemnego:

<style type="text/css">
/*-------Jak upiększyć panel logowania?--------------------*/
/*-------Kod przygotowany przez fantagiro || fantidesign.blogspot.com----------------*/
form[name="loginform"] {
font-size:0px!important; 
padding-top:10px}

.textbox[name="user_name"], .textbox[name="user_pass"] {
margin-top:5px;
width:160px!important;
height:28px;
padding:2px;
padding-left:17px!important;
color:#777;
font-size:12px;
border-top:0px;
border-left:0px;
border-right:1px solid #595959;
border-bottom:1px dashed #595959;
background-color: #transparent;
-moz-box-shadow: 2px 2px 2px #222;
-webkit-box-shadow: 2px 2px 2px #222;
box-shadow: 2px 2px 2px #222;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.textbox[name="user_name"]:hover, .textbox[name="user_pass"]:hover  {
border-right:1px solid #777;
border-bottom:1px dashed #777;
}

.textbox[name="user_name"] {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa55/d6ea58e6ec59d9dd42e923bea0e42f1c11747.png);  
background-repeat: no-repeat;  
background-position:center left;
margin-bottom:5px;
}

.textbox[name="user_name"]:hover {
background-color:transparent;
background-image: url(http://cdn3.iconfinder.com/data/icons/musthave/16/User.png);  
background-repeat: no-repeat;  
background-position:center left;
}

.textbox[name="user_pass"] {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa43/d90efec41c73b0b8f2f14147694f5c3412418.png);  
background-repeat: no-repeat;  
background-position:center left;
}

.textbox[name="user_pass"]:hover {
background-color:transparent;
background-image: url(http://www.fotoload.pl/123aa53/335a346117ec538853105766820cf7cb14951.png);  
background-repeat: no-repeat;  
background-position:center left;
}

 .button[name="login" ]{
height:30px;
padding:3px;
color:#555;
letter-spacing:1px;
font-weight:bold;
font-size:10px;
margin-left:5px;
margin-top:5px;
border-right:1px solid #595959;
border-left:1px solid #595959;
border-bottom:1px dashed #595959;
border-top:1px dashed #595959;
background-color:transparent;
-moz-box-shadow: 1px 1px 2px #222;
-webkit-box-shadow: 1px 1px 2px #222;
box-shadow: 1px 1px 2px #222;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.button[name="login" ]:hover{
color:#777;
border-right:1px solid #777;
border-left:1px solid #777;
border-bottom:1px dashed #777;
border-top:1px dashed #777;
background-color:transparent;
}
</style>

3. Zapisz panel i pamiętaj aby go włączyć.