Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutoriel #20: CSS: customisation du header et du contenu

0

ATTENTION: le tutoriel 19 a été mis à jour samedi 23 juin 2007, veuillez mettre à jour votre thème avant de commencer ce tutoriel si vous avez effectué le tutoriel AVANT le vendredi 22 juin 2007. Les modifications apportées sont au niveau du footer et du header.

Ce tutoriel est le vingtiè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 reprendre chaque partie du thème, et à chaque fois, on va essayer de donner un peu plus de style à ce qui existe déjà, histoire de bien positionner et dimensionner chaque bloc et sous-bloc, individuellement.

1. Titre et description dans le header

Dans le dernier tutoriel, on a donné les informations de style pour le bloc « header ». Ce sont les infos de base, le minimum requis. Maintenant, ce qui serait intéressant, c’est de pouvoir appliquer un style, de manière autonome, au titre et à sa description. Pour cela, il faut que ces deux informations soient contenues, indépendamment dans une boîte. C’est le cas pour le titre, qui est dans la balise h1 mais ce n’est pas le cas pour la description. On va donc lui ajouter une classe « p ». Pour cela, ouvrez le template header.php, et au niveau de la ligne pour la description du blog, vous allez ajouter une classe p, nommée « description ». La ligne de code que vous devez avoir est la suivante:

1 
<p class"description"><?php bloginfo('description'); ?></p>

On entoure la description d’une classe pour pouvoir travailler sur la description indépendamment du reste du header. Les séparer nous permet non seulement de travailler sur chaque élément de manière individuelle, mais nous aidera aussi, par la suite, si on veut mettre une image à la place du texte. Ce sera le sujet d’un prochain tuto ! 😉

Nos deux éléments composant le header (hormis le header lui-même…) étant maintenant bien balisés, on va pouvoir leur donner un style. Pour cet exemple, j’ai décidé de faire une mise en page un peu différente pour que vous compreniez bien ce qu’on fait. Je vais placer le titre et la description à droite du header, en leur donnant une taille de police et un positionnement qui leur est propre. Ensuite, ce sera à vous de jouer sur ce que vous voulez en fonction de vos besoins: couleurs, polices, etc.

Voici donc le code à insérer dans votre feuille de style CSS ( chacun a sa propre organisation de sa feuille de style, mais je vous conseille de regrouper les styles de chaque bloc de manière cohérente pour facilement vous y retrouver quand vous voudrez y faire des changements. Ici, je place les lignes de code qui suivent directement SOUS les infos du header):

1 2 3 4 5 6 7 8 9 10 11 
#header h1 { padding: 0 20px 0 0; font-size: 2em; text-align: right; }   #header p { padding: 0 20px 0 0; font-size: 1em; text-align: right; }

Alors, qu’est-ce qu’on a fait ici ? Et bien, tout d’abord, on « nomme » ce que l’on va customiser. Ici, c’est le titre h1 dans le header, donc #header h1{} et la classe p dans le header, donc #header p{}. Ensuite, pour ce qui est du titre, je le place à droite dans le header, je lui donne une taille de 2em et un peu de padding à droite pour le « décoller » du bord du header. Pour le padding, je n’ai pas utilisé « padding-right » pour que vous puissiez varier tous les écarts autour du titre.

Pour ce qui est de la description, c’est la même chose, sauf que je lui attribue une taille plus petite.

2. Customisation du contenu

Maintenant, on va s’attaquer à la customisation du contenu. Je vais diviser ce contenu en 3 sections: le titre de l’article, les postmetadata, et l’article lui-même. Ce sont d’ailleurs, les 3 principales sections du Loop WordPress !

2.1. Le titre de l’article

Les titres des articles sont balisés par la balise h2. C’est donc celle-ci que l’on va utiliser pour modifier le style des titres de notre thème. Cependant, la balise h2 n’est pas seulement utilisée par le contenu mais l’est également par la sidebar, au niveau des titres de chaque ligne de la liste. Ici, on va donc différencier les titres h2 du contenu en les intégrant sous le contenu de la manière suivante: #content h2 {}. Ici, on ne va pas faire de grosses modifications, mais juste définir une taille pour le titre. J’ai pris ici 1.3em. Je ne modifie pas son positionnement ni sa police.

Voici donc le code à insérer:

1 2 3 
#content h2 { font-size: 1.3em; }

2.2. Les postmétadata

Bien souvent, les postmétadata sont sujets à pas mal de modifications et à une customisation plutôt poussée. On peut leur ajouter des images, positionner la date devant le titre, mettre les commentaires à la fin de l’article, etc. Ici, on va prendre l’ensemble de ces informations comme un seul bloc. Si vous voulez modifier chaque élément de ce bloc, vous pourrez ajouter des classes à chaque élément et les paramétrer individuellement. Ici, je ne veux pas trop rentrer dans les détails. Je ferai des tutoriels séparés pour expliquer comment customiser chacun de ces éléments.

