하위 카테고리 아이콘 색상만 보이도록 하고 싶습니다.
메인 카테고리는 아이콘 색상이 없어야 합니다.
이중 색상(two-tone)처럼 보이도록 하고 싶지 않습니다.
어떻게 하면 될까요?
[image]
이 기능에 대한 설정이 있는지 확실하지는 않지만, CSS를 사용하여 변경해 보는 방법을 보여드리겠습니다:
-
아이콘에서 마우스 오른쪽 버튼을 클릭한 후 '검사’를 선택하세요.
-
그러면 브라우저 개발자 도구가 열립니다. (참고: 여기서는 Chrome을 사용하고 있지만 대부분의 브라우저에서도 동일한 작업을 수행할 수 있습니다!) 볼 것이 많지만, 주로 두 가지 섹션에 집중할 것입니다. 페이지의 각 부분을 중첩된 계층 구조로 보여주는 'Elements(요소)'와 선택된 요소에 영향을 미치는 CSS를 보여주는 'Styles(스타일)'입니다.
-
일반적으로 마우스 오른쪽 버튼 → 검사를 사용하면 편집하려는 요소에 꽤 근접하게 도달할 수 있지만, 때로는 조금 더 찾아봐야 합니다. 이 경우
<span>요소가 선택되었지만, 아이콘을 담당하는 요소가 그 안에 있는 것으로 보입니다:::before요소입니다.
-
올바른 요소를 찾는 방법 중 하나는 요소 패널에 나열된 항목에 마우스를 올리는 동안 페이지를 관찰하는 것입니다.
::before에 마우스를 올리자 아이콘만 하이라이트되었습니다:
-
Styles 패널에서 배경을 빨간색으로 설정하는 선언이 있지만, 2색 배경으로 설정하는 다른 규칙에 의해 오버라이드되고 있음을 볼 수 있습니다. (참고: Styles 패널의 CSS를 자유롭게 편집하여 실험해 보세요. 모든 변경 사항은 일시적이며 페이지가 새로고침되면 되돌려집니다. 개별 선언을 켜고 끄어 효과를 확인할 수도 있습니다.)
-
상단 규칙에서 셀렉터 부분을, 하단 규칙에서 원래의 background 선언을 복사하여 새 규칙을 만들어 다시 오버라이드할 수 있습니다.
-
이 새 규칙은 사용자 정의/테마 CSS에 들어가야 하며, 모든 것이 올바르게 작동했다면 아이콘은 하위 카테고리를 나타내는 단색으로 표시되어야 합니다!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}
자세한 설명 감사합니다
음, 이상하네요. 컴퓨터에서 모바일 뷰를 사용할 때 동일한 CSS 규칙이 표시되는데, 왜 다르게 표시되는지 잘 모르겠어요. 떠오르는 생각은 새 코드가 Common.scss 섹션에 있도록 해서 두 모드에서 모두 사용되도록 확인하는 것입니다.
아, 전부 내 탓이네
잘 작동하고 있고, 문제없어
괜찮아요, 잘 작동해서 다행이에요! 