카테고리에 따라 다른 헤더 로고를 표시하려면?

개발
1

특정 카테고리나 그 하위 카테고리에서 스레드를 열람할 때, 헤더(왼쪽 위)에 다른 메인 로고를 표시할 수 있는 방법이 있을까요? 감사합니다.

2

본문에 category-{category here}라는 클래스가 포함되어 있을 것으로 생각됩니다. 이를 사용하면 카테고리별 CSS를 수정할 수 있습니다.

3

페이지 콘텐츠가 로드된 후 스크립트를 실행하는 방법을 모르겠습니다(저도 궁금합니다!), 하지만 로고 이미지를 변경하려면 다음과 같이 할 수 있습니다:

// if category == "somecategory" then…와 같은 조건에서
document.getElementById("#site-logo").src = settings.theme_uploads.logo_cat1;

여기서 logo_cat1은 커스텀 로고의 변수 이름입니다:
image

4

저도 최근에 같은 문제를 겪었습니다. 오래된 주제인 걸 알지만, 혹시라도 찾아보시는 분이 있을까 봐 해결 방법을 공유합니다.

CSS를 사용하여 body 요소에 있는 클래스를 통해 현재 어떤 카테고리에 있는지 감지할 수 있습니다.

// 일반 사이트 로고 숨기기
body.category-something #site-logo {
    display: none;
}

// 타이틀에 다른 이미지 표시
body.category-something .home-logo-wrapper-outlet {
    height: 50px;
    width: 100px;
    background-image: url($category-something-image);
}

도움이 되셨으면 좋겠습니다 :slight_smile:

5

이미지를 <a> 요소에 직접 넣어야 합니다. 그렇지 않으면 로고 링크가 단순히 사라질 수 있습니다.

// Show another image in the title
body.category-something .d-header .title a {
 ...
}
6

아, 맞아요. 저는 주로 CSS 선택자에 집중하고 있었네요. 그 부분 수정해 주셔서 감사합니다.