Wer mit WordPress arbeitet der kennt schon längst die langweilige Login Seiten die dieses CMS für uns bereit hält.

Nun gibt es viele Plugins auf dem WordPress Markt, mit dem man dann auch diese Login Seite stylen kann. Ich persönlich finde die Erfindung von Plugins ja eine gute Sache – vor allem wenn man neue Funktionen in WordPress integriert haben möchte – aber wenn man nur einfache CSS Arbeiten machen müsste – finde ich so Plugins nur überflüssig.

Und heute zeige ich euch wie man mit wenigen Befehlen eine Login Seite designt wie diese hier:

Dazu brauch ihr eigentlich nur ein Text Editor und ein FTP Client. Die ganze Designarbeit ist eigentlich ganz einfach und wer einigermassen sicher ist mit diesen Tools, der kann es ohne Probleme versuchen. Denkt einfach immer daran – macht zuerst ein schönes Backup von eurem Theme / Childtheme!!

Als erstes müsst ihr in den function.php Files einen Eintrag machen, mit dem definiert ihr ein eigenes CSS File für die Loginseite.

1
2
3
4
5
6
7
8

/*================================================
#3 Eigene Login Seiten Design
================================================*/
function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/admin/admin-login.css" />';
}
add_action('login_head', 'my_custom_login');

Sobald ihr das gemacht habt, erstellt ihr in eurem Theme / Child Theme Ordner einen neuen Order genannt admin und darin erstellt ihr eine CSS Seite mit dem Name admin-login.css.

Wenn ihr das gemacht habt, müsst ihr nun nur noch dieses .CSS File editieren und die Loginseite wird schön designt.

Solltet ihr Bilder verwenden wie für den Hintergrund oder neues Logo Bild, dann legt es auch in den Admin Ordner ab. In meinem Beispiel habe ich 2 Files und zwar einmal beach.jpg (Bildschirmhintergrund) und logo.png mein Beispiel-Logo.

Mit diesem Code definiert ihr nun das Hintergrundbild und zwar responsive.

1
2
3
4
5
6
7
8
9

Body.login
{
 
background: url(beach.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Wenn ihr kein Logo wollt, dann gebt diesen Code ein:

1
2
3
4
5
6

/*
LOGO deaktiviert
*/
#login h1 a {
display: none;
}

Wenn ihr gerne ein Logo habt, dann benützt diesen Code und editiert natürlich auch das Bild.

1
2
3
4
5
6
7

/*
Mit eigenem Logo
*/
#login h1 a {
background-image: url("logo.png");
background-size: 75px;
}

Mit diesem Befehl könnt ihr dem Login Formular eine eigene Farbe geben. Denkt daran ihr habt 2 Container dafür zu verfügung. Und ihr müsst jetzt eigentlich nur die RGB Farben anpassen und die Durchsichtigkeit – ich werde beide Zeilen mit einem /* <-==== */ markieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/*
FORM Body
*/
.login form{
box-shadow:none;
padding:20px;
}
#login {
background: rgba(255, 255, 255, 0.3); /* <-==== */ 
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color: #555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}
 
#loginform {
background: rgba(255, 255, 255, 0.4); /* <-==== */ 
}

Nun könnt ihr noch die Farbe der Buttons designen und zwar in dem ihr den Hintergrund (background) wie auch die Randfarbe (border-color) und den Schatten (box-shadow) anpassen könnt. Ebenfalls sind diese 3 Zeilen mit einem /* <-==== */ markiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*
FORM BUTTON
*/
#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background: #fdb932; /* <-==== */ 
border-color:#fdb932; /* <-==== */ 
box-shadow: 0 1px 0 #fdb932; /* <-==== */ 
color: #FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}

Ihr seht es ist eigentlich gar nicht mal so schwer, einer WordPress Installation eine schöne Login Seite zu verpassen. Wem das jetzt aber zu schnell ging, für den habe ich noch ein Video gemacht wo ich den ganzen Prozess auch Schritt für Schritt erkläre und euch zeige.

Video Anleitung