Ici, on va juste modifier la taille du texte pour la différencier du billet et aussi lui donner une couleur un peu plus pâle pour le démarquer encore un peu plus. Voici donc le code à insérer (si possible directement sous le style du titre de l’article):

1 2 3 4 
.postmetadata { font-size: 0.8em; color: #999; }

2.3. Customisation du corps de l’article

Ici, on va pouvoir modifier la police du billet, sa taille, sa couleur, ses marges, les hauteurs de ligne. Bref, tout ce qui touche au corps du texte. Dans mon exemple, je modifie la taille de la police pour la porter à 1em et je modifie un peu sa couleur pour faire ressortir les titres. Vraiment, ce n’est qu’un exemple, et c’est à vous de jouer avec vos goûts et votre créativité. N’oubliez pas auparavant de sauvegarder une copie de votre feuille de style de départ !! 😉 Voici donc le style à insérer:

1 2 3 4 
.post_content { font-size: 1em; color: #555; }

Remarque: ici, comme pour les postmétadata, on utilise les « bornes » « postmetadata » et « post_content » que l’on avait inséré au moment de la création des templates.
Voilà pour aujourd’hui. Demain matin, on verra la customisation de la sidebar et du footer. Ensuite on s’intéressera notamment aux commentaires et aux liens.

Tutoriel n°21: « Customisation de la sidebar et du footer »

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

28 Commentaires

  • Manu

    Encore un superbe tuto. Juste à signaler : une faute de frappe dans la partie header p.
    Tu as tapé font_size au lieu de font-size 🙂

  • Merci Manu, j’ai modifié le texte…;-)

  • Moi j’ai une question :

    Ne faut il pas également définir le style de

    .post_excerpt{
    font-size: 1em;
    color: #555;
    }

    ? enfin perso j’ai compris comment cela fonctionnais mais peut etre que pour d’autres personnes cela serai moin evident ^^

    Enfin ce sont tes articles je ne voudrais pas faire le « SANS GENE » et j’espere que mes remarques ne t’agacerons pas trop

  • Bonjour à tous et merci Fran6 pour ces articles fort utiles.

    J’ai un souci dans le corps de mes posts. Quand je veux coller une image dans mon message, le texte court à droite de cette image. hors je voudrait qu’il se place en dessous de cette dernière (c’est aussi le cas pour les commentaires ou les tags). Je suppose que cela est dû au float:left mais je ne sais pas comment l’annuler uniquement à l’interieur de la fenêtre content. Une idée?

  • ChrisK > Et bien, tu as une balise pour le contenu de tes articles, admettons qu’elle se nomme « contenu-article ». Tu vas écrire une ligne de CSS qui va dire:

    .contenu-article img { float:none;}

    Ca devrait fonctionner… 😉

  • Fran6, merci beaucoup. effectivement ça fonctionne!!!

    Cool, je vais pouvoir avancer.

  • ERREUR401

    bonjour ;

    une question … je me demande commet faire pour avoir un style different par categorie ;
    en gros je me demander par exemple si il etait possible de changer la couleur du background du texte de metadonne en fonction de ca categorie ( et si il etait possible de le faire dans le sidebar aussi )
    comme ala creation d’une categorie WP nous dit creation de #la_categorie_cree peut ton le recupere dans le CSS ???

    merci

  • exobop

    Bonjour,

    Merci pour ce tuto unique et très enrichissant. En suivant le tuto depuis le début j’ai remarqué que le titre du blog a une couleur un peu « Rouge bordeaux », j’ai voulu changer cette couleur en intervenant dans la feuille de style au niveau de la balise #header h1 mais ça ne marche pas en y ajoutant une propriété de couleur : color: #000000; par exemple.

    Merçi

  • Laurent

    Bonjour, bravo et merci pour ce tuto complet!
    Je suis débutant dans l’univers WP mais pas en CSS.

    Or en suivant le tuto, afin de personnaliser le header, j’ai simplement ajouté dans ma feuille de style, dans #header {} l’adresse de l’image d’arriere plan que je voulais ajouter.

    Ben ça marche pas. Apparemment ce n’est pas la marche à suivre. Auriez vous des indices? 🙂

    Merci d’avance,
    Laurent

  • Marcus Click

    Bonjour à tous,
    Tout d’abord je voudrais juste dire que ce tuto est super !
    Il m’aide beaucoup…

    Cependant j’ai un petit soucis avec mon intégration. Je viens d’installer la nouvelle version de WordPress la 2.7.1 et lorsque j’arrive à l’étape de customisation de mon header, j’ai un problème que je n’arrive pas à résoudre (ni a comprendre) c’est que j’ai un petit espace entre le haut de ma page et le haut de mon header. Hors j’aimerai ne pas en avoir…

    J’ai pourtant supprimé toutes les margin et les padding mais rien n’y fait…
    Est-ce que quelqu’un aurait rencontré le même pb que moi en arrivant à la résoudre ?

    Merci d’avance,
    Marcus

  • anais

    petite erreur:il ne faut pas oublier le » = « entre p class et « description », sinon le w3c n’est pas content 😉

  • Merci pour ce tuto

    Je l ai suivi du début à la fin.
    Comment fait on pour insérer des images dans le theme?
    Je n ai pas trouvé d’allusion.
    Comment change t on la couleur de fond de la page dans la css?
    merci beaucoup

  • Amandine

    Bonjour, je voulais savoir de quelle manière régler la position vertical de mon titre dans mon header. Je m’explique, j’ai chercher a jouer sur le padding, mais je n’arrive qu’à régler le décalage droite/gauche et non le haut/bas.
    Cela vient il du fait que le titre est centré? Ou bien faut il une commande spécifique pour régler à quelle hauteur se place le titre (et pas la hauteur du titre « height »)
    Merci d’avance

  • Mina

    Oups! Finalement, ça fonctionne sous les 2 navigateurs. Super! Je suppose que FF avait mémorisé les anciennes données sans prendre en compte les nouvelles. Désolée! Maintenant, vive la partie créative!!!! Grâce à toi!!!

  • clém

    Merci pour ce tuto super;
    Je l’ai suivi de A à Z mais jamais ma description ne se place à droite, j’ai essayé de changer la couleur et d’autre choses…mais rien ne change sur ma description. J’ai l’impression que j’ai fait une erreur dans la CSS mais je ne sais pas où. Merci de votre aide.

  • Salut, super tuto, je le suis depuis le début et c’est vraiment bien fait.

    Parcontre, quand vous utilisez la class suivante

    Pourquoi ne pas la mettre dans le fichier css?

    #header h1 {
    padding: 0 20px 0 0;
    font-size: 2em;
    text-align: right;
    }

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

    Avez-vous l’intention de l’utuliser plus tard, ou bien pensez-vous que l’on puisse s’en passer pour le cas présent?

  • didier

    Salut à tous,

    j’ai le même problème que Clém (le 22/05/2010), impossible de modifier la description; alors que j’ai juste copié-collé les données de Francis…
    Des idées ?

    Merci !
    A+

  • didier

    Ne tenez pas compte de mon précédent message, j’ai résolu le problème simplement en réécrivant la ligne entièrement. (celle-ci pour info : )
    Il s’est surement passé quelque chose lors du copier-coller, mais quoi ???
    Mystère 😉

    A+

  • Dude

    Bonjour par défaut dans mon theme l’auteur de l’article est en gras est il possible de le mettre en normal ?
    De plus le nom de l’auteur est en fin d’article, possible de le mettre juste au dessus? Entre la catégorie et l’article.
    Merci d’avance !

  • Claymenia

    Bonjour,

    J’ai un soucis avec la création du thème.

    Je ne sais pas pourquoi, mon div « page » se limite à la hauteur de mon header. J’ai essayé height: auto; / maximum-height etc… rien n’y fait, il faut que je rentre une valeur manuelle pour l’étirer…

    voici mon css : [code]http://www.copypastecode.com/87183/[/code]

    Autre soucis, je n’arrive pas à avoir de validation w3c car j’ai l’erreur suivante :

    Line 88, Column 34: ID « TheTexte » already defined

    An « id » is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

    Et effectivement à vause des thumbnails dans mes articles, un est généré pour encadré chaque contenu avec ce même nom, d’où vient-il selon vous et comment le modifier ?

    voici mon code : [code]http://www.copypastecode.com/87187/[/code]

    En vous remerciant de votre aide !

  • Caliblog

    Bonjour,

    Je ne sais pas si tu réponds encore aux petits soucis mais je tente tout de même ma chance.
    Voilà j’aimerai remplacer le titre de mon blog par une image et conserver le lien dans cette image.
    J’ai bien tenté de le faire dans le header.php en remplaçant la ligne <a href=" »> mais cela n’a pas fonctionné.

    Peux tu m’aiguiller sur le sujet ?

    Tu as, si je me souviens bien, évoqué ce cas dans un de tes précédents billet sans toutefois l’aborder par la suite 🙁

    Merci d’avance et surtout merci pour ces très bons tutos !!

  • coco

    merci tu assures

  • Lolita

    Hello,

    J’avance, j’avance, et c’est vraiment super ces tutos !

    Je me pose une question. Bien que l’on change la couleur des titres (articles par exemples), tout reste en bleu sur mon blog. Cela s’apparente à des liens hypertexte. Normal, puisqu’ils sont cliquables… Mais, est-ce normal que la couleur ne change pas comme je le souhaite ? Ou est-ce que j’ai loupé une étape ?

    Merci !!!!

Success, your comment is awaiting moderation.