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

그누4 스킨

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

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

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

첨부파일

basic.zip (40.9K) 243회 다운로드 2012-02-09 11:27:05

본문

안녕하세요 처음으로 글을 올려 보네요 ^^
네이버 버튼이미지를 이용하여 기본 스킨 게시판의 버튼들을 바꿔 봤습니다.

적용하시는 방법은
루트의 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 클래스 중에서 마음에 드시는 디잔인으로 변경하시면 됩니다.
추천
6

댓글 전체

전체 2 |RSS
그누4 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT