AD

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

박설명
2020-10-12 19:20:39 9348 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
방송하기프로그램채팅/봇업데이트
12
방송하기
DMCA 512조 를 털어보았다. [5]
이계정은폭파되따
11-02
9
프로그램
유캠 3만원 할인중이네요 [11]
검비_
10-29
17
방송하기
월 5$로 유명 음원 사용하기 [1]
은빛매7
10-25
13
10-25
6
10-24
12
방송하기
영도 관련팁 [3]
태연한척하는
10-23
14
방송하기
트위치 사운드트랙 베타 시작! [9]
은빛매7
10-20
17
10-14
5
방송하기
저의 투컴 오디오 세팅입니다. [24]
_이라비_
10-13
»
10-12
14
10-12
62
방송하기
팁 게시판 이용 팁입니다 [10]
라스트오더
10-12
34
방송하기
당신이 뜨지 못하는 이유 [21]
ReanroseTV
10-11
6
10-08
인기글 글 쓰기