Francis Chouquet Graphiste Lettering

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

0

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:

1 2 3 4 5 
.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 »:

1 2 3 4 5 
.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:

1 2 3 4 5 
#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 »

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

33 Commentaires

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

  • Effectivement…merci Simon 😉

  • Manu

    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à.

  • 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 !! 😉

  • Manu

    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.

  • Vraiment parfait, tu devrais faire prof ^^

  • 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

  • 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 ? :mrgreen:

  • 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

  • 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 🙂

  • 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

  • Isabelle

    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)

  • 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…

  • Gosse

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

  • Julien

    Salut Fran6,

    Je me suis servit de ce tuto pour transposer mon thème que j’avais réaliser à partir d’un autre finalement beaucoup trop lourd. La simplicité a du bon aussi !

    Par contre je suis bien embêté, je n’arrive vraiment pas à avoir certaines pages sans sidebar.
    J’ai fait un template sans le get_sidebar, j’ai mis une condition dans l’index pour court circuiter la fameuse page, rien n’a marché, et vu la simplicité du thème ça me laisse perplexe.

    S’il te plaît, quelle est donc la clé???????

  • Hello Francis

    j’ai un petit soucis avec la div Content et Sidebar celle ci reste bloquée au milieu de ma page, aurais-tu une solution pour m’aider ?

    http://img228.imageshack.us/img228/4807/theme.tif

    Sinon très bon tuto, d’habitude je bidouille le thème WordPress par défaut pour faire mon propre thème et la j’avoue que ça fais du bien d’avoir un thème propre.

  • Samijuke > IL faudrait que tu mettes la balise « page » en background blanc pour que l’arrière plan soit blanc sinon le la div content va toujours s’arrêter juste après la fin du contenu…

  • Merci pour la soluce Francis, mais j’ai le même problème avec ma sidebar, qui est dans le vide si mon content est long.

    Vais simplement ajouter une div autour du content et une autre autour de la sidebar remplis des couleurs qu’il me faut et ça ira comme ça.

    Mais je savais pas si y’avait une autre solution plus simple à mon problème, problème que j’ai sur tout les sites que je fais grrrr.

    Merci

  • Bonjour Francis, bonjour à tous,

    D’abord : Merci pour ce tuto !

    J’ai voulu mettre une couleur de background pour ma sidebar. J’ai réussi, mais ça ne va pas jusqu’en bas de la page. La couleur s’arrête à la fin de la sidebar. Que dois-je changer dans le code pour que ça aille jusqu’en bas ? J’ai tenté « repeat » mais ça a fait bugger !

    Merci d’avance !

  • Je travaille sur : http://blog2.loeildeluciole.com pour laisser propre mon vrai blog.

  • Tu ne peux pas dans le sens où la sidebar s’arrête où le texte s’arrête… Il faut modifier la feuille de style…

  • Merci Francis, je vais voir ça alors 😉

  • Bonsoir Fran6,

    Très bon tuto, j’ai eu qq erreurs mais j’ai réussi à trouver mes fichiers incriminés et à les remplacer par ceux que tu mets à dispo dans le tuto #23

    J’aimerais retirer le souligné des lignes de la sidebar. J’ai essayé ce code :

    .sidebar ul li{
    font-size: 1em;
    text-decoration:none;
    }

    mais il semble que ça ne fonctionne pas.

    Merci d’avance!!

  • Oups!!

    J’avais pas encore vu le tuto #23 🙂

    Merci quand même!

  • Hello , j’ai changer un peu le style en image plutôt que couleur du coup j’ai un fond blog + fond page , et j’aimerai centré mon blog , commentaire , slibar , billet je voudrai donc le mettre au centre si vous pouvez m’aidez merci 🙂

  • Max

    Si je suis bien, pou changer la couleur des liens dans le footer, il faut que je fasse :

    #footer p a,{
    color: #FF0000;
    }

    malheureusement, cela ne fonctionne pas !… moi qui croyais avoir compris ^^

    Merci d’avance de m’éclairer sur ce point

    et merci pour ce super tuto !

  • bonjour
    je vien de faire se tuto pour réaliser un portfolio dynamique.
    Le portfolio en question sera bientôt en ligne, il ne me manque que la page contact (j’ai le script avec le formulair tout est prêt) juste un problème comment mettre se script dans la partie page.php uniquement pour http://localhost:8888/wordpress/contact
    Merci d’avance de m’éclairer sur ce point
    et merci pour ce super tuto !

Success, your comment is awaiting moderation.