디자인 변경~
하단도 마찬가지..그리고 특정 부분을 안 보이게 처리~
글을 중앙정렬~
비로그인시,로그인시 내부 화면을 다르게 가능~
나만의 더쿠를 만들자 시작~
크롬이나 파폭용 스타일리시를 설치한다.~
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("theqoo.net")
여기까지는 필수로 입력
그 다음에는 변경하고 싶은 항목만 복불해서
뭘 변경해야 되는지는 딱 봐도 알겠지?
에러가 나면 자연스럽게 어딘가 에러났다고 영어로 알려준다.
※ 특정 부분은 연동되어 한 번에 변경된다.
※ 다른 건 건들지 말고 웬만하면 색만 변경하도록
color: #XXXXXX; , background= 배경 색 border = 표시줄(구분줄) 크기 혹은 색
색상코드표 참조 하는 곳 네이버 색상코드표
혹은 http://html-color-codes.info/
폭 , 크기는 웬만하면 변경하지 말 것 padding: XXpx; , width: XXpx; , font-size: XXpx;
※ text-align: center 중앙 정렬 (left면 왼쪽 정렬 right는 오른쪽 정렬)
/*상단 메뉴 배경색 변경*/
{
}
.header, .gnb .nav li a:hover, .gnb .nav li a:focus, .da-dots span, .da-arrows span, .bootstrap_body .btn-group .btn:hover, .da-slide .da-link:hover, .h2_widget span, .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span, .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span, #scrollUp:hover {
background-color: #FFD8D8;
}
/*상단 메뉴 폭 및 글씨 색 및 크기 변경*/
.gnb a.tq_menu {
padding: 5px;
width: 22px;
text-align: center;
color: #F6F6F6;
font-size: 22px;
/*로그인 회원 가입 글씨 색 및 크기 변경*/
}
.navbar-right .nav li a.first_a {
padding: 40px 10px;
}
.nav li a.first_a {
padding: 40px 40px;
color: #F6F6F6;
font-weight: normal;
border: 0 !important;
font-size: 26px;
line-height: 20px;
/*중간 배경화면 색 변경*/
}
#body {
background: #FFFFFF !important;
}
.bd_tb_lst .notice td, .bd_zine li.notice, .bd_tb_lst .select, .bd_tb_lst tbody tr:hover {
background: #FFFFFF;
border-color: #D5D5D5;
}
.bd .bg_f_f9 {
background: #fea url(../img/ie/bg_f_f9.gif) repeat-x;
background: -webkit-gradient(linear,0% 0%,0% 100%,from(#D5D5D5),to(#D5D5D5));
background: linear-gradient(to bottom,#D5D5D5 0%,#D5D5D5 100%);
/*게시판 중간에 있는 번호 분류 제목 날짜 글씨 색 및 위 아래 구분선 색 변경*/
}
.bd_tb_lst th {
padding: 9px 12px;
border-top: 1px solid #D5D5D5;
border-bottom: 1px solid #D5D5D5;
color: #D5D5D5;
}
.btm_mn .fl .btn_img {
margin-right: 4px;
}
.btn_img {
padding-right: 10px !important;
}
.bd a {
text-decoration: none;
color: #D5D5D5;
/*하단의 목록 검색 제목 표시선 및 배경 색 변경*/
}
.btn_img {
padding: 5px 14px 4px 10px;
font-size: 11px;
border-color: #000000;
background: #EAEAEA;
}.searchBtn {
position: absolute;
right: -1px;
top: -1px;
bottom: -1px;
background-color: transparent;
border: none;
border-left: 1px solid #000000;
}
.bd_srch_btm select {
margin: 0;
padding: 0;
border: 0;
background: #EAEAEA;
/*오른쪽에 있는 준비중 , 문제 보고 배경 및 표시줄 및 글씨 색 변경*/
}
.bootstrap_body .btn-group .btn {
background: #FFD8D8;
border-color: #D5D5D5;
}
.btn {
font-size: 12px;
color: #F6F6F6;
/*오른쪽에 있는 카테고리 전체 목록 글씨 색 변경*/
}
.lnb ul .active a {
color: #f10808 !important;
}
.lnb ul.in_lnb a {
display: block;
text-decoration: none !important;
color: #06dbff;
font-size: 16px;
line-height: 20px;
/* 하단의 핫 게시물 , 베스트 게시물 배경 및 글씨 색 변경*/
}
.btn_img.btn_best_img {
background: #D1B2FF;
color: #8041D9;
/*하단의 문의 메일 글씨 색 변경*/
}
.footer {
padding: 40px 0 20px 0;
color: #FFD9EC;
}
/*게시물 제목 색깔 및 댓글 색 변경*/
.bd_lst td.title a {
color: #3DB7CC;
/*게시물 제목 위 아래 구분 색 변경*/
}
.bd_tb_lst td, .bd_zine li {
border-bottom: 1px solid #D5D5D5;
}
.btm_mn {
position: relative;
margin-top: -1px;
padding: 10px 10px 0;
border-top: 1px solid #D5D5D5;
}
/*게시물 읽었을 때 제목 배경 및 위 아래 표시줄 색 변경*/
.rd_hd .board .top_area {
padding: 11px;
border-top: 1px solid #D5D5D5;
border-bottom: 1px solid #D5D5D5;
background: #FFD8D8;
/*게시물 읽었을 때 본문 내용 및 댓글 글씨 색 및 크기 변경*/
}
.xe_content {
color: #3DB7CC;
font-size: 16px;
}
/*게시물 읽었을 때 하단에 있는 댓글 글씨(댓글을 이야기하는게 아님) 색 변경*/
.bd {
color: #BDBDBD;
}
/*댓글의 무명의 더쿠 글씨 색 변경*/
.fdb_itm .meta a {
font-weight: 700;
color: #FFC19E;
}
/*댓글 쓰기의 바깥 배경 및 표시줄 색 변경*/
.cmt_editor {
margin-bottom: 32px;
padding: 12px 16px 20px;
background: #EAEAEA;
border: 1px solid #D5D5D5;
border-bottom-color: #D5D5D5;
border-radius: 8px;
box-shadow: 0 1px 3px -1px rgba(0,0,0,.1);
}
/*댓글 쓰기 권한이 없습니다.로그인하시겠습니까? 글씨와 배경 및 표시줄 색 변경*/
.cmt_disable {
display: block;
height: 46px;
padding: 4px 8px;
border: 1px solid #D5D5D5;
border-radius: 2px;
box-shadow: inset 1px 1px 4px rgba(0,0,0,.06);
background: #EAEAEA;
text-decoration: none !important;
color: #3DB7CC !important;
}
/*댓글 구분선 색 변경*/
.fdb_itm {
position: relative;
margin: -1px 0;
padding: 12px 12px 16px 88px;
border-top: 1px solid#D5D5D5;
border-bottom: 1px solid #D5D5D5;
-webkit-transition: background .5s;
transition: background .5s;
}
/*Comments 및 배경 ,사진 선택,등록 색 변경*/
.cmt_wrt_btm .fdb_tag {
border: 1px solid #3DB7CC;
border-radius: 5px;
}
.bd .bg_f_f9 {
background: linear-gradient(to bottom,#F6F6F6 0%,#F6F6F6 100%);
}
.bd a {
text-decoration: none;
color: #3DB7CC;
/*코멘트 보기 글씨 색 변경*/
}
.bd a:hover {
text-decoration: underline;
color: #2F9D27;
}
/*비 로그인시 댓글에 있는 ? 표시줄 및 배경색 및 ? 색 변경*/
.bd .profile {
float: left;
width: 50px;
height: auto;
line-height: 50px;
padding: 2px;
font-size: 32px;
border: 1px solid #DDD;
}
.no_img {
display: block;
overflow: hidden;
position: relative;
margin: 0 auto;
background: #EAEAEA;
font-weight: 700;
font-size: 1.1em;
color: #3DB7CC;
text-align: center;
white-space: nowrap;
/*Comments 오른쪽 위에 있는 위로 아래로 표시줄 및 배경색 변경*/
}
.rd_nav_style2 .rd_nav, .rd_nav_side .rd_nav {
border: 1px solid #3DB7CC;
border-radius: 4px;
background: #F6F6F6;
}
/*하단의 1,5000 및 글 페이지 ,5000 및 글 페이지 번호 글씨색 변경*/
.bd_pg .frst_last {
color: #D1B2FF;
}
.bd_pg a {
color: #D1B2FF;
/*하단의 Prev 및 next 글씨색 변경*/
}
.bd_pg strong.direction {
color: #D1B2FF;
}
.bd_pg .direction {
margin: 0 4px;
color: #D1B2FF;
}
/*하단의 글 페이지 클릭시 배경 및 표시줄 및 글씨색 변경*/
.bd_pg .this, .bd_pg a:hover, .bd_pg a:focus {
background: #f9b8b8;
border-color: #d68f8f;
color: #c16969;
}
/*상단 메뉴 클릭후 글씨 및 배경색 변경*/
.gnb a.tq_menu.active, .gnb a.tq_menu:hover, .gnb a.tq_menu:focus {
background-color: #efc8c8;
color: #FF00DD;
}
/*상단 메뉴 글씨 폰트 변경*/
.header {
font-family: 맑은 고딕,맑은 고딕,맑은 고딕,맑은 고딕,맑은 고딕,맑은 고딕,맑은 고딕,맑은 고딕,sans-serif;
/*중간에 있는 전체 및 카테고리 표시줄 및 배경 및 글씨색 및 크키 변경*/
}
.cnb4 a {
border: 1px solid #D5D5D5;
background: #FFD8D8 !important;
}
.bd, .bd input, .bd textarea, .bd select, .bd button, .bd table {
font-size: 12px;
line-height: 1.5;
}
.cnb3 a {
display: block;
overflow: hidden;
padding: 5px 16px;
margin: 2px;
white-space: nowrap;
text-decoration: none !important;
text-align: center;
color: #e43005;
/*공지 및 게시물 글씨 크기 및 정렬 변경*/
}
.bd_tb_lst td.title {
text-align: center;
font-size: 12px;
white-space: normal;
word-break: break-all;
/*중간에 있는 말머리 잡담 색 변경*/
}
.bd_tb_lst .cate {
padding: 8px;
color: #4b9c1a;
}
/*글 제목만 나오게 하기(폰트를 0으로 변경한다.할 경우 중간 번호 분류 제목 표시줄 및 글 제목 위 상단 표시줄 다시 조절)*/
.bd_tb_lst th, .bd_tb_lst td {
padding: 8px 12px;
font-size: 10px;
text-align: center;
white-space: nowrap;
/*상단 카테고리와 중간 카테고리 사이의 간격*/
}
.body {
padding: 80px 0;
position: relative;
z-index: 1;
/*중간 폭넓이 조절*/
}
.bd_tb_lst th, .bd_tb_lst td {
padding: 12px 12px;
/*추천 버튼 사이즈 및 글씨 색 변경*/
}
.rd_vote p {
margin: 0;
font-weight: 700;
font-size: 26px;
}
#vote_button {
color: #000000;
}
/*추천 버튼과 목록 사이 폭 변경*/
.rd_vote {
padding-bottom: 40px;
text-align: center;
/*입력창 크기 자동 조절 배경 및 폭 변경*/
}
.xpress-editor .input_control {
position: relative;
display: block;
width: 100%;
height: 25px;
clear: both;
text-align: center;
border-top: 1px solid #410aef;
background: #F6F6F6
/*업로드 설정을 변경하고 저장해보세요!우측 톱니바퀴 버튼을 눌러 설정 창을 볼 수 있습니다 배경 색 변경*/
}
.imgurUploaderMsg {
border-color: #efecee;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
background-color: #EAEAEA;
/*사진 주소를 입력하세요.배경 및 표시줄 변경*/
}
#imgurTextInput {
height: 24px;
vertical-align: middle;
font-size: 12px;
width: 40%;
max-width: 300px;
display: inline-block;
margin: 0;
padding: 2px 6px;
background: #F6F6F6;
border-radius: 3px;
border: 1px solid;
border-color: #add #add #add #add;
/*사진 선택 크기 변경*/
}
.inputCountaner>a {
box-sizing: border-box;
font-size: 16px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
/*등록 버튼 크기 변경*/
}
#imgurTextButton {
box-sizing: border-box;
vertical-align: middle;
font-size: 16px;
width: 20%;
max-width: 140px;
/*글번호 및 잡담 번호 크기*/
}
.bd_tb_lst th, .bd_tb_lst td {
padding: 8px 12px;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
