돔미님 css적용테그
->css 사용방법(예시?)
// 전역설정
:root {
--main-color:#f87d92;
--link-color:#9fdda5;
--light-pink:#f59ba5;
--light-yellow:#f0f7ce;
--light-green:#bbeaaa;
--text-color:#4C4646}
//트게더 좌측상단 부분'트게더' 부분 테그
header .row>div:nth-child(1)>a {
display: block;
width: 145px;
height: 50px;
background: url( ) no-repeat}
// 전역 바디 및 html설정
body,html {
height: auto!important}
// 기존 트게더 이미지 가리는 설정
header .row>div:nth-child(1)>a img {
opacity: 0}
// 헤더바 설정
header #header-bar {
margin-top: 1em;
margin-bottom: 1em;
padding-right: 30px;
padding-left: 30px}
// 헤더바 컬러 설정
// 상위 텍스트 설정 상속
header #header-bar #header-top-notice a,header #header-bar a.dropdown-toggle {
color: var(--text-color)}
// 상단 트게더 검색부분 검색 버튼 설정
header #right-search-form>#right-search-btn {
color: var(--main-color);
background: 0 0;
border: none;
font-size: 1.4em}
// 검색부분 입력 폼 설정
header #right-search-form>input[type=text] {
position: relative;
border: 3px solid var(--main-color);
background: #fff;
font-size: 1.1em;
padding: .3em .5em}
// 상단 헤더바 설정
header #header-bar>.row {
padding-top: .3em;
padding-bottom: .3em;
border-top: 5px solid var(--main-color);
border-bottom: 2px solid #ebeae8;
border-right: 2px solid #ebeae8;
z-index: 200}
// 메인 부분 설정
#main #main-content>div.frame,#main .menu-wrapper {
border-right: 0;
border-bottom: 0}
// 헤더바 광고부분 설정
header #header-bar #header-top-notice strong.notice-badge {
background: var(--main-color);
padding: 4px 8px;
color: #fff;
font-weight: 700}
// 트게더 전체 메뉴 부분 최상단 설정 부분
#main .menu-wrapper>.header {
background: var(--main-color);
color: #fff;
padding: .45em 1.4em .45em 1em;
font-weight: 700}
// 트게더 메뉴부분 텍스트 색상값 설정
#main .menu-wrapper>a {
color: var(--text-color)}
// 트게더 메뉴부분 앞에 알파벳 부분 설정
#main .menu-wrapper>a>em {
color: var(--link-color)}
// 페이지 갯수 설정부분
.pagination>li>a,.pagination>li>span {
color: var(--main-color)}
// 페이지 부분 마우스 오버시 설정 값
.pagination>li>a:hover {
background-color: var(--light-pink);
color: #fff}
// 페이지 넘버 활성, 포커싱, 오버 설정
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
background-color: var(--main-color);
border-color: var(--main-color)}
// 게시글 본문 부분 상단 제목 밑부분 설정 (시간 표시, 댓글 갯수, 좋아요, 조회수 표시 부분)
#article-content-wrapper>.header {
border-top: 3px solid var(--main-color);
background: var(--light-yellow)}
// 게시글 하단 부분 설정
#article-content-wrapper>.footer {
border-bottom: 3px solid var(--main-color);
background: var(--light-yellow)}
// 게시글 리스트 설정
#article-list {margin: 0; padding: 0 0 2em}
// 게시글 리스트 좌측 끝 좋아요 개수 부분 테그 설정
#article-list>.article-list-row>.item>.list-header>span {
background-color: var(--main-color);
color: #fff;
font-weight: 7;
padding: 1px 5px;
font-size: 11px;
border-radius: 100px}
// 게시글 리스트 카테고리 부분
#article-list #article-list-category {
border-top: 3px solid var(--main-color);
background: var(--light-yellow)}
// 게시글 리스트 카테고리 부분
#article-list #article-list-category>a {
display: inline-block;
` padding: 11px 16px;
background: var(--light-yellow);
text-decoration: none;
font-size: 12px;
font-weight: 700}
// 게시글 내 덧글 부분 제복 설정
#article-reply-area #reply-real-area .reply>.reply-header {background: var(--light-yellow)}
// 게시글 내 답글 부분 제목 테그
#article-reply-area>.header h5 {font-size: 14px;
color: var(--main-color);
font-weight: 700}
// 게시판 제목 부분
#board-info {border-top: 3px solid var(--main-color);
overflow: inherit;
padding: 5px 5px 0 8px;
margin: 0}
// 트게더 (개구멍) 부분 테그
#board-info h1>a {color: var(--text-color)}
// 게시판 스트리머 아이콘 표시 부분
#board-info #board-info-profile-img {border-radius: 5em;border: 1px solid var(--main-color)}
// 게시판 상주 인원 표시 접두 부분
#board-info #viewers-area #viewers:before {content: "구워지고 있는 ";
cursor: text}
// 게시판 상주 인원 표시 윗 부분 표시
#board-info #viewers-area #viewers:after {content: "알밤";
cursor: text}
// 게시판 상주 인원 표시 그림
#board-info #viewers-area .fa-user:before {color: rgba(10,59,84,0);
content: url( )}
// 게시글 리스트 작성자, 게시판 리스트 게시글 제목 부분 설정
#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span,#article-list>.article-list-row>.item>.list-title>a,body {color: var(--text-color)}
// 인기글 버튼 설정
#article-list #article-list-menu>.btn.best>.fa.fa-star:before,.btn-outline-success>i.fa.fa-thumbs-up:before,span.a-badge i.fa.fa-star:before {content: "\f004"}
// 글쓰기 버튼 우측 마진
#article-list #article-list-menu>.btn.write {margin-right: 1em}
// 글쓰기 버튼 색상 설정
.btn-primary {background: var(--main-color);border-color: #fff}
// 글쓰기 버튼 동작시 설정
.btn-primary:active,.btn-primary:focus,.btn-primary:hover {background-color: var(--main-color)!important;border: none}
// 메인 배경색
html {background: linear-gradient(to bottom,#ffedeb,#ffc5c3)}
// 전체 설정
body {background: 0 0}
.menu-wrapper div.spacer {pointer-events: none}
//게시글 공지부분 배경 색상
#article-list>.article-list-row.notice {background-color: var(--light-yellow)}
// 게시글 리스트 마우스 오버시 색상 설정
#article-list>.article-list-row.notice:hover,#article-list>.article-list-row:hover {background-color: var(--light-green)}
// 게시글 리스트 하단 보더 설정
#article-list>.article-list-row>.item>.list-blocked,#article-list>.article-list-row>.item>.list-category,#article-list>.article-list-row>.item>.list-checkbox,#article-list>.article-list-row>.item>.list-header,#article-list>.article-list-row>.item>.list-time,#article-list>.article-list-row>.item>.list-title {border-bottom: 0 solid #fff}
// 게시글 리스트 공지부분 '공지'표시 폰트 색상 설정
#article-list>.article-list-row>.item>.list-header>strong
{color: var(--main-color)}
// 상단 검색 입력부분 보더 설정
header>#header-search-bar #header-search-input
{border: 2px solid #06c}
// 상단 검색 버튼 색상 설정
header>#header-search-bar #header-search-btn
{ color: #09f}
.fr-toolbar {border-top: 5px solid var(--text-color)}
#article-list #article-list-menu>.btn.best,.btn-outline-success
{border-color: var(--main-color); color: var(--main-color)}
.fr-popup .fr-command.fr-btn,.fr-toolbar .fr-command.fr-btn
{color: var(--text-color)}
// 안건드려도 될듯..
span.a-badge i.fa.fa-star
{color: var(--main-color); vertical-align: -2px!important}
// 인기글 버튼 좌측 마진
#article-list #article-list-menu>.btn.best {margin-left: 1em}
