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

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

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

0개 첨부 됨 ( / )


게시판 본문에 사용된 hr(가로선)의 스타일을 일괄로 원하는 모양으로 변경하는 방법

 

XE루트 / common / css / customcss.css  에 아래와 같이 스타일 넣기 

.content hr {
    border-top:1px solid #383838; 
   border-bottom: 1px solid #858585;
}

 

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

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

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

0개 첨부 됨 ( / )


Templates 플러그인에서 템플릿을 선택하면 한순간에 모든 내용이 템플릿으로 전부 대체되어 난감할 수 있음

그래서 템플릿 다이알로그에서 기본 값을 체크해제 해 두고, 필요시에만 체크할 수 있도록 변경


 

{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"default":n.templates_replaceContent}

 

아래 처럼 default 값을 해제함

{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"":n.templates_replaceContent}

 

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

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

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

0개 첨부 됨 ( / )


크롬에서는 포기

Internet Explorer 11 에서 보안 설정에 따라 이미지 업로드가 되는 것을 확인 함.

 

  1. imgur 플러그인이 적용된 도메인을 [신뢰할 수 있는 사이트]에 넣어 줍니다.
    *.imgur.com 도 같이 넣어 줍니다.
  2. [신뢰할 수 있는 사이트] 의 보안 설정{=사용자 지정 수준}에서 □ 도메인 간의 데이터 원본 액세스 항목의 값을 ◎ 사용 으로 설정합니다.

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

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

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

0개 첨부 됨 ( / )


최대화를 기본으로 웹브라우저화면에 꽉차게 열어보기.


CKEDITOR.replace('ckeditor',
    { customConfig : 'config.js', 
      width: '100%',
      height: '360', });

CKEDITOR.on('instanceReady',function( evt ){
     var editor = evt.editor;
     editor.execCommand('maximize');
});

 

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

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

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

0개 첨부 됨 ( / )


elFinder 의 미리보기 창 크기 변경 

 

