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

  • Francis le sauveur de ces dames :p (dragueur va hihihihi xD)

  • Qu’est-ce qu’il raconte l’ami VymDiesel !! :mrgreen:

  • Mariette

    En tout cas je remercie Francis parce que mon thème ben il avance (et je sais qu’il y’en a un qui est allé voir à partir du lien ci-dessus)!!! J’ai même réussi à faire des trucs dans le CSS!!! Par contre, la sidebar ne me plait pas :(… j’aimerai virer le blanc entre le header et le font….

  • Mariette > le blanc entre le header et le fond ?? … je ne saisis pas là… 😉

  • Erf mariette, je n’ai pas le lien vers ton site.

    Au sinon elle veut surement dire le vide entre le header et la sidebar, non ?

  • Mariette

    Ben finalement j’ai mis un background sur le body de la couleur que je voulais… mais avant j’avais seulement appliqué le background sur la sidebar et laissé celui du body en blanc ce qui faisait un vide entre le header et la sidebar et le le font et la sidebar… Ah la la qu’est ce que j’aimerai faire un vrai vrai thème… mais bon pour quelqu’un qui ne savait même pas ce qu’était un fichier css dimanche, je trouve ça pas mal !
    vym: http://www.miedreams.fr/index.php (mais bon il est en constante évolution)!

  • Je le trouve vraiment mignon, et j’adore ton slogan

    Je te souhaite une bonne continuation et je t’aiderai comme je peu.

    J’ai aussi hate de voir ton blog fini :), tu me previendra 😀 ?

  • Merci Vym,

    Ca fait plaisir, pas de problème je te tiendrai informer, et en effet je crois que dans les jours prochains je vais avoir besoin d’aide^^ (je viens d’acheter un bouquin sur le php et un sur le CSS, je suis vraiment atteinte^^). Je pense que lorsque je voudrai valider mon CSS il va faire un bon le validateur! (sinon je crois qu’on a des « passions » communes manga, culture japonaise, sushis :p). Enfin j’espère pouvoir le lancer assez vite car mon hébergeur de blog actuel me gonfle un peu… Vive la liberté avec le .fr!

  • Au fait, quelqu’un connaitrai t il un bon forum où je pourrai poser des questions (peut être) stupides mais qui m’aideront dans ma réalisation ?? Parce que bon, les commentaires ce n’est pas fait non plus pour s’étaler^^!

  • Bonjour,

    Grâce à tes tutos, j’ai réussi à customiser mon blog de A à Z, trop content.
    Par contre, j’ai un petit soucis d’affichage : Sous Firefox, template nickel, par contre, sous IE6, je n’ai plus de marge à gauche et les caractères dans mon menu et mes articles sont minuscules. Je suppose que c’est un réglage de CSS, mais là ….perdu.
    Une info à donner à mes margin en particulier ?
    Pour les caractères, changer em en px ?

  • Un forum parlant du web … je dois avoir cela attend xD

    http://www.developpez.com/

    J’y ai ete une ou deux fois mais il a l’air fort peuplé 🙂

    Sinon n’hesite pas a poser tes questions

  • stefpopo

    hello Francis,
    je te remercie tout d’abord pour ces tutos, quel boulot, je te tire mon chapeau !!! Bon … jusqu’ici tout se passait bien … mais maintenat j’ai un soucis car la sidebar vient se placer en dessous de mes billets … au secours … je cherche depuis une heure où j’aurais pu faire une erreur mais je ne trouve pas ! Comment puis-je procéder pour que tu m’aides ?
    Par avance, merci.

  • stefpopo

    ce message annule le précedent (sauf les félicitations !!!), j’ai récupérer le fichier index que tu nous a mis à disposition et tout est rentré dans l’odre ! Passons à la suite !

  • Jérémy

    Bonjour Francis, personnellement le thème bug sur Internet Explorer 7, la sidebar reste tout en bas à droite malgré avoir suivi toutes tes recommandations.

    Est-ce normal? Aurais-tu une solution pour moi?

    Merci d’avance. JP

  • Jérémy > Y aurait pas une histoire de div non fermée quelque part ?

  • NCA

    Bonjour Francis,

    J’ai moi aussi ce problème de sidebar et footer qui s’échappent du page (je suis sur Fx). J’ai vérifié leurs DIV et même essayé de les fermer dans le page, comme pour le header, ça ne change rien.
    J’espere qu’il est encore possible d’avoir une réponse. 🙂 Merci,

    NCA

  • NCA

    Hop-la c’est résolut, aprés une énième vérification, effectivement un «  » mal placée dans l’index. Pour ceux que ça peut aider: la décaler d’au-dessus des « get_sidebar() » et « get_footer() » pour la mettre en dessous.

    NCA

  • anthony

    bonjour a toi francis,

    je commence tout d’abord à te remercier pour le travail que tu as fourni pour ces tutos 🙂

    alors voila j’ai quelques souci (sa serait trop beau sinon :p )

    – tout d’abord lors de ma vérification un bon nombre d’erreurs sont trouvées alors que moi j’y suis pour rien :d j’ai copié collé tuto comme il fallait :d lol
    – je tient aussi a préciser que la ligne de code permettant normalement de ne pas afficher l’article complet mais qu’une partie ne marche pas non plus
    – et plus récemment lors de ce tuto impossible de placer correctement la sidebar a droite elle reste en dessous de mon dernier article et avant mon footer (comme l’image de MANU un peu plus haut)

    voila 🙂

    merci a toi de me répondre si tu veux plus d’info mon mail est dispo et je pourrais éventuellement t’envoyer les fichiers afin de vérifier où je me suis embrouillé !

  • yo cher maitre, deja je t’écris pour te féliciter de ton travail, ce tuto est parfait par contre je n arrive pas au meme résultat que toi au niveau du CSS, je dois avoir un bleme dans mes codes de templates
    en gros je n ai pas le bandeau gris et ma side bar et totalement à droite
    merci d aider un jeune padawan du blog

  • iaco > Va voir directement au tuto 23, je mets un lien vers les fichiers du thème. Regardes aussi si tu n’aurais pas oublié de fermer une div dans tes articles si tu en as…

  • Bonjour,
    merci pour ton tuto,
    j’ai un problème, le blog s’affiche mal. Le problème est que je ne comprend pas où se trouve l’id « page » dans mes templates, et il me semble qu’il me le manque, mais je ne trouve pas où. Voici une capture de mon rendu: http://img517.imageshack.us/im.....re1ww7.jpg
    Merci de ton aide 🙂

  • Hugo > Effectivement, c’est un souci avec la balise « page ». Ne te prends pas la tête et va faire un tour dans le tuto 23, il y aura un petit cadeau en bas du billet !! 😉

  • Il me semble en fait avoir trouvé, je vais essayer quelque chose, et si je n’y arrive pas, j’irai ouvrir le cadeau du tuto 23 🙂
    Merci encore

  • Voila j’ai réussi, je ne sais pas si j’ai placé mon bloc au bon endroit, mais j’ai exploité mes connaissances, et le rendu est le bon 🙂
    Je vais pouvoir continuer :q

  • Bonjour Francis, j’ai un petit problème… Exactement le même que Manu en fait…

    J’ai exactement le même code CSS que celui que tu as donné…

    Voici les différents screens qui te seront surement utiles pour m’aider :

    http://www.picdo.net/Fichiers/.....n_blog.PNG
    http://www.picdo.net/Fichiers/.....source.PNG

    Merci par avance :]

  • DaPo > Ton contenu est trop large… Il faut que tu lui donnes une largeur…

  • Bonjour Francis
    Merci pour ton super tutoriel !!!
    Mais voila je bloque,J’ai un problème avec les css je pense (ou alors, c’est ailleurs )

    Voilà, ma sidebar ne se positionne pas correctement en haut à droite, en-dessous du header mais juste en-dessous du premier article écrit. j’ai essayé avec Firefox et avec IE 7, le résultat est le même.

    J’ai beau passer en revue toute les pages, je vois pas où j’ai fait une erreur

    J’ai vérifier tout mes templates !!!
    Je comprend pas, pourraît tu m’envoyez tes templates, pour que je puisse voir mon erreur ?
    Je te remercie.
    Morgan

  • Merci pour cette partie du tutoriel.
    Par contre, pour obtenir l’image que tu met il faut placer le div Header avant les informations du blog, or dans un tuto avant du le place après, ce qui fait que une petite barre en dessous.

  • audrey

    Bonjour Francis,
    Merci beaucoup pour cette série d’articles sur WordPress.. vous portez une grande attention à expliquer pas à pas les choses. Pour ma part je débute, donc petit à petit j’essaye de comprendre le fonctionnement du codage.
    J’ai une question pour la customisation du header.
    Je désire insérer une image dans le background. Le code à insérer dans la feuille de style est le suivant je pense « background-image: url(images/header.jpg) » avec l’image appelée header et se situant dans un répertoire « images ». Je voudrais savoir à quel endroit je dois créer ce répertoire sachant que toute ma configuration suit celle qui est décrite dans vos articles. D’autres part, comment trouver les dimensions exactes du header pour créer l’image en fonction (la longueur et de 750px et la largeur?)
    Est-ce que les vidéos que l’on veut insérer doivent également ce situer dans ce répertoire images?
    En vous remerciant beaucoup,
    audrey

  • bonjour Francis, merci pour ces super explications!
    tout s est bien passe……….jusqu ici!!

    je n arrive pas a bien aligner ma mise en page. j ai copie/coller toutes vos donnes dans mon css pour etre sur d avoir les meme valeurs que vous mais j arrive a une image differente de la votre

    je m explique:

    la sidebar est bien a droite mais des que j agrandis la fenetre du navigateur, la sidebar reste aligne a droite ( l espace entre le content et la sidebar s agrandit donc)

    ensuite mon footer est quand a lui aligne a gauche!!

    J aimerais que mon blog fasse 730 pixels de large, que le content fasse 580, et la sidebar 135 pixels (ainsi avoir une valeur fixe de 15 pixel entre le content et la side bar).

    le header quand a elle s aligne a gauche et fait 580 pixel de large ( afin de ne pas venir au dessus de la sidebar), j aimerais aussi une marge de 15 pixel en bas du header, en d autre terme un espace de 15px entre le header et le content……

    est ce que c est possible? pourquoi n obtiens-je pas le meme resultat que vous? y a t il une valeur a ajouter pour que la sidebar ne reste pas sur la droite de l ecran mais reste centre a cote du content?

    merci!

  • pardon francis ignorez mon message precedent, j ai trouve mon erreur 🙂
    j avais oublie d inclure

    dans la balise

  • Salut,

    Je sais pas si ça vient de moi, mais le résultat que j’obtenais n’était pas le même que celui dont tu donnes une capture d’écran. La sidebar et le footer étaient complètement exclus de la page et se retrouvaient un peu n’importe où.

    La faute aux fonctions get_header et get_sidebar dans le index.php qui étaient mal placées.

    A la fin du fichier index.php il doit y avoir une balise . Il faut placer ses fonctions get_sidebar et get_header après.

    Voici ce que j’ai à la fin:

    Et comme ça, ça fonctionne.

  • Erf bon bah c’est sympa, quand j’ai ajouté mon commentaire y’a la moitié de ce que j’ai écrit qui a disparu… Je reessaie :
    [code]

    [/code]

  • Val

    Hello Francis,

    Bon alors je vois que bcp ont eu des tit soucis avec leur sidebar mais de mon coté c’est avec mon footer.
    Celui-ci, apparemment, est enfant de la sidebar … !!!
    Donc il s’affiche sous la sidebar et ne s’aligne donc pas tout à gauche sous le contenu. (sidebar à droite donc 😉 )
    Bizarre non ?
    Il est juste appelé dans l’index via un templatetag donc je vois pas trop où est le pb.
    La sidebar est appelée elle aussi juste avant mais comment ni l’un ni l’autre n’est encadré de div… je comprends pas trop ?! Je ne vois pas où j’aurais zappé une fermeture de div 🙁
    Tu pourrais m’éclairer de tes lumières ?
    Merci tout plein
    @ +++

  • Val

    Oooppsss… C’est bon !!!
    Ne cherches pas … j’ai trouvé ;-)))
    C’est cool… avec ton tuto je comprends ce que je fais et du coup, meme s’il me faut un peu de temps… bah je trouve …
    Pour info, des fois que ça arrive à d’autres aussi, j’ai… moi aussi, oublié de fermer des div mais cette fois, c’était dans les fichiers sidebar et footer.php.
    D’où le fait que mon footer restait enfant de la sidebar.
    Allez, j’y retourne 😉

    Biz
    @+++

  • Salut,

    Je viens de découvrir ce blog (super bien fait concernant WordPress).
    J’ai suivi et réalisé ce tutoriel sans aucun pb et je voulais simplement apporter une petite modification au style du header !
    La taille doit être de 730px au lieu de 750px car il y a 20px à droite et à gauche (via le padding) qui se rajoute au width. La taille d’un bloc (div) est la somme de la taille des bordures (border), des marges internes (padding) et du contenu (width).

    Voilà le code à mettre pour être rigoureux (enfin si Francis valide ;))

    #header {
    font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;
    float: left;
    background:#cccccc;
    width: 730px;
    padding: 0 10px 20px 10px;
    }

  • josselin

    personnellement
    pour le problème des 20 px de chaque coté
    je fait comme çà :

    « blaaaaaa »

    je met le « padding » dans une div séparé.

  • josselin

    personnellement
    pour le problème des 20 px de chaque coté
    je fait comme çà :

    « blaaaaaa »

    #pad_content{ padding:15px; }
    /*je met le « padding » dans une div séparé.*/

  • Panda

    Hey Francis!!
    Super site, félicitations pour tout!
    J’ai jusque la suivi tous les tutos, tout s’est passé nickel, y compris la validation…malheureusement j’ai beau rajouté des trucs dans la feuille de style css…rien ne change sur le blog…ni les couleurs, tout reste a gauche de l’ecran, la sidebar ne se met pas a droite…Etrange…as tu une idée?

  • Panda

    oups désolé tout a marché d’un coup….

  • Gigine

    Bonjour,

    J’ai un petit problème concernant l’organisation des blocs de mon thèmes.
    Tout marche comme il faut simplement j’ai un souci quand je clique sur le lien qui mène à l’article seul. Le problème est que mon organisation en bloc n’est plus du tout respectée, d’où est-ce que ça peut bien venir ?
    par contre, j’ai quand même les bonnes couleurs, c’est simplement une histoire de position donc je ne comprends pas pourquoi il y a une différence entre la page d’accueil et les autres pages.

    Est-ce que vous pourriez m’aider ?

    Merci à l’avance

  • Gigine

    c’est bon, j’ai réussi à résoudre mon problème
    il suffisait simplement de reprendre le code et de bien faire attention au div…

  • guarinidecock

    Bonjour,
    Merci pour ces tutos génialement faits

    Question:
    Ma FOOTER reste à gauche alors que: « padding: 10px 10px 0 0; »
    Pourquoi?

    Merci

  • bonjour,

    toujours un problème de widgétisation et de footer à cause d’une erreur que je n’ai pas réussi à résoudre (Warning: Cannot modify header information – headers already sent by…) malgré les forums que j’ai pu trouver ; j’ai essayé de mettre login.php en utf-8, ca fonctionnait mais ca ne marche plus une fois déconnectée, impossible d’accéder au dashboard! en fait, dès que je mets quelque chose dans functions.php, plus rien ne fonctionne !

    et puis autre problème avec les css cette fois, la sidebar se met toujours en dessous, mais seulement avec l’index (avec page.php ça marche parfaitement)

    contenu de index.php :—————

    <div class= »post » id= »post-« >
    <a href= » » title= » »>

    Catégorie: |

    Oooopppsss…
    La page que vous demandez est indisponible. ».

    contenu de page.php :—————

    <div class= »post » id= »post-« >
    <a href= » » title= » »>

    <?php edit_post_link(‘Modifier cette page’,  »,  »); ?>
    Oooopppsss…
    Désolé, mais cet article est indisponible.’.

    et pour le css—–
    body {
    font-family: Helvetica,Lucida Grande, Arial,Sans-serif;
    line-height: 1.5;
    font-size: 0.8em;
    text-align: left;
    background-color: #e3e3e3;
    color: #970C4B;
    }

    #page {
    margin: 0 auto 0 auto;
    width: 750px;
    background-color:#ffffff;
    }

    header {
    font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;
    margin: 0 auto 0 auto;
    background:#f3d2d1;
    width: 750px;
    padding: 0 10px 20px 10px;
    }

    #content {
    float: left;
    width: 500px;
    margin-bottom: 20px;
    }

    .sidebar {
    float: right;
    width: 250px;
    }—————

    qu’est ce qui ne va pas??? merci d’avance; Marion

  • Salut,

    Je suis en train de suivre tes tutos avec attention. Seulement j’ai l’impression que dans la partie CSS il manque dans le footer un margin:0 auto; pour qu’il se cale comme le conteneur page 😉

  • salut francis

    j’ai le même probleme que marion.
    le probleme ne vient pas du CSS
    donc est ce que tu pourrais
    m’envoyer tes fichiers
    sidebar.php ,single.php et content.php ?

    merci d’avance
    et merci pour ton super tuto

  • Salut Charles, va faire un tour au tuto 23, tu trouveras tous les fichiers à télécharger ! 😉

  • merci francis

    j’aurais peut être du lire
    les commentaires avant de paniquer
    car tu le dis déjà plusieurs fois .

    désolé pour le derangement
    et surtout continue comme ça .

Success, your comment is awaiting moderation.