Francis Chouquet Graphiste Lettering

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

  • Lyn

    Fausse alerte j’avais juste rafraichi ma page alors qu’il fallait vider le cache ^^

  • Clementine

    bonjour
    j’ai scrupuleusement suivi ce tuto. Pourtant, j’ai beau modifié ma feuille css, rien ne se passe sur mon thème !
    je ne sais pas du tout d’ou cela peut venir…
    Quelqu’un a t il vécu ca ?

  • Moi j’ai un soucis. C’est juste que le footer s’affiche à droite (voir image en bas)
    Je précise que j’ai (normalement) suivie le code à la lettre.
    Le footer s’affiche à droite du header (image en dessous).
    Et quand la fenêtre est plus petite, elle est affiché en dessous du sidebar… (pas d’image)

  • [On voit pas l’image]

    Moi j’ai un soucis. C’est juste que le footer s’affiche à droite (voir image en bas)
    Je précise que j’ai (normalement) suivie le code à la lettre.
    Le footer s’affiche à droite du header (image en dessous).
    Et quand la fenêtre est plus petite, elle est affiché en dessous du sidebar… (pas d’image)

    http://image.noelshack.com/fic.....apture.png

  • recense mais

    Parce que je pense qu’il est toujours difficile nike free run de savoir si les choses sont les bonnes quand on a du mal à visualiser ce que ça va donner.

Success, your comment is awaiting moderation.