기본 배지 색상 변경 (동, 은, 금)

개발
1

배지의 색상을 금, 은, 동에서 우리 테마 색상에 더 잘 어울리는 3가지 색으로 변경할 수 있을까요? 조금 더 잘 어울리도록 변경하고 싶습니다.

2

저는 CSS 마스터는 아니지만, 제 해결책은 다음과 같습니다… 아래에서 색상을 원하는 대로 변경하여 테마 색상에 더 잘 맞도록 하세요. 또한 이 토픽을 읽어보시는 것을 추천드립니다. 과거에 제 사이트에서 멋진 효과를 만들어내는 법을 배우는 데 큰 도움이 되었거든요.

브론즈

.badge-card .badge-contents .badge-icon.badge-type-bronze .fa {
    color: #cd7f32 !important;
}

실버

.badge-card .badge-contents .badge-icon.badge-type-silver .fa {
    color: silver !important;
}

골드

.badge-card .badge-contents .badge-icon.badge-type-gold .fa {
    color: #e7c300 !important;
}
4

전설이시네요. 정말 감사합니다!

5

inspect만 사용해서 요소를 찾고 계신 건가요? 모두 변경은 했는데, 이제 사용자 카드에 표시되는 항목들을 작업하려 하고 있습니다. 크롬 인스펙트를 사용해 요소 이름이 무엇인지 확인하는 게 맞는 방법인가요?

6

네, 커스터마이징해야 할 항목의 클래스를 찾기 위해 요소를 검사해 보세요. 스타일 가이드도 유용합니다.

7

대단하네요! 그 스타일 가이드가 정말 핵심이었어요. 덕분에 출시 전 스타일링을 전부 조정할 수 있었어요. 혹시 그걸로 관리자 섹션에 접근할 수 있는지 아세요? 찾아보려 해도 찾을 수가 없었어요. 이제 남은 작업은 신뢰 수준별 사용자 색상뿐이에요. 인스펙터를 사용해서 변경을 시도해 봤는데, 이 작은 청동색 컨테이너 색상은 어떻게 해도 바뀌질 않더라고요. 이건 마지막 작업이라 오늘 꼭 마무리할 거예요, 하하

Screenshot 2023-07-30 at 8.02.18 AM
Screenshot 2023-07-30 at 8.02.18 AM560×222 4.31 KB

8

관리자 대시보드에 있는 것이므로 일반 사용자는 아무튼 볼 수 없어요. 하지만 여기 있습니다:

TL 1:

.user-metrics .table-cell.user-basic {
    background: [여기에 색상 코드 또는 변수를 입력하세요];
}

TL 2:

.user-metrics .table-cell.user-member {
    background: [여기에 색상 코드 또는 변수를 입력하세요];
}

TL 3:

.user-metrics .table-cell.user-regular {
    background: [여기에 색상 코드 또는 변수를 입력하세요];
}

TL 4:

.user-metrics .table-cell.user-leader {
    background: [여기에 색상 코드 또는 변수를 입력하세요];
}
9

놀랍네요. 제 OCD가 정말 고맙다고 합니다!!! :joy: