AD

프로그램 (코딩 있음)트위치 커스터마이징하기

박설명
2020-10-12 19:20:39 9365 8 8

https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

본 확장프로그램을 이용하시면 임의의 Javascript 및 CSS 코드를 추가할 수 있게됩니다.

본 확장프로그램을 설치한 뒤, 트위치에 들어가 확장프로그램 버튼을 클릭하고 Add New를 클릭합니다.

59fc18ca79f4736f1cb4fc4ad6ed5453.png


그 뒤, 오른쪽의 CSS부분에 취향에 맞도록 아래의 코드를 추가하시면 여러가지 기능을 제한할 수 있게 됩니다.( /* 내용 */ 단위로 복사해서 붙여넣어주세요. 괄호하나라도 빼먹으면 오류나거나 적용이 안 될 수 있습니다. )

/* 유저 아이디 안 보이게 하기(채팅 참여중인 유저 목록을 볼 수 없게 됩니다.) */

.chat-author__intl-login {

    display: none;

}




/* 리더보드 안보이게 하기 */

div.channel-leaderboard.tw-z-default{

    display: none;

}




/* 비트버튼 숨기기 */

button.tw-align-items-center.tw-align-middle.tw-border-bottom-left-radius-medium.tw-border-bottom-right-radius-medium.tw-border-top-left-radius-medium.tw-border-top-right-radius-medium.tw-button-icon.tw-button-icon--secondary.tw-core-button.tw-inline-flex.tw-interactive.tw-justify-content-center.tw-overflow-hidden.tw-relative[data-a-target="bits-button"]{

display:none !important;

}




/* 채팅 답변 버튼 숨기기 */

button.tw-align-items-center.tw-align-middle.tw-border-bottom-left-radius-medium.tw-border-bottom-right-radius-medium.tw-border-top-left-radius-medium.tw-border-top-right-radius-medium.tw-button-icon.tw-core-button.tw-inline-flex.tw-interactive.tw-justify-content-center.tw-overflow-hidden.tw-relative[data-test-selector="chat-reply-button"]{

display: none !important;

}




/* 팔로우 관련 버튼 삭제(기본 보기) */

div.tw-flex.tw-overflow-hidden.tw-pd-r-1{

    display:none!important;

}




/* 팔로우 버튼 표시(극장모드) */

button.tw-align-items-center.tw-align-middle.tw-border-bottom-left-radius-medium.tw-border-bottom-right-radius-medium.tw-border-top-left-radius-medium.tw-border-top-right-radius-medium.tw-core-button.tw-core-button--primary.tw-inline-flex.tw-interactive.tw-justify-content-center.tw-overflow-hidden.tw-relative[data-a-target="follow-button"]{

    display:block !important;

}




/* 언팔로우 버튼 삭제(극장모드)*/

button.follow-btn.follow-btn--following[data-a-target="unfollow-button"]{

    display:none !important;

}



응용하셔서 CSS를 다룰 수 있게 된다면 원하시는 대로 기능을 더 추가할 수 있습니다. 

예를 들자면 채팅창 크기를 늘린다든지, 마우스커서를 스트리머 닉네임 위에 올리면 닉네임 색이 바뀐다든지, 구독자아이콘 모양을 원하는 아이콘으로 대체한다든지, 특정 구독티콘들을 안 보이게/혹은 다른 구독티콘으로 바뀌어보이게(본인에게만) 설정한다든지 가능합니다.

후원댓글 8
댓글 8개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
AD
방송하기프로그램채팅/봇업데이트
5
프로그램
AIDA64 Extreme 무료-종료 [5]
hayanggom
01-30
13
12-13
8
프로그램
Multistreaming-Assist 툴 업데이트 [6]
구닥다리_티비
12-11
39
프로그램
Twip Slim Alert Box 2.0 [5]
레카키드
12-08
11
12-03
9
프로그램
유캠 3만원 할인중이네요 [11]
검비_
10-29
»
10-12
6
10-08
11
프로그램
방송의 기본:ASIO [16]
상어밥__
10-07
23
프로그램
APPLE AAC인코더로 OBS 음질향상 [39]
레퍼런스
10-06
15
프로그램
OBS Studio 26.0 정식배포 [6]
숭숭군
10-05
6
프로그램
Multistreaming-Assist 툴 업데이트 [4]
구닥다리_티비
10-01
14
프로그램
지금 베가스15가 무료입니다. [4]
도박치료1336
09-24
19
프로그램
NVIDIA BROADCAST 앱이 나왔습니다 [8]
아는척하는_로젠케이
09-18
18
프로그램
핫클립 커스텀 레이아웃 CSS [6]
Funzinnu
09-18
7
프로그램
OBS 방송을 다른 PC의 OBS 미디어 소스로 받아보기 [5]
아는척하는_로젠케이
09-12
인기글 글 쓰기