웹마스터 팁
XE 공식 버튼2 삽입하기
2011.05.14 21:28
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>
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_2.gif
댓글 32
-
우진홈
2011.05.15 09:52
와! 멋집니다. 나중에 XE 스쿨에 XE실험실 하나 만들건데 그때 위의 소스 사용해도 될까요? 꼭 부탁드립니다... -
토끼매니아
2011.05.15 10:33
이건...xe에 포함된기본기능버튼이라... 쓰라고있는거같은데요?
쓰는방법을몰라 웹엔진님이 설명해준거구요~^^ -
웹 엔진
2011.05.15 10:54
기본으로 들어있는건 아닙니다.
소스 추가를 통해 자신의 사이트에서 사용할수 있고
XE공식사이트에는 적용되어 있습니다. -
웹 엔진
2011.05.15 10:55
위 소스는 팁 이기 때문에 사용하셔도 좋습니다만
출처는 밝혀주세요.(http://www.xpressengine.com/19751836) -
우진홈
2011.05.15 13:28
위와 같은 소스는 이미 많은 곳에서 공개 되었던 부분이지만 가능하면 학습자료를 활용할때 XE 가족분들의 글을 소개하려고 하죠.
그리고 단순히 소스를 보여주는게 아니라 어떤 원리로 작동하는지를 가능한한 설명하고자 합니다. 올려주신 글이 제가 추구하는 방법론과 잘 맞습니다. 나중에 잘 활용하도록 하겠습니다. 고맙습니다. -
ToFinder
2011.05.16 16:44
쩝 이런것들이 가능한것이 정말이지 신기하기만 하네요. 글자가 얼마까지 될려나? 절대로 많은 수의 글은 안됨~ -
웹 엔진
2011.05.25 01:24
그렇게 까지 많은 글을.... 넣으리라고 생각 안해서 ㅎㅎ... -
demun
2011.05.27 18:22
-
milaero
2011.09.14 23:29
-
으아악.
2011.09.26 11:31
-
상현작가
2011.10.04 14:51
-
Aswara
2011.10.04 20:29
-
비타민D
2011.10.11 18:13
-
쿨럭이
2011.10.15 21:31
난 왜 안되징 ㅠㅠ
-
김철155
2011.10.19 18:08
익스플로러 6 에서는 안보이네요.
-
이끼다
2011.10.23 07:56
-
코리스™
2011.10.29 03:31
-
바람의베이스
2011.10.30 11:27
-
iceman237
2011.11.08 16:26
난 전혀 안되고 있는데..~~~
-
웹 엔진
2011.12.02 02:46
<span>내용</span>
이 아니라
<span><input type="button" value="내용" /></span> 입니다.
-
불편한몸매
2011.11.08 17:02
-
왕바우
2011.11.30 20:14
오래된 팁이라서 웹엔진님께서 보실지는 모르겠습니다.
혹시나 보신다면 저의 궁금한점을 풀어 주신다면 감사하겠습니다.
버튼을 만들때 로그인 권한을 넣을수 있는지 궁굼합니다.
버튼에 새창을 뛰울려고 합니다. 로그인 한사람만 새창 내용을
볼수 있는 권한 말입니다.
로그인 하지 않았을 경우 로그인 하라는 메세지를 뛰우고 새창을 뛰우지 않게...
혹시 된다면 소스좀 부탁 할려고 합니다.
가능할까요...? 있다면 부탁하겠습니다.
-
웹 엔진
2011.12.02 02:40
버튼에서는 아래와 같이 가능하겠죠?
<!--@if($is_logged)-->
로그인 한 사람이 볼 버튼 (클릭시 로그인 전용 팝업)
<!--@else-->
로그인 안한 사람이 볼 버튼 (클릭시 권한 없음 페이지 팝업)
<!--@end-->
예제
<!--@if($is_logged)-->
<span class="btn25"><input type="submit" value="버튼" onclick="window.open('http://www.naver.com','')" /></span>
<!--@else-->
<span class="btn25"><input type="submit" value="버튼" onclick="alert('로그인 하지 않으셨습니다.\n로그인 해 주세요.')" /></span>
<!--@end-->
-
Goos
2011.12.02 01:39
아.. 안타깝게도 모바일 페이지에서까지 나타나진 않는군요
여기서 만들고 그림찍어 붙여야겠습니다 ^^; 1.4를 쓰는데다 모바일페이지엔 흰색쓰고 싶어섴ㅋ
알게되어 굉장히 이용 많이하게 될것 같은 기분이 듭니다. 고맙습니다.
-
k02092000
2011.12.12 13:04
-
RooM335
2011.12.15 16:12
또 내용
-
nadoo1004
2011.12.20 14:24
-
하늘보리30
2011.12.20 18:31
-
간지횽
2012.02.01 00:18
-
떨어진비누
2012.02.08 11:19
-
복받으세요
2012.02.26 22:43
~~~
-
그라모
2012.05.03 19:15