색상 변경으로 주제 목록 행과 콘텐츠 구분

개발
1

여러분, 안녕하세요! 흥미로운 해결책이네요. 제목과 태그에 약간 다른 배경색을 설정할 수 있는지 궁금합니다. 그렇게 하면 다음 주제를 식별하기가 훨씬 쉬워질 것 같아요. 현재 상태로는 모든 것이 거의 비슷해 보여서 다소 혼란스럽습니다.

image
image1042×724 85.4 KB

감사합니다 :slight_smile:

2

레나토님, 안녕하세요 :wave:

브라우저의 개발자 도구를 사용해 해당 요소를 지정할 수 있습니다. 자세한 내용은 여기에서 확인할 수 있습니다:

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

다만, 이러한 요소들의 스타일링은 원래 SCSS 코드에서 중첩을 통해 여러 다른 선택자를 사용하고 있습니다.

의도하지 않은 결과가 발생하는지 확인하기 위해 컴파일된 CSS부터 시작해 조정해 보시는 것을 추천합니다:

읽지 않은 게시물이 있는 주제:

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

방문한 주제:

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

발췌문(Excerpts)에는 방문한 주제에 대한 특정 스타일이 없습니다(추가 CSS로 조정할 수는 있습니다).

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