탈

네이버 웹표준 uio factory 버튼이미지로 만든 게시판스킨

· 2012-02-09 (목) 11:27:05 · 8382 · 8
bnt.png
btn_pack.gif
안녕하세요 처음으로 글을 올려 보네요 ^^
네이버 버튼이미지를 이용하여 기본 스킨 게시판의 버튼들을 바꿔 봤습니다.

적용하시는 방법은
루트의 style.css 파일을 여셔서
/* UI Object */
.btn_pack,
.btn_pack *{display:inline-block;overflow:visible;position:relative;margin:0;padding:0;border:0;background:url(img/btn_pack.gif) no-repeat;font-size:12px;font-family:Tahoma, Sans-serif;color:#333;text-decoration:none !important;vertical-align:top;white-space:nowrap}
.btn_pack{margin-right:4px}
.btn_pack *{left:4px;cursor:pointer;_cursor:hand}
.btn_pack.medium,
.btn_pack.medium *{height:24px;line-height:24px}
.btn_pack.large,
.btn_pack.large *{height:30px;line-height:30px}
.btn_pack.xlarge,
.btn_pack.xlarge *{height:36px;line-height:36px}
.btn_pack.small,
.btn_pack.small *{height:19px;line-height:19px}
.btn_pack.medium{background-position:left 0}
.btn_pack.large{background-position:left -30px}
.btn_pack.xlarge{background-position:left -65px}
.btn_pack.small{background-position:left -106px}
.btn_pack.medium *{padding:0 10px 0 6px;background-position:right top;font-size:12px}
.btn_pack.large *{padding:0 10px 0 6px;background-position:right -30px;font-size:16px}
.btn_pack.xlarge *{padding:0 10px 0 6px;background-position:right -65px;font-size:20px}
.btn_pack.small *{padding:0 6px 0 2px;background-position:right -106px;font-size:11px}
.btn_pack *:hover,
.btn_pack *:active,
.btn_pack *:focus{color:#690}
.btn_pack.strong *{font-weight:bold !important}
.btn_pack.icon *{padding-left:20px}
.btn_pack.small.icon *{padding-left:16px}
.btn_pack.icon span{width:20px;margin-right:-20px;padding:0 !important}
.btn_pack.medium .check{background-position:4px -150px}
.btn_pack.large .check{background-position:4px -146px}
.btn_pack.xlarge .check{background-position:5px -144px}
.btn_pack.small .check{background-position:3px -153px}
.btn_pack.medium .add{background-position:-16px -150px}
.btn_pack.large .add{background-position:-14px -146px}
.btn_pack.xlarge .add{background-position:-14px -144px}
.btn_pack.small .add{background-position:-18px -153px}
.btn_pack.medium .delete{background-position:-34px -150px}
.btn_pack.large .delete{background-position:-34px -146px}
.btn_pack.xlarge .delete{background-position:-34px -144px}
.btn_pack.small .delete{background-position:-37px -153px}
.btn_pack.medium .calendar{background-position:-56px -150px}
.btn_pack.large .calendar{background-position:-56px -146px}
.btn_pack.xlarge .calendar{background-position:-56px -144px}
.btn_pack.small .calendar{background-position:-59px -153px}
.btn_pack.medium .refresh{background-position:-76px -150px}
.btn_pack.large .refresh{background-position:-76px -146px}
.btn_pack.xlarge .refresh{background-position:-76px -144px}
.btn_pack.small .refresh{background-position:-79px -153px}
.btn_pack.medium .download{background-position:-96px -151px}
.btn_pack.large .download{background-position:-96px -147px}
.btn_pack.xlarge .download{background-position:-96px -145px}
.btn_pack.small .download{background-position:-99px -154px}
/* //UI Object */

위의 css를 붙여 넣기를 하신 후 첨부파일의 gif 이미지를 루트 img 폴더에 압축을 푸셔서 넣어 주시면 됩니다 ^^

text버튼이기 때문에 class명 변경만으로도 자유롭게 버튼의 이미지를 및 이름을 변경 할 수 있어서 유지보수에 있어서 많은 이점이 있으며 속도또한 약간은 빨라 질 것으로 예약합니다 ^^

기존 기본스킨 소스에서 변경된 부분은 기존 이미지 버튼에서 텍스트 버튼으로 교체하는 것 말고는 기본소스에서 변경된 부분이 하나도 없으니 이것을 바탕으로 다른 예쁘게 디자인 하셔서 다른 스킨을 만드셔도 좋을 것 같습니다 감사합니다 그리고 마지막으로 버튼의 기본 클래스는 모두 btn_pack medium 되어 있으니 위의 css 클래스 중에서 마음에 드시는 디잔인으로 변경하시면 됩니다.

첨부파일

bnt.png (14.6 KB)
0회 2012-02-09 11:27
btn_pack.gif (3.5 KB)
0회 2012-02-09 11:27
basic.zip (40.9 KB) 243회 2012-02-09 11:27
|

댓글 8개

2012-02-09 (목) 11:29:39
깔끔하네요 추천합니다 다운은 후다운요
2012-02-09 (목) 11:33:58
손이 얼어서 오타가 쩌네요 감사합니다 ^^ 수정은 손이 좀 녹으면 할게요
2012-02-09 (목) 15:35:40
깔끔하니 좋네요~
그누 기본게시판과 잘 어울리네요^^
추천합니다. ^^
2012-02-20 (월) 10:32:34
좋습니다.
쵝오닷!!
수고하셨습니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누4 스킨

5,847건

스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.

+
분류 제목 글쓴이 날짜 조회
최신글 12-02-09 조회 6,581
게시판 12-02-09 조회 5,010
외부로그인 12-02-09 조회 6,684
외부로그인 12-02-09 조회 7,214
게시판 12-02-09 조회 8,383
게시판 12-02-08 조회 7,376
회원통합스킨 12-02-08 조회 1.7만
게시판 12-02-07 조회 4,090
외부로그인 12-02-07 조회 6,622