Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

Pour en finir avec la page de connexion tristounette de WordPress voici comment faire, avec un peu d’astuce et avec votre thème enfant, une superbe page qui sera à la fois design et à votre image.

La solution proposée ici provient de plusieurs sources, j’ai recomposé ce qui m’intéressait.

Ici on passe par le fichier functions.php du thème enfant de votre site. J’utilise systématiquement un thème enfant pour pérenniser mes CSS et autres aspects graphiques des thèmes que je réalise d’après des thèmes source (Premium ou non). Je conseille toujours de passer par un thème enfant.

Avec le code présenté on ajoute dans le Head de la page de login WordPress une feuille de styles qui personnalise les éléments standards de cette page. Les images sont placées dans un dossier « images » du thème enfant.

Les noms des images sont standardisés :

  • fond_admin.jpg
  • logo_admin.png

On y retrouveras 2 images pour les pictos présents dans les champs de login et password du formulaire de connexion. J’ai testé une solution avec une typo mais il est impossible d’embarquer des CSS complexes dans un fichier PHP.

Vous trouverez 3 fichiers dans l’archive zippée proposée en bas de cet article :

  • 1 fichier functions.php tout prêt à personnaliser
  • 1 fichier .txt avec le code à coller dans votre fichier functions.php si déjà utilisé
  • 1 dossier avec les 2 pictos .pbg transparent 24bit (couleur #445152)

Vous pouvez les éditer avec Photoshop pour en changer la couleur selon vos besoins.

Personnaliser les dimensions du logo

Les seules modifications à apporter (au minimum) sont la largeur et la hauteur de votre fichier logo (nommé logo_admin.png), les valeurs sont à placer dans les lignes commentées comme ceci :

width: 200px;    /* CHANGER LONGUEUR LOGO */
height: 75px;    /* CHANGER HAUTEUR LOGO */

Le reste des styles détermine la couleur du fond du formulaire (rgba), les paddings de cette zone « body.login » pour rapprocher ou éloigner le bloc formulaire du haut de la page.

Un effet de fondu en ouverture dure 2 secondes pour faire apparaître le formulaire, un autre de 0,2 seconde fait un mini zoom au survol du formulaire avec la souris (transform: scale(0.99); -> (1)).

Les couleurs du bouton dans on état inactif et au survol sont personnalisables, ainsi que les liens « Mot de passe oublié ? » et « Retour au site… ».

L’image fond doit avoir 1200 pixels de large au minimum (800 à 1000 px de haut), il faut l’optimiser pour éviter un temps de chargement trop présent.

A vous de voir… bonne utilisation.

Cet article a 1 commentaire

  1. Mais c’est tout simplement génial ce truc !! Merci momo !!! 🙂

Laisser un commentaire

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

Fermer le menu