웹마스터 팁

WebEngine[Tip]

XE가 1.5로 업데이트 되면서 사라진 다양한 색깔의 버튼을 그리워(?)하는 분들이 많아서 이 팁을 준비했습니다.

1. 내 사이트에 넣자!!!!!
우선 첨부한 이미지를 다운받아서 [ ./common/css/ ] 에 저장해 주세요. (파일 이름은 반드시 button_색상.gif 로 해 주세요.)
그리고 [ ./common/css/button.css ] 에 아래 코드를 추가합니다.

아무곳이나 상관 없는데 알아보기 쉽게 하는게 좋을거에요.

 /* NHN (developers@xpressengine.com) */

/* Anchor Button */

a.button,

a.button span { position:relative; display:inline-block; text-decoration:none !important; background:url(buttonWhite.gif) no-repeat; cursor:pointer; white-space:nowrap; vertical-align:middle;}

a.button { padding:0; background-position:left top; overflow:visible;}

a.button span { left:2px; padding:6px 10px 5px 8px; color:#000; font:12px/12px Sans-serif; background-position:right top; vertical-align:top;}

/* Large Size */

a.button.large { background-position:left -30px; }

a.button.large span { padding:7px 10px 6px 8px; font:16px/16px Sans-serif; background-position:right -30px;}

/* xLarge Size */

a.button.xLarge { background-position:left -65px; }

a.button.xLarge span { padding:8px 10px 7px 8px; font:20px/20px Sans-serif; background-position:right -65px;}

/* Small Size */

a.button.small { background-position:left -107px; }

a.button.small span { padding:4px 6px 3px 4px; font:11px/11px "맑은 고딕",Sans-serif; background-position:right -107px;}

/* Control Button + Submit Button */

span.button,

span.button button,

span.button input { position:relative; margin:0; display:inline-block; border:0; font:12px Sans-serif; white-space:nowrap; background:url(buttonWhite.gif) no-repeat; vertical-align:middle;}

span.button { padding:0; background-position:left top;}

span.button button,

span.button input { height:23px; left:2px; vertical-align:top; padding:0 10px 0 8px; line-height:24px; background-position:right top; cursor:pointer; overflow:visible;}

/* Large Size */

span.button.large { background-position:left -30px;}

span.button.large button,

span.button.large input { height:30px; padding:0 10px 0 8px; font:16px/30px Sans-serif; background-position:right -30px;}

/* xLarge Size */

span.button.xLarge { background-position:left -65px;}

span.button.xLarge button,

span.button.xLarge input { height:35px; padding:0 10px 0 8px; font:20px/36px Sans-serif; background-position:right -65px;}

/* Small Size */

span.button.small { background-position:left -107px;}

span.button.small button,

span.button.small input { height:18px; padding:0 6px 0 4px; font:11px/18px Sans-serif; background-position:right -107px;}

/* Strong Button */

a.button.strong *,

span.button.strong * { font-weight:bold !important;}

/* Icon Add */

a.button .icon { position:relative; border:0; vertical-align:middle;}

span.button .icon { position:relative; left:10px; margin-right:8px; vertical-align:middle;}

/* Color Preset */

a.button.green,

a.button.green span,

span.button.green,

span.button.green button,

span.button.green input { background-image:url(buttonGreen.gif); color:#fff;}

a.button.black,

a.button.black span,

span.button.black,

span.button.black button,

span.button.black input { background-image:url(buttonBlack.gif); color:#fff;}

a.button.red,

a.button.red span,

span.button.red,

span.button.red button,

span.button.red input { background-image:url(buttonRed.gif); color:#fff;}

a.button.blue,

a.button.blue span,

span.button.blue,

span.button.blue button,

span.button.blue input { background-image:url(buttonBlue.gif); color:#fff;}

/* Offset Debug */

a.button,

span.button{ margin-right:2px;}

/* Button Set */

.buttonSet{ width:16px; height:16px; background-image:url(buttonSet.gif); background-repeat:no-repeat; border:0; background-color:transparent; vertical-align:middle; display:inline-block; text-decoration:none;}

.buttonSet span{ z-index:-1; font-size:0; line-height:0; visibility:hidden;}

.buttonSet.buttonUp{ background-position:0 0;}

.buttonSet.buttonDown{ background-position:0 -16px;}

.buttonSet.buttonLeft{ background-position:0 -32px;}

.buttonSet.buttonRight{ background-position:0 -48px;}

.buttonSet.buttonInfo{ background-position:0 -64px;}

.buttonSet.buttonCopy{ background-position:0 -80px;}

.buttonSet.buttonSetting{ background-position:0 -96px;}

.buttonSet.buttonActive{ background-position:0 -112px;}

.buttonSet.buttonDisable{ background-position:0 -128px;}

.buttonSet.buttonDelete{ background-position:0 -144px;}

.buttonSet.buttonHomepage{ background-position:0 -160px;}

.buttonSet.buttonBlog{ background-position:0 -176px;}

.buttonSet.buttonCalendar{ background-position:0 -192px;}

.buttonSet.buttonLayoutEditor{ background-position:0 -208px;}

.buttonSet.buttonAddWidget{ background-position:0 -224px;}

.buttonSet.buttonAddContent{ background-position:0 -240px;}

IE와 오페라를 제외하면 대부분 다 버튼효과가 나타나지 않습니다.

2. 어떻게 사용하지?
http://www.xpressengine.com/19587398 를 참조해 주세요.

3. 파일 미리보기

buttonWhite.gif

buttonWhite.gif


buttonGreen.gif

buttonGreen.gif


buttonBlack.gif

buttonBlack.gif


buttonRed.gif  -  빨간색이 아니라 주황색 같은데?..

buttonRed.gif


buttonBlue.gif

buttonBlue.gif

제목 글쓴이 날짜
1.5.2.3 업데이트 후 이미지, 아이콘 테두리 생김 현상 없애는 방법 [3] 비밀얌 2012.04.28
1.5.2.3 에서 게시글이 등록이 되는데 ajax XML parser 에러가 나는경우 엑스셀코드 2012.04.28
게시판에 다운로드 횟수 출력하기 (스케치북 게시판 전용) [5] file 숭숭군 2012.04.20
관리자 글 등록시 비번 입력하게 만들기 [5] 우진♡아빠 2010.04.28
Xe 1.5.1로 사이트 꾸미기 part 1 [25] file 황비 2011.12.04
도라란님의 팁에 추가하여 MP3와 동영상 파일도 막고 싶을 경우.. [4] Canto 2011.07.23
이미지 외부링크 차단하는법 [6] 리리슐츠 2012.04.08
회원가입폼 비밀번호 찾기 질문/답변 삭제및 필수항목 선택 (송동우님 팁) 때린데 또때려 2012.04.08
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기 [4] [1] file 웹 엔진 2011.12.18
조회수 클릭때마다 올라가기(1.4.5.7 버전에서 되네요) [2] file 아네모네 2011.06.20
마우스 오버시 텍스트 호버링(주석나타내기..레이어적용) [1] Konghee 2012.04.02
[초보팁] 최근게시물 위젯에 확장변수 표시하기 [23] 오뎅궁물 2010.01.29
이번 xe 1.5.2.1 업데이트 하고 게시판 보기 .htaccess 문제 권기성2 2012.03.29
1.5 업데이트후 블로그스킨, 리스트에서 내용출력안되는분 수정방법 [4] Xiso 2011.12.23
제로보드4 에서 xe 1.5 버전설치후 xml 파일 이전시 파일 누락되는 현상해결 [4] 때린데 또때려 2012.03.24
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] 쏘프티 2011.05.10
그룹별 회원정보 검색 & 회원의 추가가입폼 복수 검색 팁 (XE 1.5) sejin7940 2012.03.22
phpmyadmin 로그인시 아래와 같은 에러나올경우 해결방법 [1] file 때린데 또때려 2012.03.12
XE Core 압축파일(tar.gz)을 올려 서버상에서 압축풀기 [2] 뚱뚱이1 2012.03.01
ie9에서 파일첨부버튼이 먹통일때.. (1.4.5.10 버전) 엔키오 2012.03.07