네이버 웹표준 uio factory 버튼이미지로 만든 게시판스킨 정보
게시판 네이버 웹표준 uio factory 버튼이미지로 만든 게시판스킨
첨부파일
본문
안녕하세요 처음으로 글을 올려 보네요 ^^
네이버 버튼이미지를 이용하여 기본 스킨 게시판의 버튼들을 바꿔 봤습니다.
적용하시는 방법은
루트의 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 클래스 중에서 마음에 드시는 디잔인으로 변경하시면 됩니다.
네이버 버튼이미지를 이용하여 기본 스킨 게시판의 버튼들을 바꿔 봤습니다.
적용하시는 방법은
루트의 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
6
댓글 전체

깔끔하네요 추천합니다 다운은 후다운요

손이 얼어서 오타가 쩌네요 감사합니다 ^^ 수정은 손이 좀 녹으면 할게요
깔끔하니 좋네요~

그누 기본게시판과 잘 어울리네요^^

추천합니다. ^^
좋습니다.

쵝오닷!!

수고하셨습니다.
