Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
WordPress 2.7 steht vor der Tür und es gibt ein Update des Backend-Designs. Das sollte sich sicher rumgesprochen haben und hinzu kommt ein neuer Login-Bereich. Es wurde nur wenig geändert, aber der Anblick entspricht dem Design des neuen Backends.
Schon in der Vergangenheit habe ich beispielsweise im Artikel „WordPress 2.5 und Theme-definiertes Login“ für das Anpassen des Design an das Theme gesprochen. Aus meiner Sicht gehört es einfach zu einem Rundumpaket eines definierten Themes – ganz im Sinne eines Corporate Designs.
Ab der Version 2.7 ist damit das CSS ein wenig anders und wer den Login-Bereich ebenso anpassen möchte, dem zeige ich hier kurz wie es geht und hinterlege das CSS für ein Beispiel.
Stylesheet laden
Um das erstellte CSS für den Login-Bereich zu laden nutze ich eine kleine Funktion, die ich in der functions.php des jeweiligen Themes ablege und via Hook login_head im Login-Head integriere. So kann ich speziell für das Theme den Login definieren und beim Umschalten eines anderen Themes wird dann das andere Login-Design gezogen.
// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}
add_action('login_head', 'fb_custom_login');
Die Stylesheet-Datei heißt dabei custom-login.css und liegt innerhalb des Ordner custom-login im Ordner des Themes.
Das Stylesheet
Wie schon angesprochen ein kleines Beispiel, was aber die Klassen und IDs des Login-Bereich enthält und so das Anpassen ein wenig erleichtert.
html {
background-color: #fff;
}
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}
Soweit zum Beispiel, welches nur eine Möglichkeit der Anpassung darstellt. Hierbei sind den Künsten in der Anwendung von CSS keine Grenzen gesetzt.
Aus meiner Sicht in die Nutzung der Firebug Erweiterung für die Analyse unerlässlich und es empfiehlt sich damit zu arbeiten, wenn man diese noch nicht nutzt.
