모바일 버전에서 카테고리 배경을 어떻게 변경하나요?

[Vsekraski (Андрей)]

안녕하세요. 카테고리의 배경을 변경할 수 없습니다. 이 기능을 사용할 수 있는 방법이 있을까요?

[Lilly (Lillian)]

Horizon으로 이걸 구현하는 건 좀 까다로울 수 있을 것 같아.^[1] 하지만 테마 컴포넌트에서는 이런 방식으로 작동할 거야. 사용 변수에 따라 색상이 달라지는데, (예: 다크/라이트 모드 색상 팔레트의 --tertiary-low). 직접 변수를 만들어 더 복잡한 구조를 만들 수도 있어.

테마 컴포넌트의 사용자 정의 CSS:

@use "lib/viewport";

//** 특정 카테고리의 카테고리 ID를 타겟팅 **//

.category-box[data-category-id="4"] {

// ** 모바일에만 적용 ** //

  @include viewport.until(md) {
    .category-box-inner {
       background: var(--tertiary-low);
    }
  }
}

현재 사이트에 사용 중인 색상 팔레트:

라이트 모드:

다크 모드:

---

1. Horizon은 커스터마이징이 꽤 번거롭다는 걸 알아 ↩︎

[Lilly (Lillian)]

다크/라이트 모드에 따라 변경되는 팔레트에 없는 특정 색상을 사용하려면, 해당 컴포넌트의 색상 정의 탭을 사용할 수 있습니다:

$bg-light: aqua;
$bg-dark: blueviolet;

:root {
  --category-id-4-background: #{dark-light-choose($bg-light, $bg-dark)};
}

[chapoi]

참고로 말씀드리자면:

Horizon 테마는 커스터마이징을 위한 것이 아닙니다.

커스터마이징을 원하신다면 공식적으로 권장하는 방법은 Foundation 테마를 기반으로 시작하는 것입니다.

여기에서 설명하고 있듯이

@Discourse

커스터마이징에 관심 있는 사이트는 Foundation 테마를 사용하는 것을 권장합니다.

[Lilly (Lillian)]

관리자들이 사이트를 커스터마이징하고 싶어하는 데, 그게 안 되니 아쉬워요. 디스코스를 좋아하는 이유 중 하나가 바로 이런 점이었거든요.

Horizon 테마 버그: 토픽 목록에서 카테고리 헤딩 컨테이너가 고정됩니다

You just made the way forward: use custom CSS to tweak to your preferences

[chapoi]

네, 조정할 수 있다면 물론 진행하셔도 됩니다. '아니오’는 할 수 없다는 뜻이 아닙니다.

하지만 원래 그렇게 설계된 것이 아니라, 쉽게 커스터마이즈할 수 있다는 점을 염두에 두고 만든 것이 아닙니다. 기술적으로 덜 숙련된 사람들을 위한 바로 사용 가능한 테마로 의도된 것입니다.