Comment centrer en 1 action le logo de son site WordPress via le CSS? (tuto)


Partager sur les réseaux sociaux:

Article mis à jour le

Temps de lecture : 2 minutes

 

wordpress, Comment centrer en 1 action le logo de son site WordPress via le CSS? (tuto), @patrickjamesnc, @patrickjamesnc

 

Avant de commencer, autant vous dire que cela a été galère.

En recherchant sur Google comment centrer via un code CSS le logo du blog, j’ai trouvé de très nombreux codes, idées ou indices, mais rien de réel et de concret.

Concrètement, cela ne faisait rien. Et pourtant, j’ai en testé beaucoup! :/

Je suppose que cela doit jouer selon son thème ou la version de WordPress.

 

J’ai enfin trouvé un code qui le permet! Et, bien sûr, je vous le partage de cet article! 🙂

 

Où insérer son code CSS pour centrer le logo de son site WordPress?

Commençons par le début.

Un code CSS est un petit bout de code à copier / coller afin de demander à WordPress de faire quelque chose.

C’est une solution simple et rapide, pour le peu, comme moi, que le code fonctionne.

Le code CSS est à insérer, de façon simple, dans le menu personnalisation de son thème.

  • Allez dans le tableau de bord de votre site WordPress
  • Allez dans l’option “Apparence”
  • Cliquez sur “Personnaliser”

Une nouvelle page avec les options de personnalisation de votre thème apparait.

Ouvrez l’option CSS qui peut s’appeler “CSS personnalisé” ou “Custom CSS”

 

Le code CSS à insérer pour centrer le logo de votre site WordPress

C’est dans la zone de texte à ajouter que vous devrez copier puis coller le code suivant:

 

[su_pullquote]#logo { display:block;
max-width: 450px;
margin: 0 auto;
width: 100%;
}[/su_pullquote]

 

 

 

 

Cliquez sur “Publier” et baaammm magie!

Votre logo est centré! Victoire!

 

wordpress, Comment centrer en 1 action le logo de son site WordPress via le CSS? (tuto), @patrickjamesnc, @patrickjamesnc

 

 

Précisions

Les valeurs “max-width” et “width” peuvent être modifiées à volonté!

Les valeurs inscrites dans le code que je vous donne sont celles utilisées pour le logo du blog.

Vous pouvez aisément les modifier pour agrandir ou au contraire réduire la taille du logo.

N’hésitez pas à tester pour trouver le meilleur compromis!

 

 

 

Venez me dire si cela vous a aidé dans l’espace des commentaires et à me partager vos retours!

Pensez à partager aussi cet article, merci de m’avoir lu!

 

– Patrick –

Partager sur les réseaux sociaux: