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 :
-
#page {
-
width: 700px; -> on définit la largeur du corps de votre blog
-
}
-
-
#header {
-
width: 700px; -> on définit la largeur de l'entête qui est généralement la même que le corps
-
height: 200px; -> on définit la hauteur de l'entête
-
}
-
-
#content {
-
float: left; -> ce bloc se situe sur la gauche
-
width: 400px; -> on définit la largeur
-
}
-
-
#footer {
-
width: 700px; -> on définit la largeur du pied de page qui est généralement la même que le corps
-
height: 200px; -> on définit la hauteur du pied de page
-
}
-
-
# sidebar {
-
float: right; -> ce bloc se situe sur la droite
-
width: 300px; on définit la largeur de la sidebar
-
}
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…
18 comments
Romain says:
mar 6, 2009
Eh bien merci, je vais essayer ça ! Ca manque de largeur chez moi
David says:
mar 9, 2009
Salut Romain, Tiens moi au jus
Romain says:
avr 8, 2009
Salut, je repasse pour donner quelques news.
Rien de super constructif, m’enfin.
Avec mon ancien thème, à savoir Massive News, je n’ai pas réussi à changer la largeur. J’ai le sentiment que ce thème ne gère pas ça.
Et sur le nouveau, Magazeene, je n’ai pas encore essayé, mais ça ne saurait tarder.
Quoiqu’il en soit, j’ai l’astuce en favo.
A bientôt !
lau says:
août 21, 2009
hello,
j’essaie de faire un site sur la base d’un vdmlike,
mais je n’arrive pas à modifier la largeur de la page ! avez vous une idée ???
merci par avance !
CSS WordPress : modifier la feuille de style pour déterminer les tailles de vos blocs says:
sept 23, 2009
[...] the original: CSS WordPress : modifier la feuille de style pour déterminer les tailles de vos blocs Comments0 Leave a Reply Click here to cancel [...]
Serial Blogueur says:
nov 26, 2009
Excellent cet article, pour moi qui suit un grand fada de WP ! Merci
loze says:
nov 30, 2009
Mais c’est payant !?!?!!
Tableau de bord->Apparence->
là moi j’ai: thèmes/widgest/extra/modifier css
Et à ‘modifier css’ je ne peut pas enregistrer de modifications:
« If you would like the ability to save your changes and make your design visible to the public, please purchase the Custom CSS Upgrade »
Aperçu: vous devez acheter la Mise à Jour de Personnalisation CSS pour sauvegarder vos modifications
Merci de le préciser…
Je m’aperçois de ça après 3 articles et quelques heures (de perdu) a comprendre comment fonctionne wordpress, quel déception.
David says:
nov 30, 2009
Ton blog ne serait pas hébergé pas WordPress ?
loze says:
nov 30, 2009
Effectivement…
Merci David
Peignonslagirafe says:
jan 6, 2010
À quand un autre papier sur le Css ??? Pour plus d’explication…
Peignonslagirafe.com
David says:
jan 6, 2010
Salut Peignonslagirafe.com, tu aimerais aborder quel sujet en Css ?
Peignonslagirafe says:
jan 6, 2010
Alors,
Merci pour la réponse rapide !
jai du mal à faire le lien entre tes codes, et ce qui apparait dans ma page.
Admettons que je veuille écrire quelque chose en haut (à la manière de ton Blogityourself.net) par exemple rajouter un .COM dans une police différente après mon « peignonslagirafe ».
De même dégager en haut les » * Entrées (RSS) * Commentaires (RSS) « …
Géraldine says:
mar 23, 2010
Bonjour, est-ce que les mêmes manips marchent avec l’outil Mise à Jour de Personnalisation CSS qu’on doit acheter quand on a un blog sur worpress.com? Je cherche à confirmer l’info avant de me lancer. Et aussi : merci pour ces tutos bien faits !
Jakes says:
avr 19, 2010
Bonjour,
J’aimerais savoir comment, a partir de la feuille CSS par défaut du blog WordPress, modifier uniquement la largeur des barres gauches et droites.. Que dois je modifier dans la fiche d’origine ?
Merci beaucoup
Comment modifier un thème wordpress ? | davidlouis.fr says:
déc 13, 2010
[...] CSS WordPress : modifier la feuille de style pour déterminer les tailles de vos blocs [...]
titac says:
juil 31, 2012
Bonjour,
serait-il possible de réuploader les croquis car ce tuto m’intéresse
Merci d’avance
pyrausta says:
mai 22, 2013
Bonjour
Je suis sur la plateforme apln qui utilise certains thèmes de WP .Je ne parviens pas à trouver la feuille CSS de « Picolight ».Je suis allée sur Apparences /thèmes/ et ça s’arrête là car il n’ y a pas de feuille CSS..Je vois que le post date de quelques années…
Lesage says:
jan 23, 2014
Bonjour, j’ai fais comme indiqué et je me retrouve avec mes blocs dans tout les sens, ils se sont déplacés sur ma page, je voudrais juste agrandir la largeur de ma page pour avoir plus d’espace pour mes écritures?
Auriez vous des solutions ?