..xe/modules/board/skins/sketchbook5/css/board.css
/* Read */ .rd{margin:0 auto;padding:0 15px;background:#3B3C3B;border-radius:24px 24px 36px 36px;}
xe/modules/board/skins/sketchbook5/css/board.css
/* Thumb */ .no_img{display:block;overflow:hidden;position:relative;margin:0 auto;background:#F3F3F3;font-weight:700;font-size:1.1em;color:#CCC;text-align:center;white-space:nowrap;*margin:0} .tmb_wrp{display:inline-block;position:relative;margin:0 auto;*display:inline;*zoom:1} .tmb_wrp img.tmb{border-radius:10px 10px 10px 10px;display:block;position:relative;margin:0 auto;background:#000;*margin:0} .tmb_wrp .loading{background:url(../img/white/loading.gif) no-repeat 50% 50%}
xe/modules/board/skins/sketchbook5/css/board.css
/* Webzine */ .bd_zine>li{position:relative;margin:0 auto;word-break:break-all;word-wrap:break-word;background-color:#414548;border-radius:8px;opacity:0.8;} .bd_zine.zine>li{clear:both;margin:0 2px;padding:16px 8px 16px 16px;*zoom:1}
카테고리 테두리 둘글게 만들기
..xe/modules/board/skins/sketchbook5/list.html
<!--// 카테고리 --> <div class="cnb_n_list"> ... <div cond="!$mi->cnb" class="bd_cnb clear css3pie<!--@if($mi->cnb_open)--> open<!--@end-->" style="border-radius:18px 0px 0px 18px;">
댓글과 본문 글쓰기 높이를 따로 설정할 수 있습니다.
아래 파일은 댓글부분입니다. 이 부분의 하단에 스타일을 추가해 줍니다.
<style>
.cke_contents {height: 56px !important;}
</style>
이제 댓은 Autogrow 기능은 작동하지 않습니다. 하지만 댓글만 따로 높이만 고정이 됩니다.
sketchbook5.스킨명/css/board.css
/* Extra Form */ 부분
.exForm li{display:inline;list-style:none;float:left;} ... .exForm li label{margin:0 15px 0 0;vertical-align:middle;float:right;}
/* Write */ 부분
.opt_chk label{margin:0 8px 0 0;float:left;} .opt_chk input[type=radio],.opt_chk input[type=checkbox]{margin:0;float:left;}
sketchbook5.스킨/css/black.css
.bd .et_vars{background:#191919}
[클라우드]
구글드라이브 > https://drive.google.com
이미지경로/h32_rb_googledrive.png
이미지경로/h32_rb_googledrive_active.png
핀터레스트 > https://www.pinterest.co.kr/
이미지경로/h32_rb_pinterest.png
이미지경로/h32_rb_pinterest_active.png
플리커 > https://www.flickr.com
이미지경로/h32_rb_flickr.png
이미지경로/h32_rb_flickr_active.png
pixabay > https://pixabay.com/
이미지경로/h32_rb_pixabay2.png
이미지경로/h32_rb_pixabay2_active.png
flaticon > https://www.flaticon.com/
이미지경로/h32_rb_flaticon.png
이미지경로/h32_rb_flaticon_active.png
[색상]
Adobe Color CC > https://color.adobe.com/ko/create/color-wheel/
이미지경로/h32_Adobe_Color_CC_sleep.png
이미지경로/h32_Adobe_Color_CC.png
COPASO > http://www.colourlovers.com/copaso/ColorPaletteSoftware
이미지경로/h32_ColorPaletteSoftware_sleep.png
이미지경로/h32_ColorPaletteSoftware.png
컬러차트 > https://html-color-codes.info/Korean/
이미지경로/h32_html-color-codes_sleep.png
이미지경로/h32_html-color-codes.png
color-hex > http://www.color-hex.com/
[편집기]
pixlr > https://pixlr.com/editor/
이미지경로/h32_pixlr_sleep.png
이미지경로/h32_pixlr_active.png
xe/modules/editor/skins/ckeditor/editor.html
이 파일 맨 하단 수정
.
<a href="https://drive.google.com" title="구글드라이브" target="_blank">
<img src="이미지경로/h32_rb_googledrive.png" onmouseover="this.src='이미지경로/h32_rb_googledrive_active.png'"
onmouseout="this.src='이미지경로/h32_rb_googledrive.png'" border="0"></a>
<a href="https://www.pinterest.co.kr" title="핀터레스트" target="_blank">
<img src="이미지경로/h32_rb_pinterest.png" onmouseover="this.src='이미지경로/h32_rb_pinterest_active.png'"
onmouseout="this.src='이미지경로/h32_rb_pinterest.png'" border="0"></a>
<a href="https://www.flickr.com" title="플리커" target="_blank">
<img src="이미지경로/h32_rb_flickr.png" onmouseover="this.src='이미지경로/h32_rb_flickr_active.png'"
onmouseout="this.src='이미지경로/h32_rb_flickr.png'" border="0"></a>
<a href="https://pixabay.com" title="픽사베이" target="_blank">
<img src="이미지경로/h32_rb_pixabay2.png" onmouseover="this.src='이미지경로/h32_rb_pixabay2_active.png'"
onmouseout="this.src='이미지경로/h32_rb_pixabay2.png'" border="0"></a>
<a href="https://www.flaticon.com" title="flaticon" target="_blank">
<img src="이미지경로/h32_rb_flaticon.png" onmouseover="this.src='이미지경로/h32_rb_flaticon_active.png'"
onmouseout="this.src='이미지경로/h32_rb_flaticon.png'" border="0"></a>
<a href="https://color.adobe.com/ko/create/color-wheel/" title="Adobe Color CC" target="_blank">
<img src="이미지경로/h32_Adobe_Color_CC_sleep.png" onmouseover="this.src='이미지경로/h32_Adobe_Color_CC.png'"
onmouseout="this.src='이미지경로/h32_Adobe_Color_CC_sleep.png'" border="0"></a>
<a href="http://www.colourlovers.com/copaso/ColorPaletteSoftware" title="COPASO" target="_blank">
<img src="이미지경로/h32_ColorPaletteSoftware_sleep.png" onmouseover="this.src='이미지경로/h32_ColorPaletteSoftware.png'"
onmouseout="this.src='이미지경로/h32_ColorPaletteSoftware_sleep.png'" border="0"></a>
<a href="https://html-color-codes.info/Korean/" title="컬러차트" target="_blank">
<img src="이미지경로/h32_html-color-codes_sleep.png" onmouseover="this.src='이미지경로/h32_html-color-codes.png'"
onmouseout="this.src='이미지경로/h32_html-color-codes_sleep.png'" border="0"></a>
<a href="https://pixlr.com/editor/" title="pixlr" target="_blank">
<img src="이미지경로/h32_pixlr_sleep.png" onmouseover="this.src='이미지경로/h32_pixlr_active.png'"
onmouseout="this.src='이미지경로/h32_pixlr_sleep.png'" border="0"></a>
Sketchbook5 게시판 버튼 둥글게 만들기
xe/modules/board/skins/sketchbook5/css/board.css
.bd_btn,.btn_img{display:inline-block;position:relative;height:28px;margin:0;padding:4px 20px;background:#F3F3F3 url(../img/ie/btn.png) repeat-x;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#F3F3F3));background:linear-gradient(to bottom,#000 0%,#999999 100%);border:1px solid;border-color:#CCC #C6C6C6 #C3C3C3 #CCC;border-radius:3px;white-space:nowrap;cursor:pointer;text-decoration:none !important;text-align:center;text-shadow:0 1px 0 #FFF;box-shadow:inset 0 0 1px 1px #FFF,0 1px 1px rgba(0,0,0,.1);*display:inline;*zoom:1}
.bd_btn,.btn_img{display:inline-block;position:relative;height:28px;margin:0;padding:4px 20px;background:#F3F3F3 url(../img/ie/btn.png) repeat-x;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#F3F3F3));background:linear-gradient(to bottom,#000 0%,#999999 100%);border:1px solid;border-color:#CCC #C6C6C6 #C3C3C3 #CCC;border-radius:13px;white-space:nowrap;cursor:pointer;text-decoration:none !important;text-align:center;text-shadow:0 1px 0 #FFF;box-shadow:inset 0 0 1px 1px #FFF,0 1px 1px rgba(0,0,0,.1);*display:inline;*zoom:1}
TAG •
- 버튼,
- 둥글게,
- 라운드,
- radius,
- border-radius,
xe/modules/board/skins/sketchbook5/_list_webzine.html
웹진 스킨에 적용하는 방법
<!--// 일반 목록 -->
<li loop="$document_list=>$no,$document" class="<!--@if($document_srl==$document->document_srl)-->select <!--@end-->clear">
<!--// 일반 목록 -->
<li loop="$document_list=>$no,$document" class="<!--@if($document_srl==$document->document_srl)-->select <!--@end-->clear" cond="$document->variables[status]!='SECRET'||$logged_info->is_admin=='Y'||$logged_info->member_srl==$document->variables[member_srl]">
xe/modules/board/skins/sketchbook5/_list_gallery.html
갤러리 스킨에 적용하는 방법
<!--// 일반 목록 시작 -->
<li loop="$document_list=>$no,$document" class="select"|cond="$document_srl==$document->document_srl">
<div class="tmb_wrp ribbon_v{$mi->ribbon_style}">
<!--// 일반 목록 시작 -->
<li loop="$document_list=>$no,$document" class="select"|cond="$document_srl==$document->document_srl">
<div class="tmb_wrp ribbon_v{$mi->ribbon_style}" cond="$document->variables[status]!='SECRET'||$logged_info->is_admin=='Y'||$logged_info->member_srl==$document->variables[member_srl]">
이렇게 하면 중간 중간 이가 빠진것처럼 나타남
이렇게 적용하는 경우
한페이지에 표시되는 글 수를 10개로 설정한 경우 비밀글이 2개라면
8개만 표시되는 문제점이 있음.
관련 내용 참조(출처)
https://www.xpressengine.com/index.php?document_srl=20542317&search_keyword=%EB%B9%84%EB%B0%80%EA%B8%80&mid=qna
웹진형 목록 보기에서 썸네일 비회원에게도 보여주기
xe/modules/document/document.item.php
if($this->isSecret() && !$this->isGranted())
{
return;
}이 부분을 주석처리함.
// //비밀글 썸테일 보이기 if($this->isSecret() && !$this->isGranted())
// //비밀글 썸테일 보이기 {
// //비밀글 썸테일 보이기 return;
// //비밀글 썸테일 보이기 }
xe/modules/board/skins/sketchbook5/css/black.css
.bd_wrt .color_wrp{background:#191919}
xe/modules/board/skins/sketchbook5/css/board.css
/* Common */
/* Form */...
.bd .itx,.bd select{display:inline-block;margin:0;padding:4px 6px;background:#FAFAFA;border-radius:16px;border:1px solid;border-color:#BBB #DDD #DDD #BBB;*display:inline;*zoom:1}
Sketchbook5 게시판 댓글 쓰기 영역 테두리의 모서리 둥글게 하기
xe/modules/board/skins/sketchbook5/css/board.css
.cmt_editor{margin-bottom:32px;padding:12px 16px 20px;background:#FCFCFC;border:1px solid #DDD;border-bottom-color:#CCC;border-radius:18px;box-shadow:0 1px 3px -1px rgba(0,0,0,.1);*zoom:1}
Sketchbook5 Board 댓글수 표시 영역 배경색상
xe/modules/board/skins/sketchbook5/css/black.css
.bd .bg_f_f9{background:#111 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMxOTE5MTkiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxMTExMTEiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czMTQpIiAvPgo8L3N2Zz4=)}
테두리색
xe/modules/board/skins/sketchbook5/css/board.css
.cmt_wrt_btm .fdb_tag{border:1px solid #666;border-radius:5px}
-
.bd .bg_f_f9{background:#3B3C3B}
Sketchbook5 에서 각종 버튼에 마우스 올라갈 때 빨강색 불이 테두리에 켜지는 효과
xe/modules/board/skins/sketchbook5/css/black.css
.bd_btn,.bd .btn_img,.exForm input[type=button]{color:#FFF;text-shadow:1px 1px 0 rgba(0,0,0,.8);border-color:#666;background:#333;box-shadow:0 1px 3px #000;behavior:none}
.bd_btn:hover,.bd .btn_img:hover,.bd_btn:focus,.bd .btn_img:focus{box-shadow:0 1px 6px #ff0000}
xe/modules/board/skins/sketchbook5/css/board.css
제목 테두리 유형, 글꼴에 영향을 끼침
/* Board Style */
.rd_hd .board .top_area{padding:11px;border-top:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC;border-right:1px solid #CCC;background:#FCFCFC;line-height:1.5em;white-space:nowrap}
.rd_hd .board h1{overflow:hidden;text-overflow:ellipsis;margin:0;padding:0 8px;font-size:20px;line-height:1.5}
xe/modules/board/skins/sketchbook5/css/black.css
배경색, 테두리색, 두께, 테두리 라운드 에 영향을 끼침
/* Read */
/* Read Header */
.rd_hd .btm_area{color:#DDD}
.rd_hd small{color:#888}
.rd_hd .board .img{border-color:#333;background:#191919}
.rd_hd .top_area b,.rd_hd .btm_area b,.rd_hd .board .cate{color:#6F7974} ⑦ 카테고리(분류) 색상
.bd .xe_v3 .top_area{background:#222;border-color:#111;box-shadow:0 1px 1px #000}
.rd_hd .board .btm_area{border-color:#333}
.rd_hd .xe_v3 .btm_area{background:#161616}
.rd_hd .blog{border-top:2px solid #777}
.rd_hd .blog.v3{border:12px solid #333}
.rd_hd .top_area,.rd_hd .btm_area,.rd_hd h1,.rd_hd .blog .btm_area b{text-shadow:0 2px 0 #000 !important}
.rd_hd h1{color:#EEE !important}
.rd_hd .board .top_area{border-width:2px;border-color:#bbb;background:#2C2D2D;border-radius:6px;}
.rd_hd .top_area em{filter:alpha(opacity=100);opacity:1}
.rd_hd .blog .top_area span,.rd_hd .blog .np span{color:#CCC}
.rd_hd .top_area small{color:#777}
-
.rd_hd .board .top_area{border-color:#444;background:#222;border-radius:7px;}
-
.rd_hd .board .top_area{border-width:2px;border-color:#bbb;background:#2C2D2D;border-radius:6px;}
-
.rd_hd .board .top_area{border-width:2px;border-color:#bbb;background:#2C2D2D;border-radius:50px;} /* 본문 제목 영역 */
Sketchbook5
Sketchbook5 보드 댓글 색상
xe/modules/board/skins/sketchbook5/css/black.css
/* Blog */
.rd_blog{background:#5B5E5B;border-color:#222 #111 #000;box-shadow:0 4px 12px #000}배경색 테두리 색 그림자
-
/* Blog */
.rd_blog{background:#3F413F;border-color:#222 #111 #000;box-shadow:0 4px 12px #000} -
블로그형 본문 배경에 테두리 라운드 효과
/* Blog */
.rd_blog{background:#3F413F;border-radius:30px;border-color:#222 #111 #000;box-shadow:0 4px 12px #000}
xe/modules/board/skins/sketchbook5/css/black.css
.bd_zine.card li{border-radius:10px;background:#444;border-color:#111;box-shadow:0 1px 1px rgba(0,0,0,.7)}
카드 테두리 안쪽 배경색
댓글 수 표시 영역 배경 지정을 위해 해당 부분 주석 처리 후 배경색상만 재지정