Gérer une couleur de fond par catégorie [Résolu/Fermé]

Signaler
Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
-
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
-
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 :)

12 réponses

Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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 <body> dans le fichier header.php du thème que tu utilises
<?php if(is_category('10') ):
$bg=rouge;
elseif (is_category('20') ):
$bg=noir;
else :
$bg=blanc;
endif; ?>
ensuite remplace la ligne juste en dessous
<body <?php body_class(); ?>>
par
<body id="<?php echo $bg;?>" <?php body_class(); ?>>

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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
1
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 :)
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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.
Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
1
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 ?
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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'à </nav>, et mets les juste avant la balise </header> 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
Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
1
C'est peut-être dans mon thème qu'il y a un problème : je n'ai pas de balise <nav> dans le fichier index.php, seulement ceci :
<?php twentytwelve_content_nav( 'nav-below' ); ?>
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
oups je me suis trompé en écrivant c'est dans le fichier header.php pas dans index.php
Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
1
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 !
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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
Messages postés
35
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
11 décembre 2017
1
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 !
Messages postés
5832
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
24 octobre 2020
1 120
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