Création Thème Wordpress | Tutoriel #21: CSS: customisation de la sidebar et du footer

Ce tutoriel est le vingt-et-uniè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.

1. Customisation de la sidebar

S’il y a une chose qui n’est pas très élégante dans cette sidebar, ce sont bien les boutons précédent chaque ligne des différentes listes. On va donc déjà commencer par les retirer. Pour cela, on va insérer du code qui va nous retirer chaque style de la liste principale de la sidebar, d’où “.sidebar ul {}. Voici donc le code à insérer:

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px;
}

En rafraîchissant notre navigateur, on se rend compte que si les boutons sont partis, notre sidebar est maintenant collé au contenu et au header. Pour palier à ce problème, on va modifier la sidebar en lui donnant une marge à gauche de 25 pixels et une marge en haut de 20 pixels. Cependant, l’espace réservé à la sidebar est de 250 pixels. Si on laisse les chose en l’état, on va avoir le contenu qui fera 500 pixels de largeur, la marge avant la sidebar de 25 pixels et la sidebar de 250 pixels. Ca nous fait un total de 775 pixels, soit 25 pixels de plus que la largeur du thème, du coup, la sidebar va se retrouver SOUS le contenu, et à droite. Il va donc falloir réduire la largeur de cette sidebar de 25 pixels pour la faire tenir à droite du contenu. Voici donc ce que va donner le code pour la div “sidebar”:

.sidebar {
float: right;
width: 225px;
margin: 20px 0 20px 25px;
}

Enregistrez votre CSS et allez voir ce que ça donne dans votre navigateur. C’est déjà plus propre non ?

Pour terminer, on va réduire la taille des titres des différents éléments de la sidebar, que je trouve, trop gros à mon goût ! Pour cela, on va ajouter, on va ajouter un peu de code aux titres h2 de la sidebar:

1
2
3

.sidebar h2 {
font-size: 1.2em;
}

Maintenant, à vous de jouer pour créer une sidebar qui vous ressemble ! Je vous donne juste quelques infos complémentaires pour descendre encore de plusieurs crans au niveau de la précision de la customisation:

1	.sidebar ul li{}

vous permettra de customiser chaque ligne de la liste principale de la sidebar. Ca peut être notamment utile pour choisir une taille de police différente, des hauteurs de lignes différentes.

1	.sidebar ul ul li{}

vous permettra de faire la même chose mais au niveau inférieur, sur les lignes des listes comprises dans la liste principale de la sidebar.

2. Customisation du footer

Ici, on ne va apporter beaucoup de customisation supplémentaire. Cependant, séparer le texte du footer et le footer lui-même nous permettra de travailler séparément. Ici, si on regarde dans le template “footer.php”, on se rend compte que le texte du footer est entouré par une balise p. On va donc l’utiliser pour créer son propre style: #header p {}.

Ajouter le code suivant:

#footer p{
text-align: right;
font-size: 1em;
padding: 0 10px 20px 0;
}

Ici, on va aller aligner le texte à droite, lui donner une taille de 1em et le décoller sur bord droite et d’en bas, respectivement de 10 et 20 pixels.

Enregistrez votre feuille de style, et allez voir le résultat dans votre navigateur.

La suite dans la semaine !!

Tutoriel n°22: “Customisation des commentaires”

Fran6

18 Commentaires pour “Création Thème Wordpress | Tutoriel #21: CSS: customisation de la sidebar et du footer”

padding : 0 10px 0 10px; tu peux l’ecrire padding : 0 10px;

DuMe , le 26 juin 2007 à 8:06

Effectivement…merci Simon

Francis , le 26 juin 2007 à 9:36

Je deviens assidu.

Quand tu mets une marge de 20px en haut pour la sidebar, je trouve pas ça top (sous firefox) parce que si tu mets une couleur en fond, il y a un espace entre le header et la sidebar (et pas entre la sidebar et le footer, tiens). J’ai juste mis une marge à gauche.

Ah oui. J’ai remarqué que le “bug” du footer dans la sidebar sous explorer 6 ou 7 disparait une fois qu’il y a au moins 4 articles en première page.

Re-ah oui. Sous ie6 et 7, il y a une marge en haut et en bas de la sidebar.

Voilà, voilà.

Manu , le 26 juin 2007 à 21:10

Salut Manu,

