Home Wordpress Cms Cambio logo WordPress

Wordpress Cms

Cambio logo WordPress

17 luglio 2013

2886

Personalizzare il pannello di controllo WordPress da codice è facile ed intuitivo. Vi illustrerò passo dopo passo le semplici procedure da apportare per poter cambiare vestre grafica all’interfaccia di login wordpress:

Istanziamo i filtri

Aprire il file functions.php presente all’interno del tema corrente (wp-content/themes/tuotema/functions.php) e piazzare il seguente codice a fine pagina, prima dei tag di chiusura php (?>):

function custom_login() {
   echo '';
}
add_action('login_head', 'custom_login');

function LOGIN_the_url( $url ) {
   return get_bloginfo( 'siteurl' );
}
function LOGIN_the_title( $url ) {
   return get_bloginfo( 'name' );
}
add_filter( 'login_headerurl', 'LOGIN_the_url' );
add_filter( 'login_headertitle', 'LOGIN_the_title' );

Gli hook, come dei veri e propri “uncini” permettono di agganciarci ed “intrometterci” nel ciclo di vita dell’applicazione ed in questo caso, poter modificare l’interfaccia grafica del pannello di controllo introducendo un file css.

Incorporare il foglio di stile su WordPress

A questo punto possiamo creare il file “login.css” e posizionarlo all’interno del tema corrente (wp-content/themes/tuotema/), successivamente possiamo all’interno incollare delle righe di codice che ci permetteranno di personalizzare la pagina al 100%:

/* NON MODIFICARE */
* { margin: 0; padding: 0; }
html { background: #efefef !important; }
body { padding-top: 30px; font-family: sans-serif; font-size: 12px; }
form { margin-left: 8px; padding: 26px 24px 46px; font-weight: normal; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #fff; border: 1px solid #e5e5e5; -moz-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; -khtml-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px; }
form .forgetmenot { font-weight: normal; float: left; margin-bottom: 0; }
.button-primary { font-family: sans-serif; padding: 3px 10px; border: none; font-size: 13px; 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; }
#login form p { margin-bottom: 0; }
label { color: #777; font-size: 14px; }
form .forgetmenot label { font-size: 12px; line-height: 19px; }
form .submit, .alignright { float: right; }
form p { margin-bottom: 24px; }
#login { width: 320px; margin: 7em auto; }
#login_error, .message { margin: 25px 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; float:right; }
#nav, #backtoblog { text-shadow: rgba(255, 255, 255, 1) 0 1px 0; margin: 0 0 0 16px; padding: 16px 16px 0; }
#backtoblog { padding: 12px 16px 0; }
body form .input { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; font-weight: 200; font-size: 24px; width: 97%; padding: 3px; margin-top: 2px; margin-right: 6px; margin-bottom: 16px; border: 1px solid #e5e5e5; background: #fbfbfb; outline: none; -moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); }
input { color: #555; }
.clear { clear: both; }
#pass-strength-result { font-weight: bold; border-style: solid; border-width: 1px; margin: 12px 0 6px; padding: 6px 5px; text-align: center; }
/* FINE NON MODIFICARE */

/*CUSTOM LOGIN*/
html { background:#eee !important; }
#login { width:800px; height:405px; margin:5em auto; }
h1{ padding:20px !important; }
h1 a{ background:url(../images/logo.png) no-repeat top left !important; width:250px !important; height:150px !important;text-indent:-9999px; padding:20px !important; overflow:hidden;padding-bottom:0px;display:block; float:left;}
#login form { background:none; border:none; border-radius:none; box-shadow:none; float:right; padding:25px; width:250px; height:370px; }
#login label { color:#000; font-weight:bold; }
#nav, #backtoblog { padding:0px 25px; float:right; clear:both; margin:0; text-shadow:none; }
#backtoblog { padding:10px 25px; }
.login #nav a, .login #backtoblog a { color:#333 !important; }
.login #nav a:hover, .login #backtoblog a:hover { color:#cc0000 !important;}