Comment donner un style différent à une catégorie ? (Créer un compte)

  • WordPress :5.7
  • Statut : non résolu
  • Ce sujet contient 19 réponses, 5 participants et a été mis à jour pour la dernière fois par Petit Zebre, le il y a 3 mois.
15 sujets de 1 à 15 (sur un total de 20)
  • Auteur
    Messages
  • #2379305
    Petite Girafe
    Participant
    Initié WordPress
    1 contributions

    Bonjour,

    Ma configuration WP actuelle

    Problème(s) rencontré(s) :
    Il s’agit du site d’un atelier d’écriture.
    Une des catégories, la catégorie “salon”, affiche des textes en ligne.
    Comme ce sont des textes (modestement) littéraires, il faut une mise en page différente pour cette catégorie-là.
    En particulier, une indentation de 20px en début de chaque paragraphe.

    Dans ma CSS, je peux mettre une indentation de 20px, mais (bien sûr) elle s’applique à tout le site !
    Ce n’est pas ce que je veux…
    Voici le code de la CSS tel qu’il s’y présente.
    #content p {margin: 0px;text-align: justify;text-indent: 20px;}
    #content p {text-indent: 0px;text-align: justify;color: #333;margin: 10px 0px;padding: 20px 0 0 0px;width: 460px;}
    Je ne sais d’ailleurs pas lequel des deux est opérant… 😀

    J’ai créé un category-salon.php sur le modèle du category.php, mais… je ne sais pas quoi y écrire ?
    Comment créer une apparence différente pour une catégorie donnée.
    Un grand merci à qui se penche sur ma question !

    #2379306
    Li-An
    Modérateur
    Maître WordPress
    25392 contributions
    #2379324
    Flobogo
    Modérateur
    Maître WordPress
    17607 contributions

    Bonjour,

    Je n’ai pas été voir l’article suggéré par @li-an, mais je vous propose une autre possibilité.

    Si les articles de la catégorie “salon” ont “juste” besoin de l’indexation de 20px, et c’est tout (pas d’autre différences de présentation), ne vous embêtez pas à créer un fichier category-salon.php.
    → Il vaut mieux affiner votre CSS en ajoutant la class correspondant à la catégorie “salon”. (je n’ai pas trouvé la page de cette catégorie, pas pu tester)

    Édit : comme je ne voulais pas mourir idiote, j’ai été voir l’article conseillé par @li-an : en fait, cet article explique (en anglais, mais assez simple à comprendre) comment procéder pour faire ce que je vous ai expliqué ci-dessus. 😉
    Comme quoi, c’est le meilleur conseil qu’on peut vous donner. 🙂

    • Cette réponse a été modifiée le il y a 3 mois et 1 semaine par Flobogo. Raison: Édit
    #2379438
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    Merci à vous deux de m’avoir répondu.
    Et vos deux solutions pointent vers la même chose, ça c’est cool !
    Donc j’y vais de ce pas, potasser cet article.
    Merci !

    #2379641
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    🙁  Je n’y arrive pas.
    Je ne sais pas comment, concrètement, ajouter la class correspondant à la catégorie “salon”.
    Humblement.
    Merci.

    #2379646
    Flobogo
    Modérateur
    Maître WordPress
    17607 contributions

    Pouvez-vous donner l’URL de la “page de catégorie” des articles “salon” ? Ce sera plus concret d’aller voir.

    #2379664
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    Oh, merci.

     

     

    http://www.ecriture-arabesque.fr/biblio/

    Quand on clique sur n’importe quel titre présenté sur cette page (Bibliothèque), il s’ouvre sous forme d’article, catégorisé “Salon”. (Salon de lecture)
    Ce sont ces articles que je voudrais présenter avec quelques impératifs typographiques, (comme le retrait de 20px de la première ligne, principalement)
    Merci de votre coup d’oeil  😉

    #2379729
    Flobogo
    Modérateur
    Maître WordPress
    17607 contributions

    Voilà un exemple de code à placer dans votre CSS personnalisé (dans l’admin du site, le menu Apparence > Personnaliser > CSS personnalisé) :

    #content .category-salon .entry-title {
        color: red;
        margin-left: 20px;
    }

    N’oubliez pas d’enregistrer ce changement 😉

    J’ai volontairement ajouté de la couleur rouge, pour que vous puissiez identifier immédiatement le changement. Là, c’est le titre que j’ai mis en rouge et décalé. Si vous voulez l’appliquer au texte, remplacez .entry-title par p :

    #content .category-salon p {
        color: green;
        margin-left: 20px;
    }

    Cette fois-ci, j’ai mis du vert. Bien sûr, vous pourrez retirer les lignes correspondant au code couleur quand vous aurez trouvé ce qui vous convient.

    L’important, c’est de trouver le bon sélecteur, et de rajouter .category-salon

     

    #2379739
    ferman
    Participant
    Maître WordPress
    4413 contributions

    Je me risque sueurs_froidesà légèrement modifier la suggestion de @flobogo. Si vous ne voulez un retrait que pour la première ligne des paragraphes, il faut plutôt utiliser text-indent que margin.

    #content .category-salon p {
        color: green;
        text-indent: 20px;
    }

    • Cette réponse a été modifiée le il y a 3 mois par ferman.
    #2379752
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    Merci à vous, ça marche exactement comme je voulais… !
    Quel bonheur.
    Et puis moi, j’ai (un peu) progressé.
    Se coucher moins bête…

    #2379755
    ferman
    Participant
    Maître WordPress
    4413 contributions

    Et puis moi, j’ai (un peu) progressé.
    Se coucher moins bête…

    Et pour fêter ça, vous avez même changé de pseudo (petite girafe->petit zèbre). Il est bien connu que le zèbre est beaucoup plus malin et moins empoté  que la girafe  🙂

    #2379756
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    MDR ! Je ne sais même pas comment c’est possible !!!  Comment mon pseudo a-t-il pu changer !!!???
    Je suis en train de rigoler… Alors les deux, c’est bien moi, mais ici je ne suis qu’un Petit Zèbre. (Qui deviendra grand!)
    Merci de la remarque, rien ne vous échappe ! (par exemple que je ne voulais indenter que la première ligne)
    Bravo et merci à tous.

     

    #2379761
    Flobogo
    Modérateur
    Maître WordPress
    17607 contributions

    Si vous ne voulez un retrait que pour la première ligne des paragraphes, il faut plutôt utiliser text-indent que margin.

    Bravo 👏

    je ne voulais indenter que la première ligne

    J’avais un doute, c’est pourquoi mon 1er code visait le titre, au cas où ce serait ce que vous appeliez “la 1ère ligne”

    Il est bien connu que le zèbre est beaucoup plus malin et moins empoté que la girafe

    Parce que le sang monte plus vite au cerveau ?

    Comment mon pseudo a-t-il pu changer !!!???

    Il n’a pas changé, vous vous êtes inscrit 2 fois sur le forum, sous deux pseudos différents.

    #2379775
    Petit Zebre
    Participant
    Initié WordPress
    9 contributions

    En effet, pas claire, la Ptite Girafe avec sa “première ligne” !
    J’en prends de la graine. (Pour les prochaines fois.)
    Et, en effet (rien ne vous échappe, à vous tous!) j’avais tenté une inscription à cheval sur ma Girafe, puis nouvelle tentative au galop sur mon Zèbre…
    Excuses.
    (Donc, en fait, je me suis répondu à moi-même ? Le Zèbre a répondu à la Girafe, c’est ça ?)

     

    #2379799
    Flobogo
    Modérateur
    Maître WordPress
    17607 contributions

    Et quand une girafe se prend pour un zèbre, elle se monte la tête ? 😂

15 sujets de 1 à 15 (sur un total de 20)
  • Vous devez être connecté pour répondre à ce sujet.