박스 카테고리 배경색 변경

MarcP · 9월 12, 2022, 8:49오전

카테고리 박스의 카테고리 색상 배경을 변경하는 방법을 알아내려고 애를 쓰고 있습니다:

목표는 메인 카테고리 색상을 상속받아 배경에 투명도를 추가하는 것입니다:

이걸 어떻게 하면 되는지 아는 분 계신가요?

Don · 9월 12, 2022, 3:45오후

안녕하세요,

CSS와 템플릿의 약간의 수정으로 가능합니다.

데스크톱에서 카테고리 테두리는 배경색으로도 사용할 수 있는 색상 변수가 있습니다.

이는 테두리 색상인 --category-color 변수입니다.
Screenshot 2022-09-12 at 17.25.56

하지만 이 변수는 16진수(hex) 값이므로 투명도를 설정할 수 없습니다. 대신 투명도도 설정할 수 있는 ::before 의사 요소에 추가할 수 있습니다.

원하시는 대로 설치하거나 포크하여 수정할 수 있도록 컴포넌트로 만들었습니다.

컴포넌트: GitHub - VaperinaDEV/discourse-category-background-color · GitHub

데스크톱용 CSS는 다음과 같습니다:

github.com/VaperinaDEV/discourse-category-background-color

desktop/desktop.scss

main

@import "category-background-mixin";

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            @include category-before-style;
          }
        }
      }
    }
  }

This file has been truncated. show original

모바일에서는 템플릿에 이 색상 변수가 누락되어 있으므로, 여기에서 해당 스타일을 추가해야 합니다:

github.com/VaperinaDEV/discourse-category-background-color

javascripts/discourse/templates/mobile/components/parent-category-row.hbs

22c37769c


      
          {{#unless this.isHidden}}
            <PluginOutlet @name="category-list-above-each-category" @args={{hash category=this.category}} />
            <div data-category-id={{this.category.id}} data-notification-level={{this.category.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}} class="category-list-item category {{if this.isMuted "muted"}}">
              <table class="topic-list">
                <tbody>
                  <tr>
                    <th class="main-link">
                      <CategoryTitleLink @category={{this.category}} />
                    </th>
                  </tr>
                  {{#if this.category.description_excerpt}}
                    <tr class="category-description">
                      <td colspan="3">

이후 데스크톱과 유사하게 --category-color 변수를 사용할 수 있습니다:

github.com/VaperinaDEV/discourse-category-background-color

mobile/mobile.scss

main

@import "category-background-mixin";

.categories-list {
  
  // Category Lists
  .category-list {
    .category-list-item.category {
      position: relative;
      z-index: 0;
      &:before {
        @include category-before-style;
      }
    }
  }
  
  // Category Boxes
  .category-boxes-with-topics,
  .category-boxes {
    .category-box {
      position: relative;

This file has been truncated. show original

데스크톱

모바일

MarcP · 9월 12, 2022, 3:55오후

최고예요!

설명해 주셔서 감사합니다. 이거 좀 가지고 놀아 볼게요!

Don · 9월 12, 2022, 4:21오후

안녕하세요 @MarcP, 카테고리 박스에 이걸 적용하고 싶으셨다는 걸 완전히 놓치고 있었네요. 데스크톱 CSS를 업데이트해서 카테고리 박스에서도 작동하도록 수정했습니다.

MarcP · 9월 12, 2022, 4:31오후

아, 감사합니다. 이미 박스를 어떻게 작동시킬지 알아보고 있었거든요! 생각보다 더 복잡하네요. 정말 감사합니다!

글		댓글	조회수
Inconsistent use of --category-color variable in Default Theme? Product Support	2	595	10월 11, 2022
Background color in categories page (Mobile version) Product Support	6	706	6월 8, 2020
Change Color of Border Boxes on Categories UX	2	780	7월 11, 2020
Adding Transparent Background Image To Categories Product Support	1	705	12월 15, 2018
How can I change the category background in the mobile version? Product Support mobile , horizon-theme	5	246	5월 11, 2026

박스 카테고리 배경색 변경

Related topics