Comment modifier l'arrière-plan de la catégorie dans la version mobile ?

[Vsekraski (Андрей)]

Bonjour. Je ne parviens pas à modifier l’arrière-plan de la catégorie. Existe-t-il une méthode pour le faire ?

[Lilly (Lillian)]

Je pense que cela pourrait être délicat à réaliser avec Horizon^[1], mais quelque chose comme cela fonctionnera dans un composant de thème. La couleur dépendra de la variable que vous utilisez (par exemple : --tertiary-low provenant des palettes de couleurs pour le mode clair/sombre). Vous pouvez également créer vos propres variables et ajouter plus de complexité.

Dans un composant de thème, en CSS personnalisé :

@use "lib/viewport";

//** cibler l'ID de catégorie pour une catégorie spécifique **//

.category-box[data-category-id="4"] {

// ** s'applique uniquement sur mobile ** //

  @include viewport.until(md) {
    .category-box-inner {
       background: var(--tertiary-low);
    }
  }
}

Avec la palette de couleurs actuellement utilisée sur votre site :

mode clair :

mode sombre :

---

1. je trouve qu’Horizon est pénible à personnaliser ↩︎

[Lilly (Lillian)]

Si vous souhaitez utiliser des couleurs spécifiques qui ne figurent pas dans la palette et qui changeront avec le mode sombre/clair, vous pouvez utiliser l’onglet des définitions de couleurs dans le même composant :

$bg-light: aqua;
$bg-dark: blueviolet;

:root {
  --category-id-4-background: #{dark-light-choose($bg-light, $bg-dark)};
}

[chapoi]

Juste pour préciser :

Horizon n’est pas conçu pour être personnalisé.

Si vous souhaitez effectuer des personnalisations, la recommandation officielle est de commencer par le thème Foundation et de l’utiliser comme base.

Comme expliqué ici

@Discourse

Nous recommandons aux sites intéressés par la personnalisation d’utiliser le thème Foundation à la place.

[Lilly (Lillian)]

C’est triste, car les administrateurs souhaitent personnaliser leurs sites. C’est l’une des grandes qualités que les gens apprécient chez Discourse.

[chapoi]

Oui, si tu peux l’ajuster, bien sûr, vas-y. « Non » signifie que tu ne peux pas.

Mais ce n’est pas prévu pour cela, nous ne l’avons donc pas conçu dans l’idée de le personnaliser facilement. Il est destiné à être un thème prêt à l’emploi pour les personnes moins techniques.