WordPress-Custom-Login nach Frank Bültge

Manchmal will man den WordPress-Look beim Login durch einen anderen Look (zum Beispiel den eines Kunden) ersetzen.

Diese Methode eine Lösung, Frank Bültge hat sie geschrieben. Folgende Zeilen müssen in die functions.php des Themes:

[php]// Custom-Login nach Frank Bueltge bueltge.de/wordpress-27-login-design-anpassen/846/
// modifiziert nach themeshaper.com/forums/topic/bloginfotemplate_dire…
function fb_custom_login() {
echo ‚<link rel="stylesheet" type="text/css" href="‘ . get_bloginfo(’stylesheet_directory‘) . ‚/custom-login/custom-login.css" />‘;
}
add_action(‚login_head‘, ‚fb_custom_login‘);[/php]

Der Script-Schnipsel tut nichts anderes, als die Login-Seite eine andere CSS beizugeben. Normalerweise wird die wp-admin>css>login.css angesprochen; Frank Bültges Skript sagt WordPress jetzt, es solle stattdessen im Sylesheet-Ordner des Themes den Ordner „custom-login“ suchen und darin die custom-login.css – die muss man natürlich anlegen. Für G/R Grafik und Redaktion sieht sie so aus:

[css] html{
background-color:#fff;
}
body{
padding-top: 30px;
font: 11px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}
form{
margin:20px 0 20px 0;
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
background: #fff;
border-radius: 5px;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-khtml-box-shadow:none;
box-shadow:none;
/*    -moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border: 1px solid #808080;
-moz-box-shadow: rgba(0,0,0,1) 0 4px 18px;
-webkit-box-shadow: rgba(0,0,0,1) 0 4px 18px;
-khtml-box-shadow: rgba(0,0,0,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px; */
}
form .forgetmenot{
font-weight: normal;
float: left;
margin-bottom: 0;
}
.button-primary{
color:#cc0000;
font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
padding: 3px 10px;
border: none;
font-size: 12px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
cursor: pointer;
text-decoration: none;
margin-top: -3px;
}

input.button-primary, button.button-primary, a.button-primary {
background: #000 repeat-x scroll left top;
border:none;
color:#FFFFFF;
font-weight:bold;
text-shadow:none;
}

input.button-primary:active, button.button-primary:active, a.button-primary:active {
background: black url(../images/button-grad-active.png) repeat-x scroll left top;
color:#EAF2FA;
}

.button:active, .submit input:active, .button-secondary:active {
background:url(../images/white-grad-active.png) repeat-x scroll left top #EEEEEE;
}

#login form p{
margin-bottom: 0;
}
label{
color: #777;
font-size: 13px;
}
label br:before{
content: "?";
}
form .forgetmenot label{
font-size: 11px;
line-height: 19px;
}
form .submit,.alignright{
float: right;
}
form p{
margin-bottom: 24px;
}
h1 a{
background: url(../images/login-logo.png) no-repeat top center;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
.login #nav a, .login #nav a:hover {
color:#000!important;
text-decoration:none;
text-shadow:none
}
#backtoblog{
display:none
/*    position: absolute;
top: 0;
left: 0;
color:#ececec;
border-bottom: #080808 1px solid;
background: #3a3a3a;
background: -moz-linear-gradient(bottom,#3a3a3a,#080808);
background: -webkit-gradient(linear,left bottom,left top,from(#3a3a3a),to(#080808));
height: 30px;
width: 100%; */
}

#backtoblog a{
color:#aaaaaa!important;
text-decoration: none;
display: block;
padding: 8px 0 0 15px;
}
#login{
width: 320px;
margin: 7em auto;
}
#login_error,.message{
margin: 0 0 16px 8px;
border-width: 1px;
border-style: solid;
padding: 12px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#nav{
margin: 0 0 0 8px;
padding: 16px;
}
#user_pass,#user_login,#user_email{
font-size: 24px;
width: 97%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
}
input{
color: #555;
}
.clear{
clear: both;
}
input.button-primary:hover,button.button-primary:hover,a.button-primary:hover,a.button-primary:focus,a.button-primary:active{
background: black url(../images/button-grad-rot.png) repeat-x scroll left top;
border-color: red;
color: white;
}[/css]