투네이션 전용 채팅창 위젯 스킨인 Neon 스킨을 소개합니다.
네온사인 감성 느낌 그대로 구현을 해서 투네이션 채팅 스킨에 적용시켰습니다. 잘 쓰시기 바랍니다.
스킨 적용 방법
적용 방법은 간단합니다. 우선 투네이션의 위젯 메뉴에서 채팅창을 선택해 주시고, 채팅 표시 스타일을 한 줄 상자 테두리 또는 두 줄 상자 테두리를 적용해 주시기 바랍니다.
적용 후 이제 CSS 코드를 복사합니다. CSS 코드를 복사 후 OBS에서 추가한 투네이션 채팅창 위젯의 속성에 들어가서 CSS 코드를 붙여 넣습니다.
@font-face {
font-family: 'SEBANG_Gothic_Bold';
src: url('https://unpkg.com/@noonnu/sebang-gothic_bold@0.0.1/SEBANG_Gothic_Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#div_content {
padding: 20px;
}
.chat-doubleline-box,
.chat-singleline-box {
background: transparent;
border: 3px solid #fff;
border-radius: 10px;
display: flex;
flex-direction: column;
font-family: 'SEBANG_Gothic_Bold' !important;
filter: drop-shadow(0 0 7px #fff);
margin-top: 20px;
}
.chat-singleline-box {
display: block;
padding: 10px;
}
.chat-singleline-box > div {
display: inline;
margin-right: 0;
}
span.whitename,
div.whitename div.float-left {
background: initial;
box-shadow: initial;
padding: initial;
}
.chat-singleline-box > .clearfix
.chat-doubleline-box > .clearfix {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
line-height: 1.5;
}
.chat-doubleline-box > div div.float-left {
color: #fff !important;
font-weight: initial;
padding: 0;
}
.clearfix > .text-right {
margin-left: auto;
}
#div_content img {
margin-right: 5px;
}
#div_content .text-right > img {
margin-right: 0;
}
.chat-singleline-box > span,
.chat-doubleline-box > span {
color: #fff !important;
}
.chat-singleline-box:nth-child(3n),
.chat-doubleline-box:nth-child(3n) {
border-color #f7f;
filter: drop-shadow(0 0 3px #f7f) drop-shadow(0 0 7px #f7f);
}
.chat-singleline-box:nth-child(3n-1),
.chat-doubleline-box:nth-child(3n-1) {
border-color #f7f;
filter: drop-shadow(0 0 3px #77f) drop-shadow(0 0 7px #77f);
}
.chat-singleline-box:nth-child(3n-2),
.chat-doubleline-box:nth-child(3n-2) {
border-color #f7f;
filter: drop-shadow(0 0 3px #1c3) drop-shadow(0 0 7px #1c3);
}
.chat-singleline-box:nth-child(4n),
.chat-doubleline-box:nth-child(4n) {
border-color #f7f;
filter: drop-shadow(0 0 3px #ea0) drop-shadow(0 0 7px #ea0);
}
그런 다음 CSS 코드 입력 아래로 가보면 현재 페이지의 캐시를 새로고침 버튼을 누르시고 확인 버튼까지 누르면 적용 성공입니다.
업데이트 목록
2022-07-27 - 첫 공개
'#만들다 > 투네이션 위젯 스킨' 카테고리의 다른 글
투네이션 채팅 위젯 스킨 - ZSNES (0) | 2022.08.02 |
---|---|
투네이션 채팅 위젯 스킨 - SMW (0) | 2022.07.28 |
투네이션 채팅 위젯 스킨 - SMB1 (0) | 2022.07.28 |
투네이션 채팅 위젯 스킨 - Classic 95 (0) | 2022.07.27 |