Fran6art 13 ans de blogging par Francis Chouquet

Création Thème WordPress | Tutorial #19: CSS: placement des différentes parties du thème

0

Ce tutoriel est le dix-neuvième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Aujourd’hui, on va commencer à remplir notre feuille de style pour que notre thème ressemble à quelque chose de lisible… Dans un premier temps, on va uniquement se concentrer sur l’organisation du thème. On va juste définir quelques attributs principaux pour avoir nos blocs placés comme il le faut. Par la suite, on regardera l’habillage de plus près. Pourquoi ? Parce que je pense qu’il est toujours difficile de savoir si les choses sont les bonnes quand on a du mal à visualiser ce que ça va donner.

On va donc donner des attributs aux principales « boîtes » du thème que sont le « body », la « page », le « header », le « content », la « sidebar », et le « footer »: (il est pas « design » mon plan ? ;-))

Plan-Theme

Attributs pour l’élément « body »:

Tout d’abord, on va définir des attributs simples pour la balise « body », cette balise qui enveloppe l’ensemble de notre thème. Tant que vous ne changerez rien à un niveau plus précis de votre thème, ce sera les attributs de la balise « body » qui seront utilisés.

Ouvrez donc votre fichier style.css que l’on a créé au début des tutos, et sous la présentation du thème, insérer le code suivant:

