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}

 

button01.jpg button02.jpg

 

 

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

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

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

0개 첨부 됨 ( / )


xe/common/css/bootstrap.min.css
 

blockquote{

padding:0 0 0 12px;

margin:0 0 0 20px;

border-left:2px solid #E46F35

}

blockquote p{

margin-bottom:0;

font-size:14.5px;

font-weight:300;

line-height:1.25

}

인용문 기본 스타일

padding  Angle Double Right  padding-top padding-right padding-bottom padding-left

margine Angle Double Right  margin-top margin-right margin-bottom margin-left

border-left  왼쪽두께 유형 색상

 

인용문 글자스타일

font-size 글씨크기

fonr-weight 

line-height 줄간격

 

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.02.14 13:23

    blockquote{padding:0 0 0 12px;margin:0 0 0 20px;border-left:2px solid #E46F35}blockquote p{margin-bottom:0;font-size:14.5px;font-weight:300;line-height:1.25}


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;           모서리 라운드 효과 

}

 

 

Scketchboot5_BoardTitle.jpg

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.03.09 23:58

    .rd_hd .board .top_area{border-width:2px;border-color:#bbb;background:#2C2D2D;border-radius:50px;}   /* 본문 제목 영역 */

  • dodomaru@gmail.com 2018.03.09 20:19

    .rd_hd .board .top_area{border-width:2px;border-color:#bbb;background:#2C2D2D;border-radius:6px;}

  • dodo 2018.02.14 10:23

    .rd_hd .board .top_area{border-color:#444;background:#222;border-radius:7px;}


 !important 속성은 무엇일까요?
 

CSS[1] 는 동일한 스타일 속성이 있는 경우 아래쪽에 있는 스타일이 최종 적용됩니다. 

body { color: red; }

body { color: blue; }   Angle Double Left  파랑색이 적용 됨

 

 !important 를 적용하면 아래쪽에 동일한 스타일 속성이 있어도 변경되지 않습니다. 

body { color: red !important; }     Angle Double Left   빨강색이 적용됨 

body { color: blue; } 

!important 는 적용된 부분의 스타일이 중요해서 변경하지 않도록 브라우저에게 알려줍니다. 
또한 함께 작업하는 웹디자이너가 있다면 해당 부분의 스타일이 중요하다는 것을 알려주기도 합니다. 

Footnotes

  1. ^ CSS : Cascading Style Sheets
댓글(0) 남기기...
사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )


/ckeditor/skin/moono-dark/editor.css

이미지(230*140) 설명 코드
image.png
상단 툴바 테두리 .cke_top{border:1px solid #343434
top-line.jpg 상단 라인 .cke_chrome{display:block;border:0px solid #555;border-top:1px solid #555;padding:0;-moz-box-shadow:0 0 0px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0px rgba(0,0,0,.15);box-shadow:0 0 0px rgba(0,0,0,.15)}
ckeditor-radius.jpg

상단 툴바 모서리 

배경과 라운드

배경색

.cke_inner{display:block;-webkit-touch-callout:none;background:#ff0000;padding:0;border-radius:10px;}

모서리 바깥쪽 테두리

 

모서리 둥글게 

.cke_top{border:1px solid #0d0d0d;border-radius:10px 10px 0px 0px;padding:6px 8px 

ckeditor-bottom-radius.jpg

하단 상태바

모서리 둥글게

모서리 둥글게 border-radius 추가

.cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #222;border-radius:0px 0px 5px 10px;

image.png
본문 배경색

.cke_wysiwyg_div{background-color:#3F413F}

image.png

편집기 테두리 색

테두리 그림자

.cke_chrome{

display:block;

border:1px solid #555;

padding:0;

-moz-box-shadow:0 0 3px rgba(0,0,0,.15);

-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);

box-shadow:0 0 3px rgba(0,0,0,.15)

}

ckeditorbottom.jpg

 

편집기 하단

 

 

 

 

 

 

 

 

.cke_bottom{

padding:6px 8px 2px;

position:relative;

border-top:1px solid #000;

-moz-box-shadow:0 1px 0 #888 inset;

-webkit-box-shadow:0 1px 0 #888 inset;

box-shadow:0 1px 0 #888 inset;

background:#454545;

background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));

background-image:-moz-linear-gradient(top,#444,#222);

background-image:-webkit-linear-gradient(top,#444,#222);

background-image:-o-linear-gradient(top,#444,#222);

background-image:-ms-linear-gradient(top,#444,#222);

background-image:linear-gradient(top,#444,#222);

filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#444',endColorstr='#222')

}

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.02.23 19:57

    입력란 배경 투명하게 만들기 

    .cke_wysiwyg_div{background-color:#ccc;opacity:0.7;}

  • dodo 2018.02.18 22:35

    편집기 상단 크롬용 일부 수정 ( ckeditor/skins/moono-dark/editor.css )

    .cke_top{border:0px solid #0d0d0d;border-radius:10px 10px 0px 0px;padding:6px 8px 2px;white-space:normal;-moz-box-shadow:0 1px 0 rgba(255,255,255,.15) inset;-webkit-box-shadow:0 1px 0 rgba(255,255,255,.15) inset;box-shadow:0 1px 0 rgba(255,255,255,.15) inset;background:#666;background-image:-webkit-gradient(linear,left top,left bottom,from(#3d3d3d),to(#1d1d1d));background-image:-moz-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-webkit-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-o-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:-ms-linear-gradient(top,#3d3d3d,#1d1d1d);background-image:linear-gradient(top,#3d3d3d,#1d1d1d);filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#3d3d3d',endColorstr='#1d1d1d')}

  • dodo 2018.02.18 22:15

    IE용 편집기 하단 일부 수정 ( ckeditor/skins/moono-dark/editor_ie.css )

    .cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #333;border-radius:0px 0px 5px 10px;-moz-box-shadow:0 1px 0 #6a6a6a inset;-webkit-box-shadow:0 1px 0 #6a6a6a inset;box-shadow:0 1px 0 #6a6a6a inset;background:#404040;background-image:-webkit-gradient(linear,left top,left bottom,from(#3d3d3d),to(#1d1d1d));

  • dodo 2018.02.15 10:07

    편집기 하단 일부 수정 

    .cke_bottom{padding:6px 8px 2px;position:relative;border-top:1px solid #151515;-moz-box-shadow:0 1px 0 #666 inset;-webkit-box-shadow:0 1px 0 #666 inset;box-shadow:0 1px 0 #666 inset;background:#404040;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#222));background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:-ms-linear-gradient(top,#444,#222);background-image:linear-gradient(top,#444,#222);filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#444',endColorstr='#222')}


목록
Board Pagination Prev 1 ... 16 17 18 19 20 21 22 23 24 25 ... 28 Next
/ 28
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...