투네이션 채팅 위젯 스킨 - SMW

SMW 스킨

투네이션 전용 채팅창 위젯 스킨인 SMW 스킨을 소개합니다.

누구나 잘 아는 게임인 슈퍼 마리오 월드에서 보이는 턴 블록 기반으로 제작한 스킨입니다. 잘 쓰시기 바랍니다.

스킨 적용 방법

적용 방법은 간단합니다. 우선 투네이션의 위젯 메뉴에서 채팅창을 선택해 주시고, 채팅 표시 스타일을 한 줄 상자 테두리 또는 두 줄 상자 테두리를 적용해 주시기 바랍니다.

적용 후 이제 CSS 코드를 복사합니다. CSS 코드를 복사 후 OBS에서 추가한 투네이션 채팅창 위젯의 속성에 들어가서 CSS 코드를 붙여 넣습니다.

@import url('https://unpkg.com/galmuri@latest/dist/galmuri.css');

#div_content {
	padding: 20px;
}

.chat-doubleline-box,
.chat-singleline-box {
	background: #f8d820;
	border: 8px solid transparent;
	border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAD1BMVEUAAAD42CDYoDgAAADo8Phpe4BaAAAAAXRSTlMAQObYZgAAAE1JREFUOMtjYGAwxgKAwrgljF1cXJTQgTFOCbC4IDoAyeCTEMQE1JZQIiRBfzsQEgxQMCoxOCRgYOhKKGGKE5DABPglIDKY4jglSC99AF7Lay9MBcOzAAAAAElFTkSuQmCC') 16/16px/8px repeat;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	font-family: 'Galmuri11' !important;
	image-rendering: pixelated;
	margin-top: 30px;
	padding: 0 8px 8px;
	text-shadow: 1px 1px 0 #da3, 2px 2px 0 #da3;
}

.chat-singleline-box {
	display: block;
}

.chat-singleline-box > div {
	display: inline;
	margin-right: 0;
}

span.whitename,
div.whitename div.float-left,
div.float-left {
	background: initial;
	box-shadow: initial;
	color: #000 !important;
	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 {
	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: #000 !important;
}

 

그런 다음 CSS 코드 입력 아래로 가보면 현재 페이지의 캐시를 새로고침 버튼을 누르시고 확인 버튼까지 누르면 적용 성공입니다.

업데이트 목록

2022-07-28 - 첫 공개