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

  • pour être sur
    j’ai copier coller tout les templates, mais
    la sidebar reste toujours en dessous des articles .

    je comprends pas, pourtant j’ai suivis à la lettre le css
    que tu as donné .

  • boidin > Est-ce que tu as des articles sur ton blog ? Visiblement, c’est qu’il y a une div qui n’est pas fermée quelque part…

  • Pigment

    Salut Francis,

    J’ai tout lu depuis le début, je trouve ton tuto très bien expliqué et je sens que je vais pouvoir réussir grâce à tes explications à faire un blog comme je le veux!
    Seul hic, et je n’arrive pas à trouver la solution bien que j’ai lu les commentaires, j’ai un problème de placement des templates.

    Le problème est le suivant : les articles sont collés au header, en haut à droite et continuent à s’afficher en-dessous du header à gauche.
    Puis la side-bar s’affiche à droite, en bas.
    Enfin (oui je sais, désolée…), le footer s’affoche en bas à gauche.

    Je suis love des blogs, je veux trop y arriver, j’espère que tu auras un peu de temps pour me répondre, car j’avoue que je commence à saturer.

    Merci beaucoup

    Voici mon index :

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

    par |
    Catégorie: |

    Oooopppsss…
    Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .

    Merci bcp d’avance

  • Pigment

    Excuse moi, mon code index.php ne s’est pas bien affiché.
    Voici un lien ou tu pourras voir la capture de ce fichier ; http://pigmentinside.wordpress...../index.jpg

    (c’est un autre blog)

    Encore merci d’avance.

    Anaïs

  • Bonjour Pigment,

    Est-ce que tu as fait le test de validité du thème ? Est-ce que tu as eu des erreurs ?

  • Pigment

    Tu sais quoi, je vais tout supprimer et tout recommencer depuis le début, car je suis de plus en plus pomée. J’avais fait le test (qui m’avait affiché 1 erreur que j’ai rectifiée) mais depuis j’ai retouché à mon code.
    Je reviens vers toi si vraiment je ne m’en sors pas après ma deuxième tentative.

    Merci.

  • Pigment > Tu peux aussi récupérer les fichiers au tuto 23… Et si là, ça ne fonctionne toujours pas, c’est qu’il y a un souci dans tes articles et non pas dans le code !! 😉 Bon courage !! 😉

  • Mina

    Bonsoir Francis,

    Avant tout, un énoooooorme merci pour ton super tutoriel. Mais voilà, je suis confrontée à un problème de taille: j’ai rempli ma feuille css avec tous les codes comme indiqué ci-dessus et quand j’utilise le navigateur FF rien ne se passe tandis qu’ avec IE, aucun problème.
    Pourquoi les codes css ne fonctionnent pas avec les 2 navigateurs et comment faire pour y remédier????

    Merci d’avance.

  • Mina > Difficile de te dire comme ça… le site est en ligne ?

  • Mina

    Problème résolu avec l’aide de CCleaner! FF avait sûrement mémorisé le code de la page sans le css. Désolée pour le dérangement mais j’en pouvais plus, j’étais dévorée par l’envie de voir ma toute nouvelle page vêtue de magnifiques codes css!!! Maintenant, plus que jamais, je me rends compte de tout le potentiel créatif des feuilles de style.

    Merci d’avoir répondu aussi vite et sorry pour mon erreur de débutante.

  • DEMauritius

    Salut,

    j’ai un problème de centrage.
    la page ne se centre pas avec la commande margin dans #page.
    Pour centrer la page je dois centrer le texte dans le body et spécifier le texte-align de mon choix dans les autres boîtes (content, sidebar, etc).
    Le code html et le css sont validés, aussi je me demande pour quelle raison la commande de margin dans #page n’est pas prise en compte.
    Je travaille sous Windows 7 et IE8.
    Si quelqu’un a une idée…
    Merci d’avance !

  • Myriam

    Bonjour Francis,

    Encore merci pour tous ces tutos vraiment supers!

    Comme dans certains commentaires j’ai un problème avec ma sidebar qui ne se positionne pas correctement en haut à droite, mais en-dessous du header mais juste en-dessous du premier article écrit.

    Impossible de trouver l’erreur… Peux tu me dire ce qui a aidé les autres personnes pour ce problème? Merci d’avance

  • Bonjour,

    Avant tout, merci pour cette liste de tutos très utile !
    Je m’y suis lancé jusque là sans problèmes, mais là je cale.
    Après avoir suivi les recommendations, le header, footer et sidebar se comportent très bien. Juste le content qui reste à 750 px de large (971 pour moi).
    Je ne vois pas où est l’erreur.

    Le code de l’index.php :

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

    par |
    Catégorie: |

    le code du style.css :

    #content {
    float: right;
    width: 721px;
    margin-bottom: 20px;
    }

    .sidebar {
    float: left;
    width: 250px;
    }

    Si quelqu’un pouvait m’éclairer, ce serait sympa !

  • john

    Déja Merci pour ces tutos de qualités!

    Pour ceux qui ont des problèmes de mise en page verifier bien vos  » div  » sur votre index.php

  • Bonsoir ,

    Moi , sa reste comme c’était avant . Si tu veux je peux t’envoyer mon code que j’ai dans mon style.css

  • anthony

    Moi c’est la meme chose que fabien ! jai tout fait mes code php correctement tout ce passais bien jusqu’attend que j’atttaque le fichier style.css, une fois le style.css fini rien n’a changé C’est comme si javais rien fait et tout est un en dessous de l’autre sur ma page !

    Merci de vos réponses !

    Ps: le plus vite possible c’est important 🙂

  • Salut Fran6,

    Tout d’abord merci pour ce tuto qui me donne le courage de me lancer dans l’aventure WordPress ! Bien écrit, très pédagogique, etc. J’ai parfois un peu de mal à savoir où exactement je dois coller les lignes de code, mais je finis toujours par m’en sortir.

    Juste une petite remarque de perfectionniste maniaque sur cette page : tu as copié-collé le titre « Attributs pour les éléments “content” et “sidebar” une 2nde fois, alors que le paragraphe concerne le footer 😉

    On ne sait jamais, peut-être cela peut-il gêner certains !

  • Bonjour Francis,

    (ton tuto est juste ENORME, et donc un très grand merci).

    J’ai pourtant suivit les indication à la lettre revérifier le code 3X
    y’a rien à faire ma sidebar ne se trouve pas à droite.
    et mes article s’affiche dans leur totalité malgré « excerpt » dans archive.
    Sniif,

    ( je fais ça en local, est ce que ça pourrait venir d’une mauvais configuration?)

    En tout cas encore merci,

    euh ; question y’aura pas les fichiers php à télécharger quelquepart histoire que je vérifie
    le code exact, histoire que ça ne soit pas qu’un simple problème de comprenure? 😉

  • Groucha > Tu peux récupérer les fichiers au tuto 23 !! ,-)

  • Gautier

    Ce tutoriel est superbement superbe, cependant, j’ai un petit problème ! L’orsque je clique sur une catégorie, le thème de la page CHANGE subitement ! Dans le tutoriel on a créer un « archive.php » n’y aurait-il pas moyen de créer un « categories.php » ?? Car ma page des catégories s’affiche bisarement !

  • J’ai eu un petit problème avec le header qui se retrouvait ferré à gauche en lui appliquant ce CSS (comme indiqué dans ton article)

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

    J’ai corrigé en supprimant le « float » et en ajoutant un padding-top de 20 px. Ce qui donne:

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

    Et c’est nickel 🙂

  • martin

    Bonjour,

    c’est étrange, aucune commande css ne marche, mon site reste donc sans présentation.

    pourtant quand je vais dans l’admin wordpress, je trouve bien ma page style.css et j’ai bien <link rel="stylesheet" href=" » type= »text/css » media= »screen » />
    dans le header.

    Je suis désespéré par les CSS 🙁

    w3c me dit que je n’ai pas d’erreur.

  • Votre lien vers le CSS ne doit pas être correcte, faite de simples test avec un border:2px solid black; c’est comme ca que je fonctionne quand le CSS ne me semble pas appliqué, et généralement c’est un problème d’url incorrecte 🙂

  • martin

    c’était le temps qu’il chauffe. Les css sont revenu, après quelques heures de recherche et sans savoir pourquoi.

    merci pour ce tuto qui déchire

  • Bonsoir ,

    J’ai bien fit ce que vous m’avez dit et j’obitens ceci : http://lecourrierdelactu.fr/wp.....screen.jpg

    Pourtant mon style.css est comme ça :

    /*
    Theme Name: Theme du Courrier de L’Actualite
    Theme URI: http://lecourrierdelactu.fr
    Description: Theme Actu
    Author: Fabien

    Thème cree par Fabien pour son site Prof

    */

    body {
    font-family: Lucida Grande, Arial, Helvetica, Sans-serif;
    font-size: 0.8em;
    text-align: left;
    background: #ffffff;
    color: #006699;
    margin: 0;
    }

    #page {
    margin: 0 auto 0 auto;
    width: 750px;
    }

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

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

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

    #footer {
    font-size: 1em;
    background:#cccccc;
    padding: 10px 10px 0 0;
    clear: both;
    width: 740px;
    }

  • Bonjour,

    Tout d’abord merci pour cet excellent tutoriel qui m’a permis d’avoir une bonne base pour réaliser mon site/blog sous wordpress et me permettre maintenant de le personalisé comme bon me semble. J’aimerait donc un peu d’aide pour régler 2 problèmes sur mon css:

    -J’aimerait séparer le header du content/sidebar, en effet ils sont coller et sur mon template une petite ligne d’environ 10-20px serait bien plus jolie.

    -Autre chose, je voudrais que ma sidebar fasse la taille de mon content car je me retrouve avec une sidebar couper en plein milieu. J’ai penser a mettre un Height fixe commun au content et a la sidebar mais en définitive cela risque d’être gênant car je préfère utiliser un grand espace vertical pour les nouveaux articles plutôt qu’une multitudes de pages.

    Voilà un screen pour illustrer mes demandes: http://www.mowwow.fr/dl/screen-marge.jpg

    Merci d’avance.

  • Houla en fait j’ai parler trop vite pour le header c’est bon, j’avais juste mal positionner une image que j’ai utiliser pour faire le top du content+sidebar, problème régler.

    Reste la sidebar avec un background qui s’ajuste au background du content.

  • Alex

    Salut, super tutoriel, bien éducatif 🙂
    Voila le problème que j’ai rencontré si ça peut aider, ne pas oublier de refermer la div « header » tout au début de index .php, après l’invocation du header, ça donne:

    Et merci Fran6.

  • Alex

     »
    « 

  • Allo Francis,

    J’ai des problèmes avec ma sidebar qui ne veux pas aller a droite 🙁 et aussi la bande grise n’apparait pas. J’ai fait la validation et j’ai 26 erreurs, mais quand je regarde mon code pour voir l’erreur, il n’y a pas d’erreurs!! Je suis très confuse, j’ai refait les tutoriaux, et rien. Ça ne fonctionne pas.. peux tu m’aider??

    Merci

    p.s tes tutoriaux sont génials!

  • julie > Est-ce que tu as du contenu ou des plugins d’installés ? Les erreurs peuvent provenir de là. Concernant la sidebar, est-ce que tu travailles en ligne ou en local ? En ligne, j’aurais pu regarder directement, mais c’est probablement une div qui est mal fermée ! 😉

  • steve

    Salut Fran6 j’ai moi aussi 7 erreurs et un avertissement sur la validation : essentiellement des erreur de balise mal fermer selon la w3c mais pourtant c’est générer par les requête il me semble, des erreurs ‘attribute « action » not specified’, ‘end tag for « input » omitted, but OMITTAG NO was specified’ et pour finir ‘start tag was here’.

    Voila pour la validation.
    et j’ai une erreur de style CSS, je dis une erreur car au niveau du ‘header’, le padding affecte les bordure intérieur et ne devrais pas affecter la largeur total du header comme sur le screenshot que tu nous a montrer parcontre avec ce paramétrage (padding: 0px 10px 20px 10px;) le header se retrouve maintenant avec 20px en trop sur la droite.

    j’ai essayer diverse combinaison et a chaque fois soit la largeur ou soit la hauteur se retrouve additionner du nb de px ajouter dans le paramétrage.

    svp aidez-moi.

  • Nicolas

    Il me semble qu’il n’est jamais trop tard pour dire merci ! Des mois et des mois que je lis les tutos, sans avoir le temps de m’y coller ! Je me régale. Merci beaucoup !

  • liming

    Bonjour,
    Merci pour tes tutos. Super pour découvrir et apprendre les bases.
    Hyper détaillé, un bonheur pour une néophyte comme moi.

    J’ai suivi toutes les étapes.
    Mais j’arrive à un problème sur le style.css.

    Le header est aligné correctement, mais contente, sidebar et footer se retrouvent décalés, comme si ils étaient en dehors de la div page.

    Pourtant, j’ai exactement le meme code que tu as indiqué au cours des tutos précédents.
    Que dois-je faire alors?

    Merci

  • Pascalou

    Aïe, me voici de retour.
    Cette fois ci je bloque sur le positionnement du footer à l’aide du CSS.

    Chez moi, le footer n’est pas aligné sur le header, il est collé tout au bord à gauche de l’écran.
    Tout le reste est OK mais rien à faire pour le footer.

    Il est tout de même grisé donc les CSS sont bien pris en compte, il n’y a pas de pb sur le nom de la classe ou autre chose dans le genre…

    J’ai vérifié le fichier footer.php et il est OK.
    Et l’appel au footer est correctement placé après l’appel au sidebar dans les fichiers archive, index, search, page et single.php 🙁

    A noter que le footer est mal positionné dans toutes les pages du blog.
    Je viens de passer une heure à chercher ce qui cloche mais rien à faire.

    Vous auriez une idée ?

  • bonjour

    merci pour tout ces conseils.
    Mais j’ai un petit soucis avec l’affichage générale de mon site

    Pourriez vous me dire quelle étape j’ai loupé

    merci d’avance

  • Bonjour et merci pour ce super tuto,

    pour les trois derniers commentaires ou pour tous ceux qui ont des problèmes d’affichage, il faut laisser la balise div id= »page » qui se trouve dans le header ouverte (donc supprimer la balise qui la ferme) et rajouter une balise div fermante dans le footer. De manière à bien la fermer et que l’id « page » englobe bien toutes les principales balises.

  • Clem

    Bonjour,

    merci pour ce tutoriel, super complet jusqu’ici 🙂
    Problème, je n’arrive pas a aligner correctement ma mise en page. La Sidebar reste en dessous du contenu quoi que je fasse.
    Le dernier message de Ruben66 répond peut-être à ma question, mais je suis pas sur de l’avoir compris…
    Si quelqu’un pouvait me filer un coup de main…

    Merci d’avance,

    Clem

  • Ben

    Salut Francis et tout d’abord, un grand merci pour ce super tutoriel, adapté à tous. J’ai démarré ton tutoriel, il y’a quelques heures, après l’avoir lu déjà plusieurs fois sans passer à l’acte par le passé.

    Je me retrouve avec un problème qui ne m’a pas l’air d’avoir été évoqué dans les commentaires. Ce qui m’étonne c’est que j’ai suivi à la lettre ton tutoriel, et je me retrouve avec une marge au dessus du header et en dessous du footer. Ce n’est pas la première fois que ça m’arrive, en tentant de coder d’autres sites web. J’ai codé en UTF 8 sans DOM.

    Après plusieurs tentatives diverses et variées de bidouillages, bas de gamme, je commence à nager dans mon ignorance. Pourrais tu me venir en aide, s’il te plait ?

    Voici un lien pour voir à quoi ressemble mon site web, normalement tu dois avoir accès au code source de cette façon. Je travaille en locale pour le moment et je n’ai donc pas de version en ligne.

    http://jsbin.com/atehaz/2

    Merci par avance pour ton aide

  • Ben

    Salut Francis et tout d’abord, un grand merci pour ce super tutoriel, adapté à tous. J’ai démarré ton tutoriel, il y’a quelques heures, après l’avoir lu déjà plusieurs fois sans passer à l’acte par le passé.

    Je me retrouve avec un problème qui ne m’a pas l’air d’avoir été évoqué dans les commentaires. Ce qui m’étonne c’est que j’ai suivi à la lettre ton tutoriel, et je me retrouve avec une marge au dessus du header et en dessous du footer. Ce n’est pas la première fois que ça m’arrive, en tentant de coder d’autres sites web. J’ai codé en UTF 8 sans DOM.

    Après plusieurs tentatives diverses et variées de bidouillages, bas de gamme, je commence à nager dans mon ignorance. Pourrais tu me venir en aide, s’il te plait ?

    Voici un lien pour voir à quoi ressemble mon site web, normalement tu dois avoir accès au code source de cette façon. Je travaille en locale pour le moment et je n’ai donc pas de version en ligne.

    http://jsbin.com/atehaz/2

    Dans firebug, je vois bien qu’il y’a une marge de 28px mais elle se situe au dessus du Body, dans :

    Merci par avance pour ton aide

  • Clem

    Mea culpa, j’ai repris le tutoriel depuis le debut et j’avais du faire une erreur quelque part, tout fonctionne, je peux aller à la prochaine étape 😉

  • Michaël

    Salut Francis,

    Je ne sais pas si on te l’as déjà dit mais à mon avis il y a une petite erreur de copier/coller avec le titre « Attributs pour les éléments “content” et “sidebar”: ».
    Sinon j’adore tes articles. C’est du bon travail.

    Bravo et merci surtout.

  • Salut Francis,

    Moi aussi je te remercie bien pour tes tutos. Tu es très pédagogue et tout est clair !
    J’ai suivi à la lettre tes tutos, mais j’ai tout de même eu quelques erreurs à la validation Xhtml (visiblement, j’ai pas dû tout bien faire, vu que ça marche pour les autres… :)).
    Je me suis dis que j’allais tout de même poursuivre, mais en faisant le tuto sur les feuilles de style, rien ne se passe sur mon site 🙁 La typo ne change pas, ni la taille, ni la couleur, bref, rien !
    Je pense tout reprendre depuis le début mais avant d’entreprendre cette démarche, aurais-tu une idée de se qui cloche ?

    Merci à toi !

  • Le problème semble résolu.
    Comme l’a mentionné un internaute plus haut, j’ai utilisé Ccleaner, et cela a fonctionné !

    Merci à cet internaute 😉
    Lolita

  • Emilie

    Bonsoir,

    J’ai récemment décidé de créer mon blog et je suis actuellement en train de créer mon propre thème grâce à votre livre Le Campus WordPress 3. Jusque là c’est un sans faute, votre livre est très bien fait.

    Mais voilà je bloque : je suis arrivée au paramétrage des éléments généraux de mon thème et ma balise page ne fonctionne pas.

    /*
    Theme Name: Tallie2012
    Theme URI: http://www.blogueusedudimanche.com/
    Description: Thème créé pour le blog Blogueuse du dimanche.
    Version: 1.0
    Author: Emilie Maillot
    Author URI: http://www.emilie-maillot.com/

    Creation Theme by Emilie Maillot || http://www.blogueusedudimanche.fr
    */

    body {
    font-family: « Trebuchet MS », « Arial Narrow », Arial, sans-serif;
    font-size: 0.9em;
    text-align: left;
    background: #ffffff;
    color: #000;
    margin: 0;
    padding: 0;
    }

    #page {
    margin: 0 auto 0 auto;
    width: 900px;
    }

    La balise body fonctionne très bien mais aucun changement en ce qui concerne #page, mon blog reste en affichage plein écran. Une idée pour m’aider ?

    Merci d’avance,

    Emilie

  • Emilie

    Re,

    Mes problèmes venaient des balises div, c’est réglé.

    Bonsoir,

    Emilie

  • Une petite astuce :
    pas besoin de doubler : margin: 0 auto 0 auto;
    margin: 0 auto; est suffisant.

  • Emilie

    Merci de l’info !

  • Lyn

    Alors tout d’abord un grand merci pour tout le travail effectué dans ce blog, c’est très exhaustif et vraiment bien expliqué 🙂

    Par contre je bloque à cette étape car ma feuille css ne semble pas être appelée, j’ai beau faire des modifs rien ne bouge sur mon blog. Histoire d’être sûre j’ai c/c les fichiers p.23, mais rien ne change à la mise en forme. Pourtant ma validation W3C est ok :/

    Auriez-vous des pistes ?

    Merci ^^

Success, your comment is awaiting moderation.