AD

나의 사소한이야기 트게더 꾸미기 CSS 활용 하셔요

Broadcaster 한치두치세치
2018-07-31 13:04:34 53 0 0

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}

후원댓글 0
댓글 0개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
▲윗글 오늘 휴뱅 ㅠ 눈이 더떨립니다 ㅠ 한치두치세치
▼아랫글 테트리스 하는곳 한치두치세치
공지사항질문하기팬아트,팬글나의 사소한이야기자유게시판손금봐드립니다. 단돈천원
1
공지사항
1080p화질보기
Broadcaster 한치두치세치
10-11
0
공지사항
오뱅없 ㅠ 술병났습니다 ㅠ 좀비임
Broadcaster 한치두치세치
09-20
0
공지사항
오뱅없 ㅠ 사정이생겻습니다.
Broadcaster 한치두치세치
09-19
0
공지사항
오늘뱅송 5시퇴근후 ^ㅡ^
Broadcaster 한치두치세치
09-17
0
공지사항
(방송보실분 참고) 스케줄...
Broadcaster 한치두치세치
08-31
0
팬아트,팬글
트위치_혀백 팬아트
Broadcaster 한치두치세치
08-29
0
공지사항
2018-08-27 오뱅없
Broadcaster 한치두치세치
08-27
0
공지사항
2018-08-21 오뱅없
Broadcaster 한치두치세치
08-21
2
08-17
0
팬아트,팬글
팔로우 천명후 Pixel Painter 한치그리기
Broadcaster 한치두치세치
08-15
0
08-08
0
나의 사소한이야기
2018-08-06 하루 (팔로우900명)
Broadcaster 한치두치세치
08-07
0
나의 사소한이야기
소소한 사이트
Broadcaster 한치두치세치
08-02
0
공지사항
오늘 휴뱅 ㅠ 눈이 더떨립니다 ㅠ
Broadcaster 한치두치세치
08-01
»
나의 사소한이야기
트게더 꾸미기 CSS 활용 하셔요
Broadcaster 한치두치세치
07-31
0
나의 사소한이야기
테트리스 하는곳 [1]
Broadcaster 한치두치세치
07-31
0
공지사항
2018-07-31 방송일정 [1]
Broadcaster 한치두치세치
07-31
1
팬아트,팬글
마우스 키보드 선물 감사합니다 꾸벅
Broadcaster 한치두치세치
07-30
1
공지사항
스트리머들중에 언팔하신분들 ^ㅡ^ [1]
Broadcaster 한치두치세치
07-30
0
나의 사소한이야기
나도 이제 트게더 활성화 준비해야겟네요 ㅠ [2]
Broadcaster 한치두치세치
07-27
0
팬아트,팬글
진짜 죄송함 [2]
_랑랑이_
07-23
0
팬아트,팬글
한치님 미안해용~
소다맛_
07-17
1
팬아트,팬글
얼음귀신 님께서 그려주신 아트아트
Broadcaster 한치두치세치
07-12
3
팬아트,팬글
처음인 팬아트 ( 영광입니다) [4]
Broadcaster 한치두치세치
07-07
인기글 글 쓰기