웹마스터 팁

XE에서 버튼 부분이 사라져 이 곳에서는 테스트가 어렵습니다.

양해 부탁드립니다.

WebEngine[Tip]

XE공식 버튼2 삽입하기 입니다.
이건 원래 배포가 안되어 있어서 XpressEngine 공식 사이트에서만 사용이 가능했는데요.
카르마님의 미배포 게시판 스킨에서 사용되길래 올려봅니다.

1. 내 사이트에 넣어보자!

우선 첨부한 이미지를 다운받아서 [ ./common/css/ ] 에 저장해 주세요. (파일 이름은 반드시 btn25.gif 로 해 주세요.)
그리고 [ ./common/css/button.css ] 를 수정합니다.

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

/* btn25 */
.btn25,
.btn25 a,
.btn25 button,
.btn25 input{display:inline-block;height:25px;line-height:25px;padding:0;margin:0;overflow:visible;position:relative;background:url(btn25.gif) no-repeat;cursor:pointer}
.btn25{background-position:0 0;margin:0 2px 0 0;vertical-align:top}
.btn25 a,
.btn25 button,
.btn25 input{padding:0 12px;left:2px;font-size:12px;color:#4a4a4a;font-weight:bold;border:0;background-position:right 0;text-decoration:none}
.btn25.blue{background-position:0 -30px}
.btn25.blue *{background-position:right -30px !important;color:#fff !important}
.btn25.black{background-position:0 -60px}
.btn25.black *{background-position:right -60px !important;color:#fff !important}

를 넣습니다.

2. 어떻게 사용하지?
<span class="btn25"><button>공식버튼2 예제</button></span>
공식버튼2 예제
<span class="btn25"><input type="button" value="공식버튼2 예제"></span>

<span class="btn25"><input type="submit" value="공식버튼2 예제"></span>

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

3. 링크를 걸수는 없을까?
<span class="btn25"><a href="http://xpressengine.com">공식버튼2 예제</a></span>
공식버튼2 예제
단, 버튼 눌림 효과가 나타나지 않습니다.

4. 색상은 바꿀수 없을까?
<span class="btn25">~~~</span> - 기본
공식버튼2 예제
<span class="btn25 blue">~~~</span> - 파랑(보라)
공식버튼2 예제
<span class="btn25 black">~~~</span> - 검정
공식버튼2 예제

 
5. 저건 파란색이 아니라 보라색인데?
그래서 있는게 색상 변경 버젼입니다.
파일 첨부한 btn25_2.gif의
이름을 btn25.gif로 바꿔서 올리시면 됩니다.

파일 미리보기

btn25.gif
btn25.gif

btn25_2.gif
btn25_2.gif

제목 글쓴이 날짜
배경음악과 동영상 삽입 <embed> [7] 제이지라 2002.04.26
게시판에 구글 SyntaxHighlighter 3.0.83(구문강조) 적용하기 - 본문에 코드삽입시 유용 file 으아악. 2010.10.20
이미지 삽입시 아래에 한줄 띄우고 클릭가능하게 하여 편히 입력하게 만들자~ [8] file xemall 2010.10.13
이미지 여러개 삽입시 이미지 사이에 공백 및 글 쓸 수 있도록 [1] sejin7940 2010.07.07
레이아웃 삽입 후 최근 설문조사 가져오기 ilovesyr 2010.05.18
XE최신버전에 믹시(Mixsh) 위젯(widget) 삽입하는 방법 [2] 곰이v 2010.03.21
[초보] 본문 하단에 구글 애드센스 삽입방법 [2] BigSeong 2009.10.10
본문에 삽입된 그림의 확대기능이 작동하지 않는경우(XE Official Ver2 layout) [2] file 분홍곰 2009.08.14
엄지 추천 기능 본문에 삽입 하고자 하실때 (급조) [2] file thejeon 2009.07.29
제로보드 XE나 개인 블로그에 GPS 로그(궤적)를 나타낸 구글맵 삽입하기 상오기 2009.03.21
왕초보용 xe 1.2.0 버전 사용 기본 레이아웃 좌측에 배너 삽입 방법. [7] 『june™』 2009.03.20
메인화면에 플래시 쉽게 삽입하는 방법.. [12] 청개구리00 2008.08.30
댓글 입력창에 배경 이미지 삽입하는 방법 [4] 팔공산 2008.07.11
이미지 삽입후 이미지 위에 노란색 박스 사라지게하는 법 [5] dhseo 2008.05.28
[수정 했습니다.]본문 입력없이 확장 변수로만 글작성 작성하기(그림삽입포함) [13] file 대암지기 2008.03.09
제로보드XE 외부페이지에 javascrip 삽입하기 [3] BlueGATE 2008.01.22
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] 팔공산 2007.11.27
(0.1.2) 이모티콘 삽입 후 그림 안보일 때 [5] Simulz 2007.09.02