Juste pour te dire que concernant le style, en fait, tout dépend de comment tu veux organiser chaque bloc. Les marges et tout ce qui s’en suit sera différent selon ce que tu en fais. Ici, pas de couleurs, donc je peux positionner comme je veux. Si tu mets un fond, il faudra jongler entre toutes les données, et c’est différent. Je ne propose pas un thème dont le style va rester le même quelque soit l’apparence que tu voudras lui donner, mais il te faudra faire modifs en fonction de ça…;-)

Pour ce qui est de IE, je verrai ça une fois la fin de tutos, mais ça prend un peu la tête parce que j’essaie de faire un code simple pour que ça fonctionne facilement et visiblement c’est pas le cas. Personne ne devrait utiliser ces m—– !!!! En tout cas, merci pour le retour !!

Francis , le 27 juin 2007 à 9:46

De rien. J’essaie de contribuer comme je peux. tu m’as bien aidé quand j’ai eu des problèmes, je renvoie l’ascenseur.

Manu , le 27 juin 2007 à 11:05

Vraiment parfait, tu devrais faire prof ^^

vymDiesel , le 23 août 2007 à 13:28

Merci beaucoup beaucoup pour ce tuto, je viens d’y passer la nuit ( ça craint pour mon examen dans 4 heures)
Soit, je ne sais pas comment procéder afin d’avoir une seconde sidebar de l’autre côté. J’ai tenté plusieurs manipulations en vain. As tu fais un tuto sur le sujet ?
Merci encore

Thomas Desfossez , le 30 août 2007 à 8:20

Salut Thomas,

Est ce que ça pourrait t’aider ? http://www.fran6art.com/2007/0.....e-sidebar/

Et ton exam, ça s’est passé comment ?

Francis , le 30 août 2007 à 12:42

Merci beaucoup, j’etudie en ce moment le tuto que tu m’a partagé. Milles mercis.
Et pour mon exam, ça s’est bien déroulé, je le doit au demi-litre de café colombien ingurgité o_0 I am 73% Addicted to Coffee

Thomas Desfossez , le 30 août 2007 à 15:19

Aussi, voici mon avancement d’après tes tuto :
http://www.calingratuit.be/ste.....ebar22.gif

Le soucis comme tu le vois est que ma sidebar de droite se positionne toujours sous l’article.
Impossible de mettre la main sur l’erreur. pourrais tu m’aiguiller ?

Si jamais, mes fichiers se trouvent ici : http://www.calingratuit.be/ste.....steamy.rar

Merci de ton soutiens

Thomas Desfossez , le 30 août 2007 à 18:25

Bon, je post pour signaler que j’ai résolu (par magie, je sais pas comment ) le problème.
L’avancement sur http://www.calingratuit.be/Steamypunk

Thomas Desfossez , le 30 août 2007 à 19:19

Salut !

Est-il possible que le CSS ne fonctionne pas avec Opera ? Ma page est correct avec Safari et Firefox… je suis en attente de savoir si ça fonctionne avec Explorer.

Merci,
Isabelle (www.zsablogstoo.com)

Isabelle , le 6 sept 2007 à 18:40

Bonjour fran6, je suis un jeune chef de projet marketing dans une jeune socièté. J’ai décidé de mettre un blog en ligne et je me suis énormement appuyé sur vos articles pour modifier le thème Amazing grace. J’arrive à la fin de ce périple mais depuis deux jours je bloque car mon footer reste bloqué à gauche malgrè toutes mes actions. Seul un float:right le colle à droite mais impossible de le centrer. Nous n’avons aucune compétence dans ce domaine, on fait du bricolage donc c’est un petit appel au secours…pour pouvoir rejoindre la blogosphère…

Kalou , le 22 jan 2008 à 10:47

Ce tutoriel est excellent, dommage qu’il n’y est pas d’exemples visuels concret pour se faire plus rapidement une idée.

Gosse , le 1 août 2008 à 10:13

Flux commentaires de ce billet Adresse du trackback

1

padding : 0 10px 0 10px; tu peux l’ecrire padding : 0 10px;

DuMe , le 26 juin 2007 à 8:06
2

Effectivement…merci Simon

Francis , le 26 juin 2007 à 9:36
3

Je deviens assidu.

Quand tu mets une marge de 20px en haut pour la sidebar, je trouve pas ça top (sous firefox) parce que si tu mets une couleur en fond, il y a un espace entre le header et la sidebar (et pas entre la sidebar et le footer, tiens). J’ai juste mis une marge à gauche.

