Unterscheiden Sie Inhalte aus der Themenliste anhand unterschiedlicher Farben

[Renato_Mendes]

Hallo Leute! Das ist eine interessante Lösung. Ich habe mich gefragt, ob es möglich wäre, eine etwas andere Hintergrundfarbe für Titel und Tags festzulegen, damit man das nächste Thema leichter erkennen kann. So wie es jetzt ist, finde ich es ziemlich verwirrend, weil alles fast gleich aussieht.

Danke

[Canapin (Coin-coin le Canapin)]

Hallo Renato

Sie können diese Elemente mit den Entwicklertools Ihres Browsers anvisieren. Hier erfahren Sie mehr darüber:

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

Wie diese Elemente gestylt werden, verwendet jedoch viele verschiedene Selektoren durch Verschachtelung aus dem ursprünglichen SCSS-Code.

Ich würde mit dem kompilierten CSS beginnen und es anpassen, wenn es unbeabsichtigte Auswirkungen hat:

Themen mit ungelesenen Beiträgen:

# 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);
}

Besuchte Themen:

# 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);
}

Auszüge haben keinen spezifischen Stil für besuchte Themen (kann aber mit zusätzlichem CSS angepasst werden).

.topic-list .topic-excerpt {
    color: var(--primary-high);
}