WordPress Login-Bildschirm individualisieren (HowTo)

In diesem kurzen Tutorial erkläre ich euch in einfachen und hoffentlich nachvollziehbaren Schritten, wie ihr euer Standard-Login bei WordPress personalisieren und mit einem individuellen Style ausstatten könnt. Also „lets pimp my WordPress„.
Grundlage dieses Tutorials, in welchem das langweilige WordPresslogo beim Login durch euer eigenes ersetzt wird, ist die WordPress Version 2.5.X . Legen wir los.

1. Als erstes müsst ihr euch per FTP bei eurem WordPress-Server einloggen und dort im WordPress- Rootverzeichnis nach einer Datei namens login.css Ausschau halten. Die Datei, welche ihr in eurem „wp-admin/css“ Ordner findet, öffnet ihr darauf hin mit eurem favorisierten Editor. Notepad tut es in diesem Falle auch.

2. Habt ihr die login.css in eurem Editor geöffnet so macht euch auf die Suche nach folgenden Codeschnipseln:

background: url(../images/logo-login.gif) no-repeat;

und ändert es in den folgenden Code mit der Lokalität eures neuen Logos ab:

background: url(../images/YOURLOGO.gif) no-repeat;

Anm d. Autors: Das Logo, welches ihr in den Loginscreen einpflegen möchtet, sollte eine Breite von ca. 290px aufweisen, da ansonsten das komplette Layout „zerschossen“ und neu angepasst werden müsste.

3. Für alle diejenigen unter euch die sich etwas tiefer in den Sumpf des CSS-Urwaldes wagen möchten, sei an dieser Stelle kurz angemerkt, dass innerhalb dieser Datei das komplette Erscheinungsbild des Loginscreens verändert werden kann. Ich habe jedoch lediglich noch zusätzlich die Schriftart, auf Englisch font, passend zu meinem neuen Layout abgeändert. Probiert einfach mal ein bißchen rum. (Am besten jedoch vorher die original login.css irgendwo sichern und für ein Backup bereit heben)

Den Hintergrund des Loginpanels verändern

1. Hierzu müsst ihr als erstes die colors-fresh.css Datei, welche sich ebenfalls im wp-admin/css ordner befindet, in eurem „Lieblingseditor“ öffnen.

2. Sucht anschließend nach den ZWEI #eaf3fa Farbcodes innerhalb der Styledatei und verändert diese je nach Geschmack, in dem er sie durch andere „Farbalgorithmen“ ersetzt. Ich würde euch an dieser Stelle eine nicht all zu kräftige Farbgebung empfehlen und tendiere eher zu helleren und „ausgebleichten“ Farben, da die kräftigen Farbtöne zu sehr das Seitenbild dominieren würden. Wählt doch der Einfachheit halber am Besten die Hintergrundfarbe eures eigentlichen WordPressthemes aus. Das kann nie schaden.
3. Nur weil jetzt schon das Tutorial zu Ende ist, heißt das noch lange nicht, dass ihr hier schon die Individualisierung abschließen müsst. Im Gegenteil, probiert einfach so lange rum, bis euch der Loginscreen gefällt. Das HowTo sollte lediglich eine kleine Anregung zur Flucht aus dem WordPressalltag darstellen.
Wie auch schon zuvor erwähnt, solltet ihr jedoch bei der ganzen Individualisierungsarbeit aber nicht das vorherige Backup vergessen, denn wenn mal etwas daneben gehen sollte, seit ihr so in der Lage direkt wieder den Ausgangszustand wiederherzustellen.