Ah oui. J’ai remarqué que le “bug” du footer dans la sidebar sous explorer 6 ou 7 disparait une fois qu’il y a au moins 4 articles en première page.

Re-ah oui. Sous ie6 et 7, il y a une marge en haut et en bas de la sidebar.

Voilà, voilà.

Manu , le 26 juin 2007 à 21:10
4

Salut Manu,

Juste pour te dire que concernant le style, en fait, tout dépend de comment tu veux organiser chaque bloc. Les marges et tout ce qui s’en suit sera différent selon ce que tu en fais. Ici, pas de couleurs, donc je peux positionner comme je veux. Si tu mets un fond, il faudra jongler entre toutes les données, et c’est différent. Je ne propose pas un thème dont le style va rester le même quelque soit l’apparence que tu voudras lui donner, mais il te faudra faire modifs en fonction de ça…;-)

Pour ce qui est de IE, je verrai ça une fois la fin de tutos, mais ça prend un peu la tête parce que j’essaie de faire un code simple pour que ça fonctionne facilement et visiblement c’est pas le cas. Personne ne devrait utiliser ces m—– !!!! En tout cas, merci pour le retour !!

Francis , le 27 juin 2007 à 9:46
5

De rien. J’essaie de contribuer comme je peux. tu m’as bien aidé quand j’ai eu des problèmes, je renvoie l’ascenseur.

Manu , le 27 juin 2007 à 11:05
6

Vraiment parfait, tu devrais faire prof ^^

vymDiesel , le 23 août 2007 à 13:28
7

Merci beaucoup beaucoup pour ce tuto, je viens d’y passer la nuit ( ça craint pour mon examen dans 4 heures)
Soit, je ne sais pas comment procéder afin d’avoir une seconde sidebar de l’autre côté. J’ai tenté plusieurs manipulations en vain. As tu fais un tuto sur le sujet ?
Merci encore

Thomas Desfossez , le 30 août 2007 à 8:20
8

Salut Thomas,

Est ce que ça pourrait t’aider ? http://www.fran6art.com/2007/0.....e-sidebar/

Et ton exam, ça s’est passé comment ?

Francis , le 30 août 2007 à 12:42
9

Merci beaucoup, j’etudie en ce moment le tuto que tu m’a partagé. Milles mercis.
Et pour mon exam, ça s’est bien déroulé, je le doit au demi-litre de café colombien ingurgité o_0 I am 73% Addicted to Coffee

Thomas Desfossez , le 30 août 2007 à 15:19
10

Aussi, voici mon avancement d’après tes tuto :
http://www.calingratuit.be/ste.....ebar22.gif

Le soucis comme tu le vois est que ma sidebar de droite se positionne toujours sous l’article.
Impossible de mettre la main sur l’erreur. pourrais tu m’aiguiller ?

Si jamais, mes fichiers se trouvent ici : http://www.calingratuit.be/ste.....steamy.rar

Merci de ton soutiens

Thomas Desfossez , le 30 août 2007 à 18:25
11

Bon, je post pour signaler que j’ai résolu (par magie, je sais pas comment ) le problème.
L’avancement sur http://www.calingratuit.be/Steamypunk

Thomas Desfossez , le 30 août 2007 à 19:19
12

Salut !

Est-il possible que le CSS ne fonctionne pas avec Opera ? Ma page est correct avec Safari et Firefox… je suis en attente de savoir si ça fonctionne avec Explorer.

Merci,
Isabelle (www.zsablogstoo.com)

Isabelle , le 6 sept 2007 à 18:40
13

Bonjour fran6, je suis un jeune chef de projet marketing dans une jeune socièté. J’ai décidé de mettre un blog en ligne et je me suis énormement appuyé sur vos articles pour modifier le thème Amazing grace. J’arrive à la fin de ce périple mais depuis deux jours je bloque car mon footer reste bloqué à gauche malgrè toutes mes actions. Seul un float:right le colle à droite mais impossible de le centrer. Nous n’avons aucune compétence dans ce domaine, on fait du bricolage donc c’est un petit appel au secours…pour pouvoir rejoindre la blogosphère…

Kalou , le 22 jan 2008 à 10:47
14

Ce tutoriel est excellent, dommage qu’il n’y est pas d’exemples visuels concret pour se faire plus rapidement une idée.

Gosse , le 1 août 2008 à 10:13

Fran6art.com, blog d’un webdesigner WordPress freelance