Gérer une couleur de fond par catégorieRésolu/Fermé

Question

Bonjour, 

Je débute avec Wordpress et j'essaye de mettre en page mon blog en passant directement par le fichier style mais j'avoue avoir avoir du mal :)

Je voudrais obtenir un style différent par catégorie.
Pour comprendre le fonctionnement j'ai d'abord utilisé le menu Apparence de l'admin wordpress et cela fonctionnait bien : j'avais un fond orange, et le header et le centre de ma page restaient délimités par un cadre blanc (le wrapper si j'ai bien compris).

Mais lorsque je veux obtenir ce résultat dans mon fichier style, la couleur de fond est bien changée, par contre l'affichage n'est pas bon car une partie de mon cadre disparait, et au dessus du header cela reste blanc : http://www.cuisiner-simple.fr/category/plats-faciles

J'ai essayé de reprendre les styles correspondants au wrapper mais il n'y a que ça dans mon thème :

    .wrapper {            border-top: none;            box-shadow: none;    }

Je ne vois donc pas où est géré le fameux "cadre blanc", si vous pouvez m'aider, merci :)

Configuration: Windows 7 / Firefox 29.0

elgazar · Answer

tu tes compliques la vie, il faut utiliser les marqueurs conditionnels de wordpress et afficher la couleur de fond selon la catégorie affiché. Copie ce code avant la balise dans le fichier header.php du thème que tu utilises ensuite remplace la ligne juste en dessous > par > maintenant ouvre le fichier css et ajoute ces lignes #rouge { background: #ff0000; }#bleu{ background: #000; }#blanc { background: #fff ; } et c'est tout!!! Petites explications, le premier code dit que si c'est la catégorie 10 qui est affichée, la balise body aura l'id rouge (elle recherchera donc #rouge dans ton css), si c'est la catégorie 20, l'id de la balise body deviendra noir et pour toutes les autres catégories l'id est blanc. Pour avoir autant de couleurs que de catégories, il suffit d'ajouter un elseif (is_category('lacategoriedetonchoix') ): $bg=la couleurdetonchoix; puis d'ajouter l'entrée correspondante dans le fichier css Pour trouver l'iddes catégories, il suffit d'aller articles=>catégories et de passer le curseur sur le nom d'une catégorie, l'id apparaitra en bas de la page

lynayanami · Answer

Bonjour elzagar,

Merci beaucoup pour ta réponse mais je me trouve avec le même problème que précédemment : le fond est changé mais pas de manière aussi propre que quand je le fais directement dans Wordpress : je n'ai plus de marge entre ma page centrale et mon fond, et il reste un bandeau blanc en haut.

Voir ici : http://www.cuisiner-simple.fr/category/les-entrees-ou-aperitifs-sales

Donc ce que je voudrais c'est apprendre à gérer ces marges dans les styles, car là c'est pas joli joli :)

elgazar · Answer

tu n'a pas de marge sur ton contenu, tu as juste l'impression qu'il y en a une quand tu as un fond blanc donc tu dois la mettre dans la div qui contient tout ton contenu, même chose pour le haut normalement le header est collé en haut donc soit tu as une div vide (mais qui a toujours une hauteur minimum) soit tu as un margin-top (ou un padding-top pour la div header) qui provoque ce décalage et l'apparition du fond blanc central

elgazar · Answer

En fait je viens de regarder rapidement et je ne sais pas ce que tu as fait mais tu as surement mal bidouillé les codes css  car sur mon wordpress de test, j'ai bien une marge interne et pas d'espace en haut.

lynayanami · Answer

Non je n'ai rien bidouillé d'autre, je débute et c'est une des premières choses que j'ai commencé à "bidouiller" :)

J'utilise un thème enfant histoire de ne pas casser le thème principal, peut-être y a t-il d'autres éléments à reprendre ?

elgazar · Answer

je suis arrivé a reproduire ce que tu veux sans faire de thème enfant , sans toucher aux css existantes et en seulement quelques secondes de bidouille. Utilise simplement le thème twentytwelve et suis le tuto étape 1 : on va faire passer le menu horizontal sous ton image, ouvre le fichier index.php, , copie depuis < nav> jusqu'à , et mets les juste avant la balise puis efface les anciennes lignes au dessus de l'image qui ne servent plus à rien Maintenant tu as logiquement le nom de ton site et sa description puis l'image et enfin le menu horizontal etape 2 : tu mets le code pour les couleurs par catégories étape 3 : si tu utilises les mises a jour automatiques je te conseille de renommer le dossier twentytwelve puis de renommer le theme name qui apparait dans le fichier style.css puis d'activer a nouveau le thème cela évitera ainsi les mises a jour automatique qui te ferais perdre toutes les modifications etape 4 tu as plus qu'a admirer ton site

lynayanami · Answer

C'est peut-être dans mon thème qu'il y a un problème : je n'ai pas de balise

elgazar · Answer

oups je me suis trompé en écrivant c'est dans le fichier header.php pas dans index.php

lynayanami · Answer

Alors en attendant j'avais trouvé une solution alternative il faut comme tu le dis passer par le thème en ligne et là j'ai déclaré un fond. Et grâce au code que tu m'as donné ce fond peut ensuite être remplacé.

Voilà, mille mercis !

elgazar · Answer

après rien ne t'empêche de mettre une image gridée pour encore mieux symboliser les continents au lieu de mettre un simple aplat de couleur, il suffit de mettre les css correspondants dans les div rouge, bleu, etc

exemple d'image gridée : casimages.com/img.php?i=140526050301482235.jpg
le but étant que le motif japonais soit juste a coté de ta div centrale ce qui est quand même mieux pour symboliser l'asie

lynayanami · Answer

Tout à fait, je pense en fait gérer un bandeau par rubrique, avec un fond plus travaillé que ça :) Mais dans un premier temps j'allais au basique pour voir comment distinguer mes catégories, encore merci !

elgazar · Answer

De rien !!  Avec les marqueurs conditionnels de wordpress, tu as de quoi t'amuser puisque les possibilités sont vraiment très grandes pour tout personnaliser

Gérer une couleur de fond par catégorie

12 réponses

Discussions similaires

Newsletters