Discord용 맞춤 CSS

모딩 Discord는 TOS에 반대하는 것이 아닙니까?

예.

금지된 사람이 있습니까?

아니.

불화를 수정하는 것이 안전합니까?

예. 일부 Discord 개발자는 Discord 모드의 오픈 소스 개발에 적극적으로 참여합니다. 모더를 금지하고 싶었다면 이미 금지했을 것입니다.

소개

알겠습니다. 불일치가 꽤 좋아 보이지만 최고는 아닙니다. 수정하겠습니다.

Modded Discord 소개

이를 시작하려면 수정된 디스코드 클라이언트가 필요합니다.

브라우저에서 discord를 사용하더라도 설치가 매우 쉬운 goosemod를 추천합니다.

https://goosemod.com/

이것을 설치하면 디스코드 클라이언트에 몇 가지 새로운 기능이 생깁니다.

친구 메뉴에는 다음과 같은 테마 및 플러그인 버튼이 있습니다.



지금 Revert Rebrand와 Forgotten Keep의 2개 테마를 설치하는 것이 좋습니다. 검색하고 설치를 클릭하세요.

그렇게 하면 discord가 이미 10배 더 좋아 보입니다.

맞춤 CSS 작성 위치

Goosemod는 사용자 정의 CSS 섹션을 옵션 메뉴에 추가합니다.

설정으로 바로 가기



이제 goosemod 섹션까지 아래로 스크롤하고 Custom CSS를 클릭합니다.

커스텀 CSS로 물건 숨기기

자, 불화 개선을 시작하겠습니다.

Discord는 어디를 가든 그들의 프리미엄 서비스인 Nitro를 목구멍에 밀어넣는 것을 좋아합니다. 이 모든 것을 제거하는 과정을 살펴보겠습니다.

선물 버튼(심층 튜토리얼)

채팅창에 선물하기 버튼이 있는데 아주 간단하게 없앨 수 있습니다.

먼저 ctrl+shift+i를 눌러 요소 검사 메뉴를 열고 요소 탭을 클릭한 다음 요소 선택기 항목을 클릭합니다.



그런 다음 제거하려는 요소(이 경우 채팅 상자의 선물 버튼)를 클릭합니다.

그런 다음 CSS 선택기를 사용할 수 있는 고유한 기능이 있는 요소의 가장 바깥쪽 컨테이너를 찾습니다.



이 경우 우리는 정말 운이 좋습니다. 가장 바깥쪽 요소에는 css로 선택할 수 있는 훌륭하고 매우 고유한aria-label이 있습니다.

CSS로 이 요소를 선택하고 goosemod 사용자 정의 CSS 상자로 돌아가서 숨길 CSS를 작성하는 방법을 기록해 두십시오.

또한, 이것을 얻는 방법에 따라 사용자 정의 CSS의 전체 LOAD를 작성하게 될 수 있으므로 나중에 의미가 있도록 코드를 명령하는 것이 좋습니다.

/* Hide Gift Button in chat box */
button[aria-label="Send a gift"] {
    display: none;
}

이 CSS는 핫 적용되므로 한 번 작성하면 새로고침할 필요 없이 즉시 작동합니다! 당신의 작품을 감상하려면 esc를 누르세요!

친구 화면의 니트로 탭

다음 HTML이 있습니다.

<li class="channel-1Shao0 container-32HW5s" role="listitem" aria-posinset="2" aria-setsize="204"><div class="interactive-1vLZ_I interactive-iyXY_x linkButton-2NshQj"><a class="link-39sEB3" data-list-item-id="private-channels-uid_7902___nitro" tabindex="-1" href="/store"><div class="avatarWithText-1tTt2S layout-1LjVue">...<div class="content-66wMin"><div class="nameAndDecorators-2A8Bbk"><div class="name-2m3Cms">Nitro</div></div></div></div></a></div></li>

이것은 우리가 선택기를 사용하기에 가장 "고유한"것이 있는 것 같지는 않지만 discord는 곧 이 섹션에 새 탭을 추가하지 않을 것이므로 약간의 특이성을 사용하여 aria-posinset="2"에 연결할 수 있습니다. 그것의 수업.

/* Hide Nitro Tab in Friends Menu */
.channel-1Shao0.container-32HW5s[aria-posinset="2"] {
    display: none;
}

멋진

니트로 부스트 배너

Bigger 서버에 들어가면 이 작은 배너로 서버를 "부스트"하도록 요청하기 시작합니다.

예전에는 훨씬 더 크고 보기 흉했지만 여전히 화면에서 불필요한 공간을 차지하고 있습니다.

<div class="container-2giAcK" aria-label="This server has unlocked all Boosting perks!" role="button" tabindex="0">...</div>

/* hide nitro boost banner */
div.container-2giAcK[tabindex="0"] {
    display: none;
}

알겠습니다. 하지만 이제 이상하게 보이게 만드는 남은 공간 요소가 있습니다.



다음 간격 div에 대한 추가 선택기를 추가할 수 있습니다.

/* hide nitro boost banner */
div.container-2giAcK[tabindex="0"], div.container-2giAcK[tabindex="0"] + div {
    display: none;
}

완벽한!

CSS로 멋진 일 하기

동적으로 회원 패널 접기

화면의 절반만 차지하는 불화가 있고 회원 패널을 숨기지 않으면 채팅이 정말 좁아집니다.

onhover와 로드된 항목으로 마법을 부린다면 기본적으로 구성원 항목을 축소하여 온라인 상태인 사람의 아이콘만 표시할 수 있습니다. 그런 다음 마우스를 가져가면 확장되어 사용자 이름, 상태 및 역할을 표시합니다.

/* Slidy Members */
[class*="membersWrap-"] [class*="membersGroup-"] {
    margin-right: auto;
    width: 57px;
    text-overflow: clip;
    direction: rtl;
    word-spacing: 1000px;
}
[class*="membersWrap-"]:hover [class*="membersGroup-"],
[class*="membersWrap-"]:focus-within [class*="membersGroup-"] {
    width: 100%;
    margin: 0;
    direction: ltr;
    word-spacing: unset;
    text-overflow: ellipsis;
}
.membersWrap-3NUR2t{
  min-width: 0 !important; 
}
.members-3WRCEx {
  transition: 250ms ease all;
  width: 64px !important; 
}
.members-3WRCEx:hover {
  width: 64px !important;
}
.membersWrap-3NUR2t:hover .members-3WRCEx{
  width: 245px !important;
}

결론

아직도 내가 이 blogs를 어떻게 끝내고 싶은지 정말로 확실하지 않다.

그것이 내가 공유하고 싶었던 전부입니다. 당신의 디스코드를 커스터마이즈하는 것을 즐기세요.