theme-wordpress

En regardant dernièrement les statistiques de mon blog, je me suis aperçu que pas mal de requêtes concernaient la modification du CSS d’un blog WordPress. En d’autres termes, comment modifier la feuille de style pour donner un visuel particulier à son blog. En effet, la feuille de style va avoir pour conséquence de donner une apparence propre à son thème. Il ne faut surtout pas confondre avec les fichiers templates (index.php, single.php, sidebar.php, etc…) qui eux, servent d’ossature à votre blog.

Tout simplement, un thème wordpress est composé d’une feuille de style (qu’on nomme souvent CSS) qui va donner le visuel de mon blog (couleurs de la page, des liens, des polices, largeur de la sidebar, etc…).

Première question : Où se trouve la feuille de style ou fichier CSS ? Je vais vous indiquer la marche à suivre lorsque vous travaillez sur votre espace d’administration (car on peut aussi y arriver en allant directement sur le fichier concerné qui est sur votre disque dur, faire la modif, et ensuite l’uploader via FTP). Avant de commencer, je m’adresse bien sûr aux personnes débutantes et qui désirent mettre les mains dans le cambouis ;)

Pour modifier votre fichier CSS, aller sur Tableau de bord->Apparence->Editeur de thème->feuille de style (style.css).

Voilà, vous y êtes. Pour ce premier billet, je vais vous montrer les endroits importants de votre feuille de style. On peut déjà repérer dans votre fichier CSS : #page , #header (l’entête), #content (l’article), #footer (pied de page), #sidebar.

Nous allons aujourd’hui voir comment définir la dimension des différents éléments de votre blog.

Selon le croquis ci-dessus, je désire un blog d’une largeur de 700px, avec un header et un footer d’une hauteur de 200px, d’une sidebar d’une largeur de 300px et de 400px de largeur pour mes articles et pages.

Dans votre feuille de style, vous allez indiquer :

  1. #page {
  2. width: 700px; -> on définit la largeur du corps de votre blog
  3. }
  4.  
  5. #header {
  6. width: 700px; -> on définit la largeur de l'entête qui est généralement la même que le corps
  7. height: 200px; -> on définit la hauteur de l'entête
  8. }
  9.  
  10. #content {
  11. float: left; -> ce bloc se situe sur la gauche
  12. width: 400px; -> on définit la largeur
  13. }
  14.  
  15. #footer {
  16. width: 700px; -> on définit la largeur du pied de page qui est généralement la même que le corps
  17. height: 200px; -> on définit la hauteur du pied de page
  18. }
  19.  
  20. # sidebar {
  21. float: right; -> ce bloc se situe sur la droite
  22. width: 300px; on définit la largeur de la sidebar
  23. }

Voilà, c’est terminé, enregistrez votre feuille de style, et allez voir ce que cela donne. C’est tout pour aujourd’hui, je ne veux pas vous saouler ;) On verra la prochaine fois comment on peut modifier les couleurs de son blog WordPress : fond de page, sidebar, header, footer, titre, texte, liens…

David LOUIS

Directeur chez Webset, Organisme de formation professionnelle pour les métiers de la culture, du spectacle vivant, Consultant web 2.0, adepte du DIY et du Coworking

More Posts - Website - Twitter - Facebook

Articles similaires

  • CSS WordPress Débutant : couleur du texte15 décembre 2008 -- CSS WordPress Débutant : couleur du texte (17)
    Premier point : ce billet s'adresse aux débutants. Nous allons voir tout simplement comment modifier la couleur du texte, les titres de la sidebar et le footer. Pour celles et ceux qui arrivent en cou...
  • CSS WordPress : modifier les couleurs de son blog #114 novembre 2008 -- CSS WordPress : modifier les couleurs de son blog #1 (31)
    Dans l'article précédent, nous avons vu comment redimmensionner les différents blocs de notre blog WordPress.Aujourd'hui, nous allons voir comment modifier la couleur de nos blocs (fond, titre du bl...
  • Mon premier thème wordpress5 septembre 2008 -- Mon premier thème wordpress (0)
    Et voilà aujourd'hui, j'ai réalisé mon premier thème pour Ragingyul.com. Des modifications dans les templates et le CSS, et le tour est joué ! ^^ Qu'en pensez-vous pour un premier jet ?...