quicklook : {
autoplay : true,
width    : 450,
height   : 300,
// ControlsList of HTML5 audio/video preview

 

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

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

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

0개 첨부 됨 ( / )


1. CKEditor 를 다운 받을 때 최적화된 코드로 다운받으면 코드 해석이 어렵게 됨. 최적화된 코드를 기준으로 추가된 항목을 확인하면 아래와 같다.    xe/..../ckeditor/config.js

(function(){CKEDITOR.plugins.add("btgrid",{lang:"en,ru,fr,nl",requires:"widget,dialog",icons:"btgrid",init:function(b){var f=b.lang.btgrid;CKEDITOR.dialog.add("btgrid",this.path+"dialogs/btgrid.js");b.addContentsCss(this.path+"styles/editor.css");b.ui.addButton("btgrid",{label:f.createBtGrid,command:"btgrid",icon:this.path+"icons/btgrid.png"});b.widgets.add("btgrid",{allowedContent:"div(!btgrid);div(!row,!row-*);div(!col-*-*);div(!content)",requiredContent:"div(btgrid)",parts:{btgrid:"div.btgrid"},
editables:{content:""},template:'\x3cdiv class\x3d"btgrid"\x3e\x3c/div\x3e',dialog:"btgrid",defaults:{},upcast:function(a){return"div"==a.name&&a.hasClass("btgrid")},init:function(){var a=1,e=this.element.getChildCount();for(a;a<=e;a++)this.createEditable(12,a)},data:function(){if(this.data.colCount&&1>this.element.getChildCount())for(var a=this.data.colCount,e=this.data.rowCount,h=this.data.rowHeight,c=this.parts.btgrid,d=1;d<=e;d++)this.createGrid(a,c,d,h)},createGrid:function(a,e,c,h){for(var d='\x3cdiv class\x3d"row row-'+
c+'"\x3e',b=1;b<=a;b++)d=d+'\x3cdiv class\x3d"col col-md-'+12/a+'"\x3e  \x3cdiv class\x3d"content" style="min-height:'+h+'em;"\x3e    \x3cp\x3eCol '+b+" content area\x3c/p\x3e  \x3c/div\x3e\x3c/div\x3e";e.appendHtml(d+"\x3c/div\x3e");this.createEditable(a,c)},createEditable:function(a,b){for(var c=1;c<=a;c++)this.initEditable("content"+b+c,{selector:".row-"+b+" \x3e div:nth-child("+c+") div.content"})}})}})})();

 

2. btgrid 플러그인 수정  ckeditor/plugins/btgrid/dialogs/btgrid.js

 

CKEDITOR.dialog.add("btgrid",function(d){function c(a){return function(){var b=this.getValue();(b=!!(CKEDITOR.dialog.validate.integer()(b)&&0<b))||alert(a);return b}}var b=d.lang.btgrid;return{title:b.editBtGrid,minWidth:240,minHeight:120,onShow:function(){var a=d.getSelection();a.getRanges();var b=this.getName(),c=this.getContentElement("info","rowCount"),e=this.getContentElement("info","colCount"),h=this.getContentElement("info","rowHeight");"btgrid"==b&&(a=a.getSelectedElement())&&(this.setupContent(a),c&&c.disable(),e&&e.disable())},contents:[{id:"info",
label:b.infoTab,accessKey:"I",elements:[{id:"colCount",type:"select",required:!0,label:b.selNumCols,items:[["2",2],["3",3],["4",4],["6",6],["12",12]],validate:c(b.numColsError),setup:function(a){this.setValue(a.data.colCount)},commit:function(a){a.setData("colCount",this.getValue())}},{id:"rowCount",type:"number",width:"50px",required:!0,label:b.genNrRows,validate:c(b.numRowsError),setup:function(a){this.setValue(a.data.rowCount)},commit:function(a){a.setData("rowCount",this.getValue())}},
{id:"rowHeight",type:"number",width:"50px",label:"줄높이입력",setup:function(a){this.setValue(a.data.rowHeight)},commit:function(a){a.setData("rowHeight",this.getValue())}}
]}]}});

 

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

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

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

0개 첨부 됨 ( / )


CKeditor 의 Plugins 의 Dialog 상자 안에서  개별 field 요소(입력폼)의 값 변경시 다른 fields 요소(입력폼)에 영향을 끼쳐 원하는 값을 입력할 수 있도록 하는 방법입니다. - 아 설명이 이게 맞나? 아무튼 아래 그림으로 설명합니다. 

image.png

위 이미지와 같이 하나의 입력 field 를 수정하면 다른 입력 field 도 같이 바뀌는 거죠. 

{
  type: 'number',
  id: 'input-all',
  label: '일괄적용',
  onChange: function() {
      this.getDialog().setValueOf("탭id", "input-왼쪽위", this.getValue());
      this.getDialog().setValueOf("탭id", "input-오른쪽위", this.getValue());
      this.getDialog().setValueOf("탭id", "input-왼쪽아래", this.getValue());
      this.getDialog().setValueOf("탭id", "input-오른쪽아래", this.getValue());
   }
}

 

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2019.11.11 16:24

    이 플러그인(radisustable)을 이용해서 만든

    이미지 배경 테이블 입니다. 


XE 로그인 폼과 관련 있는 CSS 임

 

xe/modules/message/skins/xedition/css/message.css

 

 

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

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

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

0개 첨부 됨 ( / )


CAMERON STAGE Layout For XE 


image.png

XE 용 레이아웃 스킨 STAGE Layout 은 브라우저의 가로 폭 이 특정 너비에 도달하면 주 메뉴 가 펼쳐집니다.

이 때 특정 너비(메뉴가 펼쳐지는 한계값)을 바꾸는 방법입니다. 

 

1. xe/layouts/stage/css/stage.css 파일의 203 라인의 max-width 값을 변경합니다. 

@media screen and (max-width: 1680px){
#stage-content{padding-right:220px; padding-left:60px}
}

@media screen and (max-width: 1560px){
.stage-pc #stage-visual .sbtn{right:20px}
.stage-mobile #stage-visual .sbtn{right:0}
#lighting, #stage-cont #lighting{margin-right:-460px}
#lighting2{right:0; margin-right:-640px}
#lighting-m{display:block}
#stage.stage-pc{padding-right:20px}
#stage.stage-mobile{padding-right:0}
#stage-content{padding-right:100px; padding-left:100px}
#stage-contfull{padding-right:0}
}

@media screen and (max-width: 1140px){
#stage-content{padding-right:80px; padding-left:80px}
}

 

 

2. xe/layouts/stage/_settings.html 파일에서 65 라인 max-width 값을 변경 

<style type="text/css" id="settings">
<!--@if($layout_info->nav_width)-->
#lighting{width:{$layout_info->nav_width}px}
#lighting2{right:{$layout_info->nav_width}px}
#stage-visual .sbtn{right:{$layout_info->nav_width}px}
#stage{padding-right:{$layout_info->nav_width}px}
@media screen and (max-width: 1560px){
#stage-visual .sbtn{right:20px}
#lighting, #stage-cont #lighting{margin-right:-{$layout_info->nav_width-20}px}
#lighting2{right:0; margin-right:-{$layout_info->nav_width+160}px}
#stage{padding-right:20px}
}
<!--@endif-->

 

 

 

 

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

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

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

0개 첨부 됨 ( / )


image.png

위와 같이 elFinder 에서 네트워크 드라이브를 마운트 할 경우 NetworkGroup 에 들어가도록 설정하는 방법입니다. 

    public function __construct()
    {
        $opts = array(
            'phash'  => 'gN_Lw',
            'client_id' => '',
            'client_secret' => '',
            'accessToken' => '',

 

 

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

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

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

0개 첨부 됨 ( / )


xet_infinite_board 스킨에서 이미지를 정회원에게만 보이도록 설정하는 방법입니다. 

 

[적용 파일]
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'||implode(',',$logged_info->group_list)=='정회원'||$logged_info->member_srl==$document->variables[member_srl]">

<div class="itemList r3 <!--@if($document_srl==$document->document_srl)-->on<!--@end-->" style="height:{$module_info->gallery_height}px;"|cond="$module_info->gallery_height">

 

cond="$document->variables[status]!='SECRET'||implode(',',$logged_info->group_list)=='정회원'||$logged_info->member_srl==$document->variables[member_srl]"

비밀글인 경우에 로그인 사용자의 그룹이 '정회원'이면 목록에 표시해 줍니다. 

 

 

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

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

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

0개 첨부 됨 ( / )


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

  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개 첨부 됨 ( / )


Bootstrap grid

https://ckeditor.com/cke4/addon/btgrid


image.png   image.png

 

Col 1 content area

Col 2 content area

Col 3 content area

 

  1. btgrid_1.0b1.zip 를  /ckeditor/plugins/btgrid 위치로 업로드 후 압축 해제
  2. CKEditor config.js config.extraPlugins = 'btgrid'; 추가 
    더 보기...

    XE 라이믹스에서는  관리자> 고급> 에디터> 공통설정> 추가 플러그인 로드 부분에 btgrid 추가 

     

  3. /btgrid/styles/editor.css 를 최종적으로 보여질 html 파일에도 넣어줘야 최종 화면에서 모양이 유지됨

    더 보기...

    XE 라이믹스 에서는 관리자>... 레이아웃> html/css> css  부분에 css파일을 import

    @import url('//도메인/경로/ckeditor/plugins/btgrid/styles/editor.css');

     

     

<예시>
 

 

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

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

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

0개 첨부 됨 ( / )


갑자기 폴더창의 색상을 그라디어트 적용하고 싶어졌음. 

image.png

 

/**
 * Navbar
 */
.elfinder .elfinder-navbar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#202225+0,3b4047+100 */
background: #191a1c;
background: -moz-linear-gradient(67deg, #191a1c 50%, #535961 100%);
background: -webkit-linear-gradient(67deg, #191a1c 50%,#535961 100%);
background: linear-gradient(67deg, #191a1c 50%,#535961 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191a1c', endColorstr='#535961',GradientType=1 );
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  border: none;
}

 

대각선 67도로 비스듬하게 색상변화 적용 

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

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

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

0개 첨부 됨 ( / )


설치경로> ./addons/php_exif 

지원환경> XpressEngine,Rhymix

라이선스> GPL v2

제작자> karma

 

특징> 사진의 EXIF 정보를 보여주고, 위치정보가 포함되어 있을 경우 클릭하면 지도로 표시해 줍니다. 

 

다운로드 > XETOWN

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

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

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

0개 첨부 됨 ( / )

  • dodo 2019.01.03 00:12 SECRET

    "비밀글입니다."


elfinder/js/elfinder.js

 

/**
* Contextmenu config
*
* @type Object
*/
contextmenu : {

 

댓글(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개 첨부 됨 ( / )


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