Transformer l’aspect de la page de connexion wp

Transformer l’aspect de la page de connexion wp

Dans ce petit mémo, nous allons voir comment personnaliser rapidement l’interface de connexion wordpress.

Dans notre fichier functions.php, on va d’abord faire appel à la feuille de style qui sera dédiée à l’interface de connexion de wordpress. Cette feuille de style, on va la créer et la placer au même niveau que le fichier style.css.

//fonction pour récupérer la deuxième feuille de style pour le login 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');

Voici la feuille de style que j’appelle ici style-admin-login :

/* 
    Document   : style_admin_login
    Created on : 5 oct. 2013, 23:07:09
    Author     : yuyazz
    Description: style pour l'admin login
*/



body.login div#login p#nav a,
body.login div#login p#backtoblog a {
    color: grey!important; /* Couleur du lien */
    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('img/2b.jpg');
  background-repeat: repeat; 
   background-attachment: fixed ;
   text-align: center

}

body.login div#login form#loginform  {
background-image:url('img/4.jpg');
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;
}

Et voici le rendu final de ma page de connexion

dashboardlogin

une autre:

dashboardlogin2

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.