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

  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 />

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


XE 댓글을 보면 가장 최근에 작성한 글이 가장 아래로 내려갑니다. 

이렇게 되면 최신 글을 보기위해 항상 아래쪽으로 스크롤을 해야 하겠죠. 

그래서 댓글을 가장 최신 글이 맨 위쪽에 위치하도록 설정하면 어떨까 생각해 봤습니다. 

 

 ...xe/modules/comment/queries/getCommentPageList.xml

<query id="getCommentPageList" action="select">
    <tables>
        <table name="comments" alias="comments" />
        <table name="comments_list" alias="comments_list" />
    </tables>
    <columns>
        <column name="comments.*" />
        <column name="comments_list.depth" alias="depth" />
    </columns>
    <conditions>
        <condition operation="more" column="comments.status" var="status" pipe="and" />
<condition operation="equal" column="comments_list.document_srl" var="document_srl" notnull="notnull" pipe="and" />
        <condition operation="equal" column="comments_list.comment_srl" var="comments.comment_srl" filter="number" pipe="and" />
        <condition operation="more" column="comments_list.head" default="0" pipe="and" />
        <condition operation="more" column="comments_list.arrange" default="0" pipe="and" />
    </conditions>
    <navigation>
        <index var="list_order" default="comments_list.head" order="desc" />
        <index var="list_order" default="comments_list.arrange" order="asc" />
        <list_count var="list_count" default="list_count" />
        <page_count var="page_count" default="10" />
        <page var="page" default="1" />
    </navigation>
</query>

18번째 줄의 order="asc" /> Arrow Right  order="desc" /> 로 수정합니다. 

 

댓글(5) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2019.05.27 17:19

    세번째 남긴 댓글 입니다. 

  • dodo 2019.05.27 17:19

    두번째 남긴 댓글입니다. 

  • dodo 2019.05.27 17:20
    두번째에 남긴 네번째의 대댓글입니다.
  • dodo 2019.05.27 17:21

    두번째에 남긴 다섯번째 대댓글입니다. 
     아유 잘되세요. 

  • dodo 2019.05.27 17:19

    첫번째 남긴 댓글 입니다. 


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


관련파일> .../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}

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


image.png

 

 

..xe/modules/board/skins/sketchbook5/css/board.css


 

/* Read */
.rd{margin:0 auto;padding:0 15px;background:#3B3C3B;border-radius:24px 24px 36px 36px;}

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


image.png

 

 

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

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


image.png

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}



 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


카테고리 테두리 둘글게 만들기 
image.png

 

..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;">

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


댓글과 본문 글쓰기 높이를 따로 설정할 수 있습니다. 

아래 파일은 댓글부분입니다. 이 부분의 하단에 스타일을 추가해 줍니다. 

<style>
 .cke_contents {height: 56px !important;}
</style>

 

이제 댓은 Autogrow 기능은 작동하지 않습니다. 하지만 댓글만 따로 높이만 고정이 됩니다. 

댓글(1) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2019.05.27 11:03

    !important 때문에 댓글 높이를 사용자가 지정할 수 없게 됩니다. 
    사용자가 댓글 입력창 높이를 마우스 드래그로 조절하려면 !important 를 삭제하세요. 


 

image.png

 

 

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

 

 

 

image.png

 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


sketchbook5.스킨/css/black.css

.bd .et_vars{background:#191919}

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


XE code_highlighter

  1. XE code_highlighter 를 설치합니다. 
    설치 위치> xe/modules/editor/components/code_highlighter
     
  2. ckeditor 편집기의 툴바를 등록합니다.  
    toolbar: [
    	  { name: 'xe_component', items: ['code_highlighter' ] },
    	]

 

< 다운로드 경로 > 

  1. XE 공식 자료실 > 
  2. 구글 드라이브 자료실 > 

 

댓글(2) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.11.26 18:38
    .syntaxhighlighter {
    ...
      border-radius: 6px;
    }

     

  • dodo 2018.11.26 16:44

    세로 스크롤 바 제거하기 

    XE.../editor/components/code_highlighter/syntaxhighlighter/styles/shCore테마명.css

     

    .syntaxhighlighter textarea {
      ...
      padding-bottom: 5px !important;
    }

     

    아니면

    .syntaxhighlighter {
     ...
      padding-bottom: 5px !important;
    }

     

    이건 지도 모르겠다 


https://avada.tistory.com/829

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


"비밀글입니다."


"비밀글입니다."


[클라우드]
구글드라이브 > 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>
 

 

댓글(1) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.07.19 07:09 SECRET

    "비밀글입니다."


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}

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


xe/modules/board/skins/xet_infinite_board/_style.gallery.html

무한 스크롤 게시판 갤러시 스킨에서 비밀글 이미지 목록에서 제외하기 

<!--// Style Gallery //-->
<div class="baord_gallery" id="xet_infinite_content">    
    <div class="item" loop="$document_list=>$no,$document" style="margin-bottom:{$module_info->gallery_thumbnail_space}px;" cond="$document->variables[status]!='SECRET'||$logged_info->is_admin=='Y'||$logged_info->member_srl==$document->variables[member_srl]">

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


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

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


웹진형 목록 보기에서 썸네일 비회원에게도 보여주기 

xe/modules/document/document.item.php

if($this->isSecret() && !$this->isGranted())
{
   return;
}

이 부분을 주석처리함. 

// //비밀글 썸테일 보이기  if($this->isSecret() && !$this->isGranted())
        // //비밀글 썸테일 보이기 {
            // //비밀글 썸테일 보이기 return;
        // //비밀글 썸테일 보이기 }

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


xe/modules/board/skins/sketchbook5/css/black.css

sketchbook5_bb11.jpg

 

.bd_wrt .color_wrp{background:#191919}

.bd_wrt .color_wrp{background:transparent}
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


목록
Board Pagination Prev 1 2 Next
/ 2
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...