웹마스터 팁
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기
2011.12.18 20:54
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
buttonGreen.gif
buttonBlack.gif
buttonRed.gif - 빨간색이 아니라 주황색 같은데?..
buttonBlue.gif
댓글 4
-
윈컴이
2012.03.17 11:17
-
착한악마
2012.03.31 18:33
안녕하세요 좋은 팁 감사합니다.
그런데 1.5.2 버전에서 보니 button.css가 없습니다. 어떻게 해야 할까요...
절실하게 응용하고 싶은데요...
-
웹엔진
2012.03.31 19:44
xe.min.css 파일에 넣어 주시면 되겠습니다. ㅎㅎ
-
착한악마
2012.04.08 17:07
@웹엔진 감사합니다.^^
제목 | 글쓴이 | 날짜 |
---|---|---|
1.5.1에서 파일업로드가 안 되는 분 보세요. [12] | 별님왕자 | 2011.12.07 |
스크립트파일(js)을 하단부에서 불러오게 하기 [1] | Treasurej | 2011.12.09 |
XE관리자 메뉴 활용 방법 ^^ [24] | 똥똥 | 2011.12.09 |
코어 1.5.1에서 회원정보에 성별아이콘 쓰기 | 늘푸른이 | 2011.12.10 |
코어 1.5.1에서 회원목록에 성별아이콘 쓰기(수정) | 늘푸른이 | 2011.12.10 |
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 | 유유히 | 2011.12.15 |
나눔고딕 웹 폰트 적용하기. [10] | 정찬명 | 2011.12.15 |
계정 용량 측정 소스 (펌) [1] | rjsoo | 2011.12.16 |
친절한설명! 자신의홈페이지에 간단히 음악넣기 [10] | 준봉쿠 | 2011.12.18 |
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기 [4] [1] | 웹 엔진 | 2011.12.18 |
1.5 업데이트후 블로그스킨, 리스트에서 내용출력안되는분 수정방법 [4] | Xiso | 2011.12.23 |
XE 1.5.1 업그레이드시 조심해야 [1] | 소걸음 | 2011.12.23 |
XE 애드온 개발하기 | 우진홈 | 2011.12.24 |
확정변수 로 프린트 페이지 꾸미기(/print_page.html) | 세상의지배자 | 2011.12.26 |
XE에서 Context의 이해 [3] | 우진홈 | 2011.12.28 |
rewrite rule 예외처리하기 [2] | 대류 | 2012.01.01 |
계정(HDD) 사용량 출력하기 | 대류 | 2012.01.01 |
Mysql DB사용량 출력하기 [4] | 대류 | 2012.01.01 |
현재 트래픽 출력하기 [1] | 대류 | 2012.01.01 |
XE 외부페이지 직접접속 차단 및 다국어 설정팁 [4] | 라르크앙시엘 | 2012.01.01 |
좋은 글이라 소환하고 싶네요 ^^;