Differenziare i contenuti delle righe dell'elenco degli argomenti con colori diversi.

[Renato_Mendes]

Ehi, ragazzi! Questa è una soluzione interessante. Mi chiedevo se fosse possibile impostare un colore di sfondo leggermente diverso per il titolo e i tag, in modo da rendere più facile identificare l’argomento successivo. Così com’è ora, lo trovo piuttosto confusionario, perché tutto sembra quasi uguale.

Grazie

[Canapin (Coin-coin le Canapin)]

Ciao Renato
Puoi individuare questi elementi con gli strumenti di ispezione del tuo browser, puoi leggere di questo qui:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

Tuttavia, il modo in cui questi elementi sono stilizzati utilizza molti selettori diversi tramite annidamento dal codice SCSS originale.

Inizierei con il CSS compilato e lo modificherei se avesse effetti indesiderati:

Argomenti con post non letti:

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

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

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

Argomenti visitati:

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

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

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

Gli estratti non hanno uno stile specifico per gli argomenti visitati (ma possono essere modificati con CSS aggiuntivo).

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