Czasami zdarza się, że potrzebujemy dopracować wizualną stronę dla ekranu logowania. Może klient to esteta? A może, i to jest bardziej prawdopodobne – na jego stronie internetowej loguje się więcej osób i warto zadbać o identyfikację wizualną?

Poniżej przykład jak wygląd strona logowania w WordPress’ie przed i po. Tu akurat klient miał kaprys i w tle możemy podziwiać Drogę Mleczną 😉
Zrzuty ekranu wykonane zostały dla rozdzielczości fullHD, czyli 1920×1080. Dlatego dla mniejszych rozdzielczości całość tych fotek zostanie pomniejszona. Jednak w niczym to nie przeszkadza, ponieważ chodzi o ukazanie różnicy przed i po modernizacji.

No to masujemy paluszki i do dzieła! 🙂

1. Stworzenie pliku stylów dla strony logowania WordPress’a

W katalogu aktywnego motywu tworzymy plik login-style.css
Następna rzecz to podpięcie tego pliku do okna logowania. W tym celu w pliku functions.php dodajemy kod:

function custom_login_style() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login-style.css" />';
}
add_action('login_head', 'custom_login_style');

2. Dodanie obrazka w tle

W nowo utworzonym pliku stylów dodajemy kod:

body.login {
 background-image: url('login-bg.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
}

Oczywiście ścieżka do oraz nazwa obrazka wg potrzeb.

3. Podmiana logo

WordPress’a kochamy, ale przyszedł czas na pożegnanie jego logo i wstawienie własnego. W tym celu do stylów wstawiamy:

body.login h1 a {
 background-image: url('login-logo.png');
 width: 438px;
 height: 73px;
}

Podajemy także rozmiar obrazka, oczywiście dopasowując wartości do własnego logo.
Tu można poszaleć z kreacją i stworzyć plik PNG z przezroczystością, aby uzyskać ciekawe optyczne efekty.  Można to zobaczyć w załączonym wyżej przykładzie modyfikacji strony logowania.

4. Zmiana szerokości kilku elementów

Osadzone na ekranie logowania logo WordPress’a jest małe i spokojnie mieści się na szerokości przeznaczonej na formularz. Niestety nasze logo jest szersze od kontenera zawierającego logo i formularz logowania. To sprawia, że logo zaczyna się od lewej krawędzi razem z boksem od formularza logowania, a następnie wychodzi daleko w prawą stronę za formularz. A chcemy, aby logo zostało wycentrowane.

W tym celu nadajemy szerokość dla kontenerka na 100%, a dla samego formularza wpisujemy węższą wartość. Tą, która była poprzednio zadana dla całego kontenera.

#login {
 width: 100%;
}
body.login form {
 width: 320px;
 margin: 0 auto;
 text-align: center;
}

5. Zmiana adresu URL logo

Domyślnie logo jest odsyłaczem do wordpress.org ale łatwo możemy to zmienić.
W pliku functions.php wklejamy poniższy kod.
Oczywiście należy zmienić nazwę z „ITB Vega” na swoją własną. To jest tekst wyświetlany w atrybucie ALT logo.

function login_logo_url() {
 return get_bloginfo( 'url' );
 }
add_filter( 'login_headerurl', 'login_logo_url' );

function login_logo_url_title() {
 return 'ITB Vega';
 }
add_filter( 'login_headertitle', 'login_logo_url_title' );

6. Stylizowanie etykiet i pól formularza

Możemy zmienić wielkości i kolory. Dodać zaokrąglenia i cienie.

.login label {
 font-size: 13px;
 color: #573844;
}
.login input[type="text"]{
 background-color: #ffffff;
 border-color:#dddddd;
 border-radius: 2px;
}
.login input[type="password"]{
 background-color: #ffffff;
 border-color:#dddddd;
 -webkit-border-radius: 2px;
}
.login .button-primary {
 width: 120px;
 float:right;
 background-color:#9f2d48 !important;
 color: #ffffff;
 -webkit-border-radius: 3px;
 border: 0;
 transition: all 0.4s ease-in-out;
}
.login .button-primary:active,
.login .button-primary:hover {
 background-color:#6a1026 !important;
 color: #fff;
 -webkit-border-radius: 3px;
 border: 0;
}
body.wp-core-ui .button-primary {
 box-shadow: none;
 text-shadow: 0 -1px 1px #6a1026, 1px 0 1px #6a1026, 0 1px 1px #6a1026, -1px 0 1px #6a1026;
 background: #9f2d48;
 border-color: #9f2d48;
}
body.wp-core-ui .button-primary:active {
 box-shadow: inset 0 2px 0 #6a1026;
}
body.wp-core-ui .button-primary:hover {
 background: #6a1026;
}

7. Zmiana wyglądu „zapomniałeś hasło”

Na przykładzie strony logowania dla ITB Vega link do odzyskania hasła był prawie niewidoczny. Dlatego i nad nim popracujemy:

body.login #nav a {
 text-decoration: none;
 color: #fff;
 opacity: 0.7;
}
body.login #nav a:hover {
 text-decoration: underline;
 color: #fff;
 opacity: 1;
}

8. Usunięcie pozycji ← Powrót do ITB Vega

Skoro już jesteśmy na ekranie logowania, to wejście nastąpiło świadomie.
Dlatego nie potrzebujemy linku do powrotu do strony głównej. Tym bardziej, że przecież mamy logo, które jest aktywnym linkiem do strony głównej.

body.login #backtoblog {
 display: none;
}

9. Przezroczyste tło formularza

Patrzę na zmiany i jedną rzecz jeszcze bym dodał. To taki smaczek sprawiający, że człowiek jest syty z zachwytu 🙂
Dodajemy delikatną przezroczystość oraz zaokrąglenie rogów tła formularza.

Zmieniamy wcześniej dodany kod:

body.login form {
 width: 320px;
 margin: 0 auto;
 text-align: center;
}

na:

body.login form {
 width: 320px;
 margin: 0 auto;
 text-align: center;
 background-color: transparent;
 background-image: url('form-bg.png');
 border-radius: 3px;
}

Plik form-bg.png to niewielki i prosty obrazek. Zawiera jednolity kolor z przezroczystością.
A czemu przezroczystość robimy obrazkiem, a nie właściwością opacity w stylach? Jeśli damy opacity w kodzie, to wszystkie elementy formularza staną się przezroczyste, ponieważ odziedziczą własność.
Wtedy całość strony logowania wyglądać będzie niezbyt ciekawie. Efekt będzie jakby za mgłą, a mi zależy, aby tylko tło przepuszczało częściowo galaktykę, lecz poszczególne elementy formularza mają być wyraźne. Dlatego obrazek tła dostał kolor biały z 50% przezroczystością.

10. Przezroczystość dla loginu i hasła

Po krótkim zastanowieniu zadecydowałem, że jednak dam małą przezroczystość, ale tylko dla pól loginu i hasła. Za bardzo te białe paski mnie gryzą. Wygląda, jakby wystawały z boksu logowania.

body.login input {
 opacity: 0.8;
}

I to już koniec dopieszczania. Teraz strona logowania do panelu administracyjnego WordPress’a wygląda znacznie przyjemniej. Życzę równie zacnych kreacji! 😉

A wpisem tym chciałbym zainaugurować nową serię odnośnie WordPress’a. Warto dzielić się wiedzą i doświadczeniem, czyli swoim warsztatem. Dzięki temu świat łatwiej się zmienia na bardziej przyjazny dla nas. Sam czerpię wiele pomocy z różnych źródeł, więc dokładam swoją cegiełkę tutaj.