Différencier le contenu des lignes de la liste de sujets en utilisant différentes couleurs

Salut tout le monde ! C’est une solution intéressante. Je me demandais s’il serait possible de définir une couleur de fond légèrement différente pour le titre et les balises, afin qu’il soit plus facile d’identifier le sujet suivant. Tel qu’il est maintenant, je trouve cela assez déroutant, car tout se ressemble presque.

Merci :slight_smile:

Salut Renato :wave:
Vous pouvez cibler ces éléments avec les outils de développement de votre navigateur, vous pouvez en savoir plus ici :
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

Cependant, la façon dont ces éléments sont stylisés utilise de nombreux sélecteurs différents par imbrication à partir du code SCSS d’origine.

Je commencerais par le CSS compilé et je l’ajusterais s’il a des effets indésirables :

Sujets avec des messages non lus :

# titles
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}

# categories
.badge-wrapper.bullet span.badge-category {
    color: var(--primary-high);
}

# tags
.topic-list-item.visited .topic-list-data a.discourse-tag, .latest-topic-list-item.visited a.discourse-tag, .category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Sujets visités :

# titles
.topic-list-item.visited .topic-list-data a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification) {
    color: var(--primary-medium);
}

# categories
.topic-list-item.visited .topic-list-data span.badge-category,
.latest-topic-list-item.visited span.badge-category,
.category-topic-link.visited span.badge-category {
    color: var(--primary-medium);
}

#tags
.topic-list-item.visited .topic-list-data a.discourse-tag,
.latest-topic-list-item.visited a.discourse-tag,
.category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Les extraits n’ont pas de style spécifique pour les sujets visités (mais cela peut être ajusté avec du CSS supplémentaire).

.topic-list .topic-excerpt {
    color: var(--primary-high);
}
2 « J'aime »

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.