The ultimate CSS tools for web designers.

웹페이지에 사용할 수 있는 재미있는 CSS 효과 4가지를 자동으로 생성해 주는 도구를 제공합니다. 

이 사이트에서 몇번의 버튼 클릭만으로 멋진 CSS 효과를 만들 수 있습니다. 

CSS 로 오목한 모양과 볼록한 모양을 표현하는 방법입니다.

<div style="
  border:1px solid #222;
  box-shadow: 0 1px 1px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

<div style="
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #777 inset;
  padding: 2px 2px;
">
</div>

Arrow Down

이렇게 보여요

<div style="
  background:#ffb27d;
  border:1px solid #222;
  box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #555 inset;
  padding: 2px 2px;
">
<p>...</p>
</div>

Arrow Down

이렇게 보여요

<div style="
  box-shadow: 0 1px 1px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

<div style="
  box-shadow: 0 3px 3px #999 inset;
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

<div style="
  box-shadow: 0 5px 5px #999 inset, 0 -5px 5px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

<div style="
  box-shadow: 0 8px 8px #999 inset, 0 -8px 8px #444 inset; 
  border: 1px solid #333;
  padding: 2px 2px;
  border-radius: 5px;
  background: #545658;
  min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

<div style="
  box-shadow: 0 8px 8px #c8ebfa inset, 0 -10px 0px #065d82 inset;
  background: #007aae;
  border-radius: 15px;
  border: 1px solid #0e4d68;
  padding: 3px 3px;
  min-height: 1em;
  width:200px;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>

Arrow Down

이렇게 보여요

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" /> 로 수정합니다. 

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}

 

Bootstrap grid

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

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');

    

    

<예시>