Changer l’aspect de la page login par défaut

Changer l’aspect de la page login par défaut

Dans ce petit mémo, nous allons voir comment on peut modifier la page de connexion de son site wordpress. Dans son fichier functions.php, insérez la fonction suivante d’appel à un nouveau fichier de style, propre à l’admin :

function my_login_stylesheet() {
    ?>
    <link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo('stylesheet_directory') . '/style_admin_login.css'; ?>" type="text/css" media="all" />
    <?php
}

add_action('login_enqueue_scripts', 'my_login_stylesheet');

Ensuite créez la page style_admin_login.css et à partir de cette base, modifiez à souhait !!!

body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: grey!important; /* Your link color. */
    background-color:black;
}
body.login {
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:grey;
	background-color: black;

  background-image: url('images/legumes.jpeg');
  background-repeat: repeat; 
   background-attachment: fixed ;
   text-align: center

}

body.login div#login form#loginform  {
background-image:url('images/dore.png');
width:300px;
height:200px;
color:grey;
}

body.login div#login p#nav {
    color:white;
}
body.login div#login p#nav a {
    font-size: 10px;
    color:blue;
}

body.login div#login p#backtoblog {
    display:none;
}

.login .message {
display:none;
}

.login h1 a{
    width:300px;
}

On peut aussi insérer son propre logo en lieu et place du ‘W’ traditionnel, qui flotte au dessus du formulaire de connexion

function interface_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'media/dore.png' , __FILE__ ); ?> );
           background-size: 200px;
            height: 200px;
            width: 300px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'interface_login_logo' );

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.