그룹 플레어 크기를 키울 수 있을까요?

개발
,
1

특정 그룹에 속해 있을 때 이름 옆에 표시되는 flair의 크기를 쉽게 늘릴 수 있는 방법이 있나요?

.
Screenshot 2024-08-19 094148

2

테마 또는 컴포넌트의 공통 CSS에서 다음과 같은 작업을 수행할 수 있습니다.

아바타 플레어를 기본 40px에서 60px로 리사이즈하는 예시:

.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}

기본 40px

This is a screenshot of a profile page from a social media platform, featuring an avatar of a person with purple hair and glasses. (Captioned by AI)
This is a screenshot of a profile page from a social media platform, featuring an avatar of a person with purple hair and glasses. (Captioned by AI)623×390 53.2 KB

60px

This is a digital screenshot of a user profile or dashboard, likely from a social media platform or a gaming community. (Captioned by AI)
This is a digital screenshot of a user profile or dashboard, likely from a social media platform or a gaming community. (Captioned by AI)623×390 51.9 KB

다음 컴포넌트를 사용하면 플레어 위치를 변경할 수 있습니다:

3

여기에 있는 게 맞나요?

Screenshot 2024-08-19 121836
Screenshot 2024-08-19 1218361067×273 12.1 KB

4

그렇습니다. (헤더 탭에 강조 표시된 다른 것이 있습니까?)

제가 올린 코드는 여기에 있어야 합니다:

The image displays a computer screen with a text editor open, showing a section of code being edited. The code is for a CSS file, specifically targeting a div named "footer". The text editor has a dark theme, and the code is written in a light color, which stands out against the dark background. The focus of the image is on the CSS file, indicating that someone is working on or studying this code. (Captioned by AI)
The image displays a computer screen with a text editor open, showing a section of code being edited. The code is for a CSS file, specifically targeting a div named "footer". The text editor has a dark theme, and the code is written in a light color, which stands out against the dark background. The focus of the image is on the CSS file, indicating that someone is working on or studying this code. (Captioned by AI)651×303 19.7 KB

5

네, 전부 있습니다. 게시물에서 플레어는 여전히 20x20입니다.

6

아, 죄송합니다. 1번 게시물을 놓쳤네요. :woman_facepalming:t2:

30px일 경우

.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}

.topic-avatar .avatar-flair, 
.avatar-flair-preview .avatar-flair, 
.collapsed-info .user-profile-avatar .avatar-flair, 
.user-image .avatar-flair, 
.latest-topic-list-item .avatar-flair {
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

기본값 20px

image
image352×132 11.2 KB

30px

image
image391×177 10.8 KB

7

감사합니다! 저는 확실히 코더가 아니어서 도움과 지원에 정말 감사드립니다! :slight_smile:

8

문제는 없어요. 그 px 크기를 세밀하게 조정해서 원하는 대로 맞출 수 있어요. :slight_smile:

10

HEX 색상 코드를 넣으면 다시 작아지는 것을 확인했습니다. 이 부분도 도와주실 수 있나요? :slight_smile:

Screenshot 2024-08-19 205756
Screenshot 2024-08-19 205756581×391 27.2 KB

11

네, 알겠습니다. 여러분이 이 작업을 더 쉽게 할 수 있도록 빠른 테마 컴포넌트를 하나 만들어 봤습니다:

어떤지 알려주세요 :slight_smile: :wrench:
여전히 그룹 아바타 플레어 설정에서 플레어 이미지와 배경색을 직접 변경해야 합니다. 이 컴포넌트는 이미지 플레어와 배경 원의 크기를 조정하기 위한 기본적인 설정만 제공합니다. 데스크톱에서만 작동합니다 - 모바일용도 시도해 봤지만, 화면이 너무 작아서 디버깅할 가치가 없었습니다.

The image displays a settings menu with various theme options, including card settings, card size settings, card profile settings, and post settings. (Captioned by AI)
The image displays a settings menu with various theme options, including card settings, card size settings, card profile settings, and post settings. (Captioned by AI)794×568 47.8 KB

12

이것이 Avatar Size and Shape 에 좋은 추가 사항이 될까요?

13

아, 그거 잊고 있었네. 같은 기능을 하는 거야? 아, 그냥 아바타 관련이구나. 플레어까지 되는 줄 알았어. 음 :thinking: 나쁘지 않을 것 같은데…

내 건 몇 분 만에 대충 만든 거라 꽤 기본적인 수준이야. 아마 입력 필드 형식을 좀 바꿔야 할 것 같아.

14

현재 아바타에만 적용되는 것 같지만, 이 기능이 통합될 수 있다면 그룹 플레어와도 관련이 있어 보입니다. 확인을 위해 직접 실행해봐야 할 것 같습니다.

15

@Lilly “스택킹” 플레어에도 범위를 설정할 수 있을까요? 제가 구상한 기능에서는, 사용자가 속한 그룹의 "종류"에 따라 여러 플레어를 스택할 수 있으면 더 유용할 것 같습니다.

17

@Lilly 채팅에서 왜 내 플레어가 사라지는 건가요? 채팅에서 플레어가 보이게 하는 간단한 방법이 있을까요?

18

제가 아는 한, 플레어는 채팅에서 표시된 적이 없습니다. 기존 기능 요청에 게시물을 추가할 수 있습니다 :slight_smile: