댓글 편집기를 필요할 때만 펼쳐서 사용할 수 있도록 접어두는 방법입니다. 

1. CKEditor 플러그인 중 detail 플러그인을 설치합니다. 
2. XE 사용자라면 이 detail 플러그인에서 정의한 CSS를 XE의 레이아웃의 CSS 등록하는 부분에 등록합니다. 
3. 필요한 부분에 <details><summary> 제목에 해당하는 부분 </summary> 감추어 두려는 부분 </details> 처럼 넣어 주면 됩니다. 

<details><summary> <img src="/@PublicData/images/Bullet/00427.gif"> 댓글({$oDocument->getCommentcount()}) 남기기...</summary>
<div class="cmt_editor" style="margin-top:30px"|cond="$mi->cmt_wrt_position=='cmt_wrt_btm' && $oDocument->getCommentcount()">
...
...
...
<!--@end-->
</div>
</details><br />

Sketchbook5 게시판의 상단 네비게이션(  ) 부분  색상 변경 방법

관련파일> .../modules/board/skins/스킨명/css/테마명.css

 

/* 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:50px;}   /* 본문 제목 영역 */
.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_nav_style2 .rd_nav,.rd_nav_side .rd_nav,.rd_nav_style2 .rd_nav .edit,.rd_sign,.rd_sign .img,.rd_body .rd_file{background:#464845;border-color:#444}
.rd_nav .help strong,.rd_vote a.blamed{background:#222;border-color:#777}
.rd_nav a,.rd_sign h4,.rd_file a,.rd_trb .link,.rd_nav .tg_btn2{color:#999}

104 라인의 {background:#464845;border-color:#444} 부분을 아래와 같이 수정함 

...
.rd_nav_style2 .rd_nav,.rd_nav_side .rd_nav,.rd_nav_style2 .rd_nav .edit,.rd_sign,.rd_sign .img,.rd_body .rd_file{background:transparent;border: 0px solid #6B6C6B;border-radius: 12px;box-shadow: 0 1px 1px #424440 inset, 0 -1px 0px #777 inset;}
.rd_nav .help strong,.rd_vote a.blamed{background:#444;border-color:#777}
.rd_nav a,.rd_sign h4,.rd_file a,.rd_trb .link,.rd_nav .tg_btn2{color:#666}

 

..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}

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}

.bd_wrt .color_wrp{background:transparent}

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}

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}

/* 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.2    ⑤ 줄간격

}

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-width:2px;            ① ② ③ ④ 테두리 두께 

    border-color:#bbb;          ① ② ③ ④ 테두리 색상 

    background:#2C2D2D;     ⑥ 배경색

    border-radius:6px;           모서리 라운드 효과 

}