1 2 3 4 5 6 7 8 
body { font-family: Lucida Grande, Arial, Helvetica, Sans-serif; font-size: 0.8em; text-align: left; background: #ffffff; color: #006699; margin: 0; }

Alors, ici on va définir la famille de polices (font-family) qui va être utilisée pour l’affichage de votre blog. J’ai choisi la police « Lucida Grande » car je la trouve très sympa et moderne. On lui définit une taille de 0.8em, petite taille mais très esthétique. On choisit l’unité em et non pixels car certains navigateurs ne permettent pas encore d’agrandir ou de réduire des tailles en pixels. Et pour les mal-voyants, c’est plus intelligents de noter les unités en em, qui est une unité relative. Ensuite, on décide d’aligner le texte à gauche, plus facile pour la mise en page, un fond blanc (#ffffff) et une police noire (#000000).

Enregistrez votre feuille de style et allez voir dans le navigateur ce que ça donne. Vous pouvez d’ores et déjà commencer à vous amuser avec les CSS !

Attributs pour l’élément « page »:

Retournez sur la feuille de style et insérez le code suivant, pour l’élément « page »:

1 2 3 4 
#page { margin: 0 auto 0 auto; width: 750px; }

Ici, on va définir une largeur pour le blog. J’ai choisi 750 pixels, qui est une largeur normale, voire standard pour un blog avec une colonne en sidebar. La marge est de 0 en haut et en bas, et on définit une marge « auto » pour la gauche et la droite. Ca va permettre de centrer le blog au milieu de la page web.

Enregistrez votre document et allez voir ce que ça donne sur votre navigateur. Ca commence tout doucement à prendre forme !

Attributs pour l’élément « header »:

Insérez le code suivant dans votre feuille de style:

1 2 3 4 5 6 7 
#header { font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif; float: left; background:#cccccc; width: 750px; padding: 0 10px 20px 10px; }

Ici, on s’amuse un peu à donner une police différente aux éléments du header, à mettre une couleur de fond différente (ici un gris terne #cccccc) et à positionner le contenu du header à l’intérieur, et non plus sur les bords. Pour cela on donne un padding en bas de 20px et à gauche de 10px. Pareillement, histoire de décoller le header du contenu, on donne une petite marge de 10 pixels en bas.

Enregistrez le tout et rafraîchissez l’ensemble, votre thème a encore changé ! Bon, c’est sympa tout ça mais maintenant, vous aimeriez placer vos éléments de contenu.

Attributs pour les éléments « content » et « sidebar »:

Insérez le code suivant sous les attributs du header:

1 2 3 4 5 6 7 8 9 10 
#content { float: left; width: 500px; margin-bottom: 20px; }   .sidebar { float: right; width: 250px; }

Ici, on rentre dans le vif du sujet des feuilles de style. Le blog fait 750 pixels de large. On va attribuer une largeur au contenu et à la sidebar, qui, additionnées, devront être égales à la largeur du blog, de la « page » et du « header ». Ici, j’ai fixé ces dimensions à 500 pixels de largeur pour le contenu et 250 pour la sidebar. Et puis, on va positionner le contenu à gauche, donc « float: left ».

Pour ce qui est de la sidebar, on la positionne à droite, donc « float:right ».

N’oubliez pas d’enregistrer le fichier et de voir ce que ça donne sur votre navigateur. Et oui ! Maintenant, votre blog ressemble à un blog !! C’est pas encore le top mais ça prend forme ! On va terminer avec les attributs du footer:

Attributs pour les éléments « content » et « sidebar »:

Insérez le code suivant sous les attributs précédents:

1 2 3 4 5 6 7 
#footer { font-size: 1em; background:#cccccc; padding: 10px 10px 0 0; clear: both; width: 740px; }

Ici, on va avoir des informations qui ont parfois besoin d’une mise en page un peu différente. J’ai donc choisi une taille de texte différente, je lui ai donné une couleur de fond identique au header pour « fermer » le blog. Je lui ai également donné quelques marges et un peu de padding pour bien positionner le texte à l’intérieur de bloc, et j’ai introduit un « clear:both » qui va venir positionner le blog sous les autre blocs, quelque soit leur positionnement. C’est un peu comme un retour à la ligne. Et puis, on le positionne en partant de la gauche de l’élément « page ».

Allez donc voir un peu ce que ça donne !

Votre blog n’est pas encore très joli mais au moins il ressemble à un blog. Voici une copie d’écran de ce que vous devez avoir:

Creation Theme

Dans les prochains tutoriels, on va continuer la mise en page, de manière simple, avant de rentrer dans la customisation plus personnalisée. Mais déjà, là, vous avez les bases pour commencer à tirer profit de votre thème. Vous pouvez commencer la customisation, tenter des trucs pour vous familiariser avec l’organisation du thème mais aussi avec les CSS !

Tutoriel n°20: « Customisation du header et du contenu »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

205 Commentaires

  • Isabelle

    super ça fonctionne !! merci beaucoup ! 🙂

    y’a pas de problème. pour le temps perdu… j’aime bien les casses-têtes…

    🙂

    ciao !

    zsa 😀

  • En fait…moi aussi j’aime bien les casses-têtes !!! 😀 Surtout avec les CSS !! Des fois, t’as l’impression d’avoir tout bien fait et puis non, ça ne fonctionne pas… C’est pour ça que je trouve que c’est important de tout faire soi-même parce que sinon tu n’as pas toutes les cartes en main pour corriger le problème… En tout cas, ouf, un problème en moins !!!! 😉 Bon WE !

  • francis j’ai le meme probleme que manu
    http://img528.imageshack.us/img528/3278/wpxm5.jpg
    est ce possible que tu m’envois les fichiers comme ça je compare et je trouve l’erreure,
    merci d’avance

  • C’est bon, je viens de te les envoyer !! 😉

  • merciiiiiii bcp je vais essayer ce soir

  • Manu

    Tu as sans doute un fin de div en trop dans index, page et single.php 🙂

  • Notez que j’ai modifié le tuto au niveau du CSS du footer, il faut enlevez le float:left… 😉

  • Bon, même problème qe Manu et digitalium. J’ai beau chercher mon de trop et rien. Quelqu’un sait m’envoyer les fichiers? 😀 Merci

  • Fred > Tu pourrais me faire un zip de ton thème et me l’envoyer via le formulaire de contact ? Je vais regarder ça, y a peut-être un problème dans les tutos… Je t’envoie les fichiers en retour, OK ?

  • Salut Francis 🙂

    J’ai suivi tout ton tuto a la ligne mais je me retrouve avec le meme problème que les commentaire précédants 🙁

    Ma sidebar est en bas et a droite. En haut j’ai deux articles qui sont joint l’un a coté de l’autre 🙁

  • Isabelle

    j’ai eu ces problèmes là à cause que les fermetures de div n’étaient pas à la bonne place. c’est pas évident…

  • Isabelle

    euh.. j’ai fait code pourtant..

  • Laisses tomber Isabelle, je crois que WordPress n’aime définitivement pas le code… Tu pourrais me l’envoyer par email et je le posterai ? Sinon, j’ai reçu les fichiers de Fred, donc je vais regarder d’où vient l’erreur …;-)

  • Salut à tous,

    Fred m’a gentiment envoyé ses templates et j’ai donc pu regarder de plus près. Il y avait un problème de div dans l’index. Les div étaient mal fermées. J’ai donc regardé de plus près les tutoriels qui parlent du loop et c’est vrai que c’est peut-être ambigu. En fait, il n’y a pas d’erreur en soi, mais si vous ne « voyez » pas l’architecture du template, vous pouvez faire des erreurs. Il faut bien penser à fermer les div juste derrière leur contenu. Et chez Fred, par exemple, toutes les div du loop se fermaient avant la sidebar et la div page n’était pas fermée.

    Je vous laisse donc ci-dessous la bonne version de l’index, avec les fermetures de div aux bons endroits et je vais réfléchir soit à reformuler certaines phrases des tutos du loop, soit à proposer chaque fichier une fois qu’il terminé pour que vous puissiez valider votre code…

    Fichier Index à utiliser en cas de problème

    C’est vraiment très important que vous vérifiiez bien que chacune de vos div soit bien fermée et au bon endroit. Tenez-moi au courant pour voir si ça va mieux…;-)

  • Merci 😀 La ca fonctionne a merveille 🙂

    Merci encore du temps que tu passe pour faire ce tuto 🙂

  • De rien Fred ! C’est pas grand chose en fait…

  • merci bcp francis oouf enfin 😉

  • Liquid_sky

    bonjour, je suis le tuto depuis le début et a la lettre mais a cette étape j’obtient ceci : http://img382.imageshack.us/im.....lmevd3.gif

    je pense que le problème vient du template et non du css mais a vrai dire j’en sais rien du tout ^^

  • Liquid_sky

    [edit]: ha c bon j’ai copier l’index fourni par francis et tput refonctionne, vraiment pas facile ces templates, vive le css !!

  • Bonjour,

    il semblerait que le clear: both ne soit pas interprété par IE6 … mon template reste coller à gauche mais ne se centre pas.

  • Many > normalement c’est la marge 0 auto qui va centrer ton thème… 0 en haut et en bas et « auto » de chaque côté. le clear both, c’est pour avoir le footer sous les deux div précédentes.

  • Ah oui, une fois de plus j’ai voulu aller trop vite dans ma lecture ^^

    Mais le problème subsiste. Mon template reste aligner à gauche et j’ai une marge tout en haut du header.

    Je vais essayer de jouer sur pas mal de truc pour voir d’où ça vient. Vive IE6 🙁

  • Many > T’as récupéré le fichier index que j’ai mis en téléchargement un peu plus haut ?

  • Non. J’ai déjà bien vérifié mes div pourtant. J’ai même passé la validation. Je vais essayé avec ton fichier index.php et je te tiens au courant.

  • Bon, ça fonctionne avec ton fichier index. Ce qui veut dure qu’il y a vraiment un truc que j’ai zappé dans le mien. Ca m’intrigue parce que j’ai passé la validation lol.

    Merci en tout cas 😉

  • Many > C’est que tu avais mal placé les div de fermeture sûrement. Ce genre de choses ne t’empêches pas de passer la validation.

  • Zenein

    Bonjour, voila j’ai suivi tout les tuto a la lettre, j’ai passer la validation et tout aller bien jusqu’au moment ou il a fallu passer la sidebar a droite ! La impossible !
    Je suis un Newbie de chez newbie, je m’étonne même de savoir que j’ai pu en arriver jusqu’ici d’ailleurs !

    J’ai donc vérifier si toute les balises «  » étaient bien fermer partout, elle le son, après pour savoir si elles le sont au bon endroit, j’aurais besoin d’un petit coup de main ^^

    Merci du coup de main si il est encore possible vu que j’ai pris le train des tutos en retard 🙂

  • Zenein

    Je parlais bien sur des balises div, et pour compléter ma sidebar reste bêtement en bas entre le footer et le reste du blog. Merci et désoler de mettre deux commentaires al a suite, ça fait pas sérieux : o /

  • Zenein > Alors, 3 petites questions pour toi:

    1. T’as essayé avec le fichier index que je laisse un peu plus haut dans les commentaires ?
    2. Elle est placée où ta sidebar: en dessous à gauche ou à droite ?
    3. Tu utilises quoi comme navigateur ? Si tu es sous IE6, regardes sous Firefox voir ce que ça donne… Ca peut être une histoire de marges…

    Tiens moi au courant !!! 😉 Et t’inquiètes pas pour les 2 commentaires !!! 😉

  • Zenein

    Merci pour la rapidité ^^

    Alors :

    1. Le fichier présent dans les commentaires est celui qui m’a permis de ne plus avoir d’erreur lors de la validation.

    2. Ma sidebar devrait être a droite si tout se passerait bien mais après la dernière manip’ (celle juste avant de s’occuper du footer) ma sidebar passe bien a droite tout en restant sous les articles du blog

    3. En ce qui concerne le navigateur, j’utilise la dernière version de Firefox (la 2.0.0.4 un truc comme ça )

    J’ai beau verifier et reverifier toutes les balises elles sont toutes bien ouverte et correctement refermées. Je ne comprends pas.

  • Zenein

    Non je ne me laisserais pas humilier par de sale petite ligne de code !! il est tard mais je ne lache pas l’affaire.
    Pour compléter mon messages précédent, je viens de découvrir que sur les autres pages du blog, la sidebar se place correctement a droite pile poil comme il faut.
    Voila merci bien

  • Madoxer

    Salut Francis je t’ai envoyer l’ensemble de mes fichiers via le formulaire, dis moi si tu les a recus pourrait tu y jeter un coup, car je pense qu’une div est fermée au mauvaise endroit mais je ne trouve pas. Si tu ne la pas recu, dis le moi je te renverrais tout. Et si tu trouve l’erreur aurais tu l’aimabilité de corriger, et de me joindre un .txt pour m’expliquer mon erreur je veux a tout pris comprendre. Merci d’avance 😉

  • Zenein > Je ne suis pas sûr que ce soit une histoire de code… peut-être plutôt de CSS… Mais dis-moi, tu as une version en ligne pour que je la regarde ?

    Madoxer > je n’ai rien reçu… 😉

  • Zenein

    Bonjour,

    Non je n’ai pas de version en ligne. Il faudrait peut être que je t’envoies une compression de mes templates et du style.css
    J’ai chercher hier sur google, et je suis tomber sur le blog d’une personne ayant eu a peu prés le même problème, c’était due a la « widgetisation » de la sidebar.
    Voila ce qui est écrit :

    « Depuis quelques semaines, j??avais un petit soucis avec mon log. La sidebar (à votre droite aujourd??hui) se trouvait en bas du log. Chose peu pratique et pas très esthétique, je l??avoue. La chose bizarre c??est que sur les autre pages la sidebar apparaissait correctement? hummm?
    Pour ceux à qui cela pourrait arriver, voici ce que j??ai fait pour remédier au problème: Apparemment ce genre de soucis arrive lorsqu??une balise manque dans un post. Au début je pensais mon problème plus grave qu??une balise manquante. Mais j??ai repris mes posts un par un et je me suis aperçu que dans le mode ??view? de WordPress 2.2 certain posts étaient ok alors que d??autres envoyait la sidebar en bas de page. J??ai isolé les posts (hé il n??y en avait pas qu??un!) et je me suis aperçu que tout les posts ou j??avais fait une insertion d??image ou bien un texte centré, avaient une fâcheuse tendance a ??bouiner? n??importe quoi, du style ne pas mettre les balises de fermeture. »

    Voila, pour l’instant j’en suis pas plus avancer ^^ c’est passionnant de créer son thème mais alors c’est prise de tête quand même 😀

    Voila si je dois t’envoyer les fichier merci de me dire a quel endroit on doit faire ça car hier soir j’ai essayer d’envoyer un .rar et ça ne fonctionner pas (en passant par la rubrique « contact » de ton blog)
    Et merci encore.

  • Zenein > Ca m’est déjà arrivé d’avoir la sidebar qui part en vrille à cause d’un article et je pense que c’est ton problème. M’envoyer tes fichiers ne servira à rien puisque je n’ai pas tes articles !! 😉 Vérifie-les un par un via leur permalien et ceux qui auront la sidebar en vrille seront responsables de ton problème…

  • Zenein

    C’est très étrange, j’ai afficher les articles un par un, et avec chacun d’entre eux, la sidebar est correctement placer a droite.. Pour toute les pages du blog elle est bien placée sauf lorsque je decide d’afficher les archives, ou les categories.
    Donc si j’ai bien suivi, une erreur se trouve sur le template Archive.php ou index.php non?

  • Zenein > C’est très possible…

  • Zenein

    Bonsoir,
    Je ne sais pas par quel miracle, mais tout fonctionne correctement !
    J’ai repris l’index que tu donne dans les commentaires et je l’ai copier a la place de mon index.
    Ce qui est miraculeux dans tout ça, c’est que faire un c/c de l’index que tu donnes dans les commentaires, je l’avait déjà fait auparavant sans que cela ne change rien !

    En tout cas merci pour ton aide, maintenant je peux continuer les tutos et j’espere ne remettre des commentaires pour dire que tout va bien ^^

  • seb

    Salut,

    Quelqu’un aurait une idée pour appliquer un plan comme celui-ci:

    Je souhaite rajouter « aux » pour y appliquer d’autres options ou des images.
    J’ai rajouté un div id=aux et utilisé float:left-center-right pour respectivement aux-content-sidebar,mais evidemment ça marche pas sinon j’ecrirais pas tout ça ^_^

    J’ai essayé plein d’endroit differents qu’il serait trop long de detailler ici,le resultat le plus frequent c’est aux et content cotes à cotes et sideber en dessous à droite… :-/
    Donc voilà,merci d’avance pour vos idées et conseils.

  • seb

    Evidemment l’html marche pas lol
    Voilà l’adresse du fameux plan en photo :

    http://membres.lycos.fr/furiousangel75/plan.jpg

  • Manon

    Ah j’avais le même probleme que la plupart des gens qui ont posté, la sidebar en dessous des articles, mais grâces aux réponses des commentaires j’ai pu m’en sortir toute seule, mauvais placement de la sidebar dans l’index ;).
    Merci beaucoup pour l’aide et les tutos ^^

  • Manon

    excusez moi de reposter^^
    Je n’ai pas très bien compris ce qu’était le « padding », si quelqu’un voulait bien m’expliquer ^^
    Merci d’avance 😉

  • Manon > Je crois que tu aurais bien besoin d’un livre sur les CSS !!! 😀

  • Salut Francis, c’est encore moi ^^

    Voila , je suis resté bloqué 30 minutes sur un probleme de css … mon menu ne s’affichai pas a droite malgré les float…

    J’ai ensuite ete sur une page d’article unique (SINGLE.PHP) et la ma sidebar se met correctement…

    J’ai donc copié le code de SINGLE php dans ma page index et je me suis rendu compte que cela ne fonctionne tjs pas.

    De plus j’ai beau mettre THE_EXPERPT a la place de THE_CONTEMPT mes articles apparaissent en entier quoiqu’il arrive (dans INDEX je parle, sinon dans archive cela fonctionne).

    Je pense donc que c’est un probleme du coté WORDPRESS, as tu deja eu cela ?

    Que faire ? j’ai la version 2.2.1 , j’ai cocher RESUME pour les articles et je demande d’afficher les LASTED POST

    Merci (je continue a travaillé en regardant le SINGLE.PHP en attendan ta réponse)

  • vymDiesel > déjà je crois que c’est plutôt excerpt et content donc vérifie ton orthographe 😀 Ensuite, vérifie une nouvelle fois ton code et certains aspects de ta feuille de style. Le problème est là, il faut « juste » le trouver… Plus haut dans les commentaires de cet article, j’ai mis mon fichier index en téléchargement. Récupère le pour voir si ça t’aide…;-)

  • Effectivement ton fichier index fonctionne, je vais comparé ca et je te dirai quoi.

    (Ps : pour l’orthographe d’excerpt et content, je n’avais pas verifié dans le commentaire mais rassure toi ^^ dans le code je l’avais bien orthographié)

    Merci bocou pour ton aide

  • C’était une div mal placer 🙂

    Merci

  • Mariette

    Rhhhaaaa ça ne marche pas :'(!! Je vais m’arracher les cheveux (et j’ai envoyé mon homme me chercher un bouquin sur le CSS)…
    Quelqu’un pourrait il zieuter à l’adresse suivante http://www.miedreams.fr/index.php et m’aider???
    Merci à l’âme charitable qui se penchera sur mon sort…
    (sinon ben je retape tout pour la troisième fois)

  • Pas de stress Mariette, on va y arriver !!! regardez vos balises et notamment la « content ». Certains posts ne sont pas dedans… Et puis, regardez aussi si toutes les balises sont bien fermées. Vous avez fait valider votre xhtml ?

Success, your comment is awaiting moderation.