아기얼룩돼지님 제가 주로쓰는 코드 입니다. 많은분들이 참고해주셨으면 합니다
혹시 도연2 뱅송키면 놀러오셔서 도연2도 많이 이뻐해주세요 ~~
첫번째 글을 읽어보시면 대략 이해가 가실거에요 ~ ! 모두 화이팅 !
/*배경색상*/
html {
background: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff, #ffffff); /*원하시는 색상을 기입하시면 됩니다. (단색을 원하시면 background: #fffff; 이런식으로 변경*/
height: auto !important;
}
body {
letter-spacing: -0.05em !important;
background: transparent;
font-family: 'Jua', sans-serif;
/*아래는 눈 효과를 위해서*/
background-image: url('https://cdn.discordapp.com/attachments/499752918086320130/553844830699126795/stars.png'), /*url () 가로안에 쓰실 png 파일을 넣으시면 됩니다. */
url('https://cdn.discordapp.com/attachments/499752918086320130/553844828333670411/stars2.png'); /*url () 가로안에 쓰실 png 파일을 넣으시면 됩니다. */
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
/* 눈 내리는 효과 설정 */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
/* 전체 쉐도우 */
/* header #header-bar>.row, */
#main .menu-wrapper,
#main #main-content>div.frame {
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2);
}
/* 헤더 로고 배너 */
header .row>div:nth-child(1)>a {
display: block;
width: 165px; /* 만드신 로고 가로 Size에 맞쳐서 넓혀주시면 됩니다. 최대 200 Size입니다. */
height: 50px;
background: url( ) no-repeat; /* ( ) 안에 만드신 로그 링크를 넣으시면 됩니다 ~ */
background-size: auto 50px;
}
/* Font 설정 무료폰트 사이트 참고(https://noonnu.cc/index) */
@font-face { font-family: 'ThecircleM'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/ThecircleM.woff') format('woff'); font-weight: normal; font-style: normal; }
/* https://noonnu.cc/index 사이트에 들어가서 원하시는 웹폰트로 변경하시면 됩니다 ~ */
*{font-family:'ThecircleM';font-size: 100% !important;}
/* 기존 트게더 로고 삭제 */
header .row>div:nth-child(1)>a img {
display: none;
filter: grayscale(100%);
opacity: 0.8;
}
/* 로고밑 NAV bar */
header #header-bar>.row {
background: linear-gradient(to bottom, #ffbaa8, #fcffcc, #ffd3c7); /* 색상을 지정해주시면 됩니다. 첫번째 기본틀 읽어보시면 도움이 되요 */
margin-top: 2px;
border: 3px solid #ff9d9f; /* 색상을 지정해주시면 됩니다. 첫번째 기본틀 읽어보시면 도움이 되요 */
border-top-left-radius: 15px; /* 라운드 입니다. 트게더 꾸미기 첫번째 기본틀을 읽어보시면 도움이 되요*/
border-top-right-radius: 15px; /* 라운드 입니다. 트게더 꾸미기 첫번째 기본틀을 읽어보시면 도움이 되요*/
border-bottom-left-radius: 15px; /* 라운드 입니다. 트게더 꾸미기 첫번째 기본틀을 읽어보시면 도움이 되요*/
border-bottom-right-radius: 15px; /* 라운드 입니다. 트게더 꾸미기 첫번째 기본틀을 읽어보시면 도움이 되요*/
box-shadow:
0 0 0 3px #fffcb9, /* 색상 지정입니다*/
0 0 0 5px #ff9d9f, /* 색상 지정입니다*/
0 0 0 6px #fff, /* 색상 지정입니다*/
0 0 2px 6px #ff9d9f; /* 색상 지정입니다*/
}
/* 우측상단 트게더 검색 창 */
header #right-search-form>input[type='text'] {
background: linear-gradient(to left, #ffbaa8, #fcffcc, #ffd3c7); /* 배경 색상지정입니다. */
margin-top: 0;
border: 2px dashed #ff9d9f;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow:
0 0 0 3px #fffcb9,
0 0 0 5px #ff9d9f,
0 0 0 6px #fff,
0 0 2px 6px #ff9d9f;
}
/* 우측상단 트게더 검색 마우스 올렸을시 변하는 것 */
header #right-search-form>input[type=text]:hover,
header #right-search-form>input[type=text]:focus {
background: linear-gradient(to left, #ffe3ed, #fffcb9, #ffe3ed);
border-color: #ff9d9f;
box-shadow:
0 0 0 3px #fffcb9,
0 0 0 5px #e2afe9,
0 0 0 8px #fffcb9,
0 0 2px 8px #e2afe9;
}
/* 트게더 전체메뉴 / 유용한링크 / 트위치 스케쥴 전체 틀 */
#main .menu-wrapper {
margin-bottom: 1.8em;
border: 2px dashed #ff9d9f;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow:
0 0 0 3px #fff,
0 0 0 5px #ff9d9f,
0 0 0 8px #fff,
0 0 2px 8px #ff9d9f;
}
/* 좌측 메뉴 각 상단 헤더 배경 */
#main .menu-wrapper>.header {
background: linear-gradient(to right, #ffe3ed, #ffeb92); /* 배경색입니다. */
color: #ff843d; /* 글자색입니다. */
border-bottom: 1.5px dashed #f0cbd4; /* 헤더 하단에 라인으로 두께 및 색상지정. */
}
/* 좌측 메뉴 글자색입니다. */
#main .menu-wrapper>a{
color: #fc9e88;
}
/* 좌측 메뉴 헤더 "트위치 스케쥴 글자색입니다. */
#main .menu-wrapper>.header>a {
color: #fc9e88;
}
/* 좌측 메뉴 헤더 "세줄자"모양 색상입니다. */
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
color: #fc9e88;
}
/* 유용한 링크 글자 좌측 네모 색상. */
.fa-square:before {
color: #fc9e88;
}
/* 좌측메뉴 A B C H O 등 숏컷링크 글씨 색상 */
#main .menu-wrapper>a>em {
color: #fc9e88;
}
/* 좌측메뉴 메뉴사이의 공간 색상 */
#main .menu-wrapper .spacer {
background: #fc9e88;
height: 0.15em;
}
/* 좌측 메뉴 간격 */
#main .menu-wrapper>a {
padding: 0.5em 1.4em 0.5em 0.7em !important;
}
/* 우측 상단 검색창 우측 돋보기 버튼 */
header #right-search-form>#right-search-btn {
color: #F7819F;
}
/* 상단 헤더 [광고]배경색 */
header #header-bar #header-top-notice strong.notice-badge {
background: #F5A9D0;
}
/* 상단 헤더 글자 및 시계 , 별, 이모티 fa색상 */
header #header-bar .fa {
color: #F7819F;
}
/* 스트리머 게시판 상단 정보 글씨색상 "즐겨찾기 소개 채널 클립" */
#board-info #board-info-bottom a {
color: #F5A9D0;
}
/* 글쓰는 창 색상 */
#main #main-content>div.frame {
background: url("") no-repeat; /* 이미지를 넣지 않을거면 삭제 ( 배경에 따라 가시성이 좋을수도 나쁠수도) */
border: px solid #f0cbd4;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow:
0 0 0 3px #fff,
0 0 0 5px #ff9d9f,
0 0 0 8px #fff,
0 0 2px 8px #ff9d9f;
}
/*글쓰는창 마우스 올렸을때*/
#article-list>.article-list-row:hover{
-moz-animation: text1 1.3s ease-out 5ms;
animation: text1 1.3s ease-out 5ms;
}
@-webkit-keyframes text1 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.03);
opacity: 0.5;
}
}
@-moz-keyframes text1 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.03);
opacity: 0.7;
}
}
@keyframes text1 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ff5c74, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.03);
opacity: 0.9;
}
}
/*스트리머 배너 (공지사항, 출석체크등) 커서 올렸을때*/
#article-list #article-list-category>a:focus,
#article-list #article-list-category>a:hover{
-moz-animation: text2 1.3s ease-out 5ms;
animation: text2 1.3s ease-out 5ms;
}
@-webkit-keyframes text2 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.05);
opacity: 0.5;
}
}
@-moz-keyframes text2 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.07);
opacity: 0.7;
}
}
@keyframes text2 {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 7px 7px #ffc1c8, 0 0 0 7px rgba(255, 255, 255, 0.5);
transform: scale(1.08);
opacity: 0.9;
}
}
/* 게시글 관련부분 닉네임 위치 */
#article-list>.article-list-row>.item>.list-title>.list-writer>span {
width: 120px !important;
}
/* 게시글 관련부분 */
#article-list>.article-list-row>.item>.list-title>a:visited {
color: #7ebfff !important;
}
/* 게시글 제목 글자색 */
#article-list>.article-list-row>.item>.list-title>a {
color: #3642ff; !important;
text-decoration: none;
line-height: 18px;
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 450px;
height: 18px;
overflow: hidden;
margin-right: 5px;
float: left;
}
/* 공지사항 등 (카테고리) 우측 여백 */
#article-list #article-list-category {
border-top: 2px solid #66A091;
background: linear-gradient(to bottom, #ffe3ed, #ffeb92);
}
/* 공지사항 색상 (카테고리) */
#article-list #article-list-category>a {
background: linear-gradient(to bottom, #ffe3ed, #ffeb92);
}
/* 공지사항 좌측 집모양 색상 */
#article-list #article-list-category > a.active {
background: linear-gradient(to bottom, #ffe3ed, #ffeb92);
}
/* 집모양 색상 */
a {
color: #F7819F;
}
/* 공지글의 배경색상 및 테두리 지정 */
#article-list>.article-list-row.notice {
border-bottom: 2px solid #fffdfc; /* 테두리 지정 */
background-color: rgba(0,0,0,0); /* 공지 배경 색 */
}
/* 추천수 색상 */
#article-list>.article-list-row>.item>.list-header>span {
color: #F7819F;
background: rgba(0,0,0,0); /*현재 투명 : RGBA로 하지 않으면 익스플로러는 투명 표시안됨*/
}
/* 0명의 추천수 배경 색상 */
#article-list>.article-list-row>.item>.list-header.v0>span {
color: rgba(0,0,0,0); /*현재 투명 : RGBA로 하지 않으면 익스플로러는 투명 표시안됨*/
background: rgba(0,0,0,0);
}
/* 댓글수 색상 */
#article-list>.article-list-row>.item>.list-title>small.comment-count {
color: #F7819F;
}
/* 닉네임 색상 */
#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {
color: #F7819F;
}
/* 하단 선택 페이지 넘버 박스 색상 */
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
background-color: #F7819F;
border-color: #F7819F;
}
/* 하단 페이지 마우스 올렸을 시 넘버 색상 */
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: #F7819F;
}
/* 하단 페이지 넘버 색상 */
.pagination>li>a,
.pagination>li>span {
color: #F7819F;
}
/* 공지사항 좌측 !표 색상 */
span.a-badge i.fa.fa-info-circle {
color: #F7819F;
}
/* footer */
#article-list>.article-list-row {
border-right: none;
}
#article-list #article-list-menu {
box-sizing: border-box;
width: unset;
margin: 20px;
}
#article-list #boardSearchForm {
padding-bottom: 20px;
height: unset;
}
/* 하단 글쓰기 버튼*/
.btn {
color: #ff4345 !important;
background-color: rgba(0,0,0,0); !important; /*하단 아이콘*/
border-color: rgba(0,0,0,0); !important; /*하단 아이콘*/
border-radius: 0;
transition: 0.2s;
}
/* 하단 글쓰기 버튼 마우스 커서 올렸을 때*/
.btn:hover,
.btn:focus {
color: #ffffff !important; /*하단 아이콘*/
background-color: #fc9e88 !important;
}
/* 하단 버튼테두리*/
.btn.square {
margin-right: -2px;
border: 1px solid rgba(0,0,0,0)
}
/* 즐겨찾기 버튼테두리*/
#article-list #article-list-menu > .btn.best{
border: 1px solid rgba(0,0,0,0)
}
small.favo i.fa.fa-heart {
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1.25); }
42% { transform: scale(0.9); }
60% { transform: scale(1.15); }
85% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* 하단 검색창 네모박스 */
#article-list #boardSearchForm .form-control {
width: calc(100% - 2px);
margin-left: 1.5px;
border: 1px solid #ffb0b0;
}
/* 마우스 커서 포인터 */
html,
body,
.fr-popup.emoticons,
.fr-top,
select.form-control,
input[type=checkbox],
input[type=radio],
.opt
{
cursor: url( ) 0 0, auto !important; /* ( ) 안에 만든 링크 기입 */
}
/* 마우스 커서 링크 */
#right-search-form>#right-search-btn,
#board-info #board-info-bottom #addFavoriteBtn,
#article-list #article-option-area>#article-option-area-toggle-btn,
#article-list>.article-list-row>.item>.list-title>.list-writer>span,
.reply > .reply-header > .reply-writer.logged,
.reply-menu,
.btn,
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn,
.fr-view img,
.pull-left,
a {
cursor: url( ) 0 0, auto !important; /* ( ) 안에 만든 링크 기입 */
}
/* 마우스 커서 텍스트 */
span#viewers,
#article-list #boardSearchForm .form-control,
.fr-view,
.fr-box.fr-basic.fr-element,
input[type='text']
{
cursor: url( ) 0 0, auto !important; /* ( ) 안에 만든 링크 기입 */
}
#board-info {
overflow: visible;
}
/* 인간모습 현재 투명화*/
#board-info #viewers-area .fa-user:before {
position: absolute;
top:20px;
left: 500px;
color: rgba(10, 59, 84, 0);
}
#board-info #viewers-area .badge-default:before {
position: absolute;
top:20px;
left: 500px;
color: rgba(10, 59, 84, 0);
}
#board-info #viewers-area #viewers {
color: #fe5eae;
font-weight: bold;
position: absolute;
top:20px;
left: 500px;
}
/* 게시판 상주 인원 표시 앞 부분*/
#board-info #viewers-area #viewers:before {
content: "000"; /* 명수 앞에 붙는 글자 000 대신 다른글 쓰기*/
color: #fe5eae; /* 글자색*/
cursor: text;
font-weight:normal;
}
/* 게시판 상주 인원 표시 뒷 부분 표시*/
#board-info #viewers-area #viewers:after {
content: "000"; /* 명수 뒤에 붙는 글자 000 대신 다른글 쓰기*/
color: #fe5eae; /* 글자색*/
cursor: text;
font-weight:normal;
}
/* 즐겨찾기 소개 채널 위치조정*/
#board-info-bottom{
position: absolute;
top:40px; /* 높이조정*/
left: 530px; /* 좌우조정*/
}
/* 상단 라인 삭제*/
#board-info h1{
border: 0px;
}
/* 순위권*/
#board-info h1 .badge.badge-default{
position: absolute;
top:41px; /* 높이조정*/
left: 800px; /* 좌우조정*/
background:rgba(0,0,0,0);
color:#F5A9D0;
font-size:px!important;
font-style: normal;
font-weight:normal;
}
/* 스트리머 사진 글자 위치*/
#board-info h1>a{
position: absolute;
top:20px;
left: 100px;
font-size:40px!important;
color: #F5A9D0;
}
/*스트리머이름 위에 마우스 올렸을때*/
#board-info h1>a:hover{
-moz-animation: text3 1.3s ease-out 75ms;
animation: text3 1.3s ease-out 75ms;
}
@-webkit-keyframes text3 {
0% {
opacity: 0.5;
}
40% {
opacity: 0.8;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
-webkit-transform: scale(1.07);
opacity: 1;
}
}
@-moz-keyframes text3 {
0% {
opacity: 0.5;
}
40% {
opacity: 0.8;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
-moz-transform: scale(1.07);
opacity: 1;
}
}
@keyframes text3 {
0% {
opacity: 0.5;
}
40% {
opacity: 0.8;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 5px 5px rgba(0, 0, 0, 0), 0 0 0 5px rgba(0, 0, 0, 0);
transform: scale(1.07);
opacity: 1;
}
}
#board-info>img{
display: none;
}
/*스트리머 사진 변경*/
#board-info h1>a::before {
content: '';
background: url( ) no-repeat; /*( ) 안에 링크 위치 저장*/
background-size: 75px 75px;
width: 75px;
height: 75px;
position: absolute;
left: -85px;
top: 5px;
margin-top: -21px;
z-index: 100;
border: 2px solid rgba(0,0,0,0);
border-radius: 10%;
}
a {
color: black;
}
span.a-badge i.fa.fa-info-circle {
color: black;
}
주접트수스랄 
도연2