베이스 캠프 스킨확장하는 방법베이스 캠프 스킨확장하는 방법

Posted at 2009. 6. 19. 08:11 | Posted in Blog

기본 스킨인 베이스켐프 스킨의 가로 사이즈를 확장하는 방법을 소개합니다.

개인적으로 CSS쪽은 초보인지라 적용이 어려웠네요 혹시 처음접해보시는 분들 계시면 참조하세요.

 

작업순서

각항목의 width 사이즈를 수정하고 이미지가 적용되는 부분은 첨부에 같이 넣었으니 업로드하여 적용하면 됩니다.

적당하다고 하는수치는 순전히 개인적으로 봤을때의 수치임으로 변경하면서 자신에게 맞는 위치를 잡으시면 되겠습니다.

 

Style.css를 수정합니다.

 

 

 

 

컨테이너 위치조정하기

-사이드바가 들어가는 위치를 먼저 잡아줍니다.


#container         { width:997px; margin:0 auto; background:url(images/bg_body.gif) repeat-y;}

997이 적당함.

bg_body.gif 이미지로 변경하여야 함.

 

 

 

 

헤더 넓이 조정

  *헤더와 매뉴는 컨테이너의 끝단과 마춰주는것이 중요합니다.

 #header   { padding:0 25px; width:948px; overflow:hidden; background:url(images/bg_header.gif)


 948이 적당함

bg_header.gif 이미지를 변경하여야함.

 

 

 

mune 이미지 변경

#menu .inner { height:43px; background:url(images/bg_menu.gif) no-repeat;}


bg_menu.gif  이미지를 변경하여야 함.

 


본문(content) 넓이 조정

 #content  { width:730px; float:left; overflow:hidden;}


730이 적당함.

 


블로그 수정메뉴(article) 넓이조정

.article        { width:700px; overflow:hidden; padding-bottom:30px;}


기본은 500으로 되어있으며 700이 적당해 보임.

변경후.

 

 

 

헤더와 메뉴 맨아래(footer:뚜벅이??) 이미지 변경적용.

#footer   { padding:0 25px; background:url(images/bg_footer.gif) left bottom; clear:both;}

bg_footer.gif 이미지를 변경하여야 함.

 

 

500PX 의 이미지는 아래 아래그림파일을 업로드 하여 적용하면 됩니다.

 

 

 

 

압축을 푼후에 업로드하여 적용하시면 됩니다.

 

bg_body.gif

bg_header.gif

bg_menu.gif

bg_footer.gif

 


아래 업로드 버튼을 눌러 업로드 하세요.


 

글쓰기 area 조정

 

댓글내용입력란을 넓게 조정합니다.

 

댓글

.commentWrite textarea  { width:720px; height:150px; overflow:visible;}

방명록

.guestWrite textarea  { width:720px; height:150px; overflow:visible;}

 

'Blog' 카테고리의 다른 글

BBCode 작업중..(보류중)  (0) 2009.08.13
타이틀을 물결무늬 적용해보자  (0) 2009.08.10
태그구름 위젯 추가하였습니다.  (0) 2009.08.07
웹컬러의 이해  (0) 2009.07.23
Microsoft weft를 이용한 웹폰트 만들기  (1) 2009.07.17
//