조회 수 5000 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
기본 레이아웃 스킨을 이용해서 사용자 편의에 맞게 수정합니다.
수정은 default.css 파일을 이용하여 수정합니다.
(기본적인 레이아웃 수정은 css 파일 수정만으로 변경할 수 있습니다.)

1. 본문 기본 정렬

    기본 센터 정렬입니다.
    왼쪽편에 붙이고자 하시면
default.css 파일 11번째 줄 ,

#bodyWrap { position:absolute; width: 980px; margin:0 auto; padding:0 0 0 0;}

position : absolute 로 고칩니다.

※ 기타 참고
width : 넓이
margin : 마진값
padding : 여백 (상 우 하 좌 순서, 순서는 마진값도 동일함)

2. 윗쪽 메뉴, 로고 부분의 높이 조정하기

14번째 줄,

#header { width:980px; height:60px; background:url() no-repeat right top; margin-bottom:10px; z-index:99;}

height : 120px 가 기본입니다. 알맞게 수정하세요. 저는 보시다시피 60px로 고쳤습니다.
여기서 넓이, 배경그림, 배경그림 위치, 여백 등을 수정할 수 있습니다.

※ 주의하실 점은 여기서 height 값은 윗쪽 메뉴 부분의 높이까지 포함하는 높이이므로
'로고 + 메뉴 높이' 까지 생각하셔서 수정하십시오.

※ 배경그림 역시 마찬가지입니다. 상위 메뉴 부분의 배경은 따로 처리하는 레이어가 없으므로,
#header 에서 메뉴 부분의 배경까지 처리할 수 있도록 상위 메뉴 부분의 높이까지 고려하여
배경그림을 만들어서 삽입하십시오.

※ 관리자 레이아웃 설정에서도 배경그림을 삽입할 수 있습니다.
이 때 설정한 배경그림은 가장 밑 바닥에 깔리고
css에서 설정한 배경그림이 그 위에 우선하게 됩니다.
이를 주의하여 배경을 처리해야할 것입니다.

3. 로고 위치 조정하기

15번째 줄,

#header h1 { position:absolute; top:0px; left:25px;}

top, left 값을 이용하여 수정할 수 있습니다.

4. 전체검색 및 언어 변경 부분 수정하기

4-1 언어 변경 레이어
언어 변경 레이어의 이름은 #language 입니다.
필요하신 분은 이 값을 찾아서 수정하면 됩니다.
#header 바로 아래 16번째 줄 부터입니다.
그런데 보통은 언어 변경 부분이 필요없으므로
저는 보이지 않게 설정하였습니다.

#language { position:absolute; top:18px; right:19px; z-index:100; display : none;}

display : none 만 추가하면 됩니다.
(visibility : hidden; 해도 됩니다. )

4-2. 전체 검색 폼 위치 수정하기
검색 폼의 이름은 #isSearch 입니다.
(첨에 #language 아래 24번째 줄에 있는 #it_search_form 인 줄 알고 혼동을 좀 했습니다. 저 같은 착각 하지 마시길 ^^; )

#isSearch { position:absolute; top:35px; right:15px; width:214px; text-align:right;}

저는 top: 48px 를 35px 정도로 수정했습니다.
사용자 입맛에 맞게 다른 부분을 수정하시면 됩니다.

ps. #it_search_form 은 뭔지 모르겠군요. -_-;

5. 상위 메뉴 위치 등 수정하기
현재 제로보드 사이트에서 HOME 제로보드XE 제로보드4 .. 이 부분입니다.
레이어명은 #gnb 입니다.

#gnb { position:absolute; top:60px; left:0; height:30px; overflow:hidden; white-space:nowrap; margin-bottom:10px;background:#000;}

원하시는 입맛에 맞게 위치 및 색상을 수정하면 됩니다.

#gnb li a { display:block; float:left; padding:8px 15px 0 15px; height:25px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"Arial", "Verdana", "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:11px;}

메뉴 부분의 색상이나 크기 등의 스타일시트는 이 항목에서 수정하면 됩니다.

※ 다시 주의할 점, 여기서 각각 메뉴 하나의 배경은 처리할 수 있습니다만
전체 한 줄을 가득 메우는 배경은 위에 2번에서 말했다시피 #header에서 처리하거나
관리자 설정에서 배경그림 부분에서 설정해주어야 합니다.
(방법이 아주 없지는 않겠습니다만 일반적으로 이렇습니다. 그러니 이를 주의하여 배경을 #header에서 처리하십시오.)

6. 이제 상단 레이아웃 디자인은 이렇게 수정이 가능하니 이 것으로 마치고,
나머지 회원정보 부분, 하위메뉴, 본문 스타일시트 가 남아있는데
이는 이 정도면 CSS 파일을 보면서 수정하면 될 듯 합니다.

List of Articles
번호 제목 글쓴이 날짜 조회 수 추천 수
공지 홈페이지 사용법 file 갈매빛 / 崠駐 2009.05.01 29421 0
101 문서에 기본 내용 입력해 놓기 1.. /modules/board/skins/moonhouse_board/skin.xml 안에 추가 <var name="document_default_text" type="textarea"> <title xml:lang="ko">문서의 기본 내용</t... 갈매빛 / 崠駐 2010.04.15 5203 0
100 게시물 작성시 알림 체크를 기본으로 하기 게시물 작성시 알림 체크를 하는 것이 귀찮을 때 알림 옵션을 기본으로 체크되어 있도록 하려면 modules\document document.item.php 파일의 127번 줄을 다음처럼... 갈매빛 / 崠駐 2010.04.15 5273 0
99 벌써 왔어야 하는데 ... 벌써 왔어야 하는데 오늘에서야 방문을 합니다. 일단 다 둘러보진 못하고 오늘은 방문 인사만 남깁니다. 1 해돋이 2010.04.15 3950 0
98 갈매빛 회장님 그간 ... 갈매빛 회장님 그간 잘계셨는지요 ^^ 이렇고 저렇고 한 경로를 따라 마당에 놀러 왔습니다. 틈나는대로 놀러와도 되지요 ? 뵐때까지 건강하시고요 ^^ 1 야유랑 2010.04.14 4202 0
97 꽃을 많이 좋아 하는... 꽃을 많이 좋아 하는 사람이라 출사도 같이 다니고 싶어 가입을 했었는데 수도권에서만 거의 출사가 있는것 같아 눈팅만 하다가 오랜만에 들어와 보니 로그인이 ... 혜원 2010.04.10 4282 0
96 갈회장님이라시는데요?... 갈회장님이라시는데요? 갈매빛님은 멋진 닉네임이신데 갈회장님이라고 하니까 엄청 성격이 괄괄(갈갈)한 회장님이란 느낌입니다. ^^; 오늘 자료 다운 잘 받았구요... 산과나무 2010.04.08 4057 0
95 내용값을 입력하지 않아도 글작성이 완료되게 하는 방법 modules/board/tpl/filter/insert.xml 에서 <node target="content" required="true" /> 빨간색부분 삭제하시면 감쪽같이 됩니다 갈매빛 / 崠駐 2010.04.07 5284 0
94 이미지 본문삽입시 이미지간격 띄우기 / 중앙정렬하기 수정대상 파일 : ". modules / editor / tpl / js / uploader.js" xe 1.2.6 기준으로 411~413 번째줄을 아래와 같이 수정하시면 됩니다. temp_code += "<center><... 갈매빛 / 崠駐 2010.04.07 5371 0
93 글쓰기 버튼 특정그룹에게만 노출하기 스킨에 따라 다를수도 있겠는데... zbxe\modules\board\skins\xe_board\list.html 경로를 참조하셔서 list.html 파일을 찾아 아래의 내용중 40번째줄의 내용의 앞... 갈매빛 / 崠駐 2010.04.07 10597 0
92 언어가 한국어일 때 글꼴설정이 돋움인 것을 해제하기 ZBXE에서 언어가 한국어일 때 글꼴이 돋움으로 설정된다. 한국어만 주로 사용하면 별 문제 없으나 일본어나 중국어를 사용하는 게시물이 있다면 약자가 작아지거... 갈매빛 / 崠駐 2010.04.01 6926 0
91 최근글에 공지사항을 제외시키고자할 경우 저의 경우 제로보드4에서 이전한 게시글과 새로 작성된 게시글들이 한 게시판에 있을경우 날짜가 뒤섞여버려 최근글 출력이 이상하게 되는 현상이있었습니다. 이 ... 갈매빛 / 崠駐 2010.04.01 6972 0
90 알림 옵션 기본 체크 게시물 작성시 알림 체크를 하는 것이 귀찮을 때 알림 옵션을 기본으로 체크되어 있도록 하려면 modules\document document.item.php 파일의 127번 줄을 다음처럼... 갈매빛 / 崠駐 2010.04.01 5269 0
89 내용을 입력하지 않고 글작성 하기 write_form.html에서 첫 부분 <!--%import("filter/insert.xml")--> <!--#include("header.html")--> <div class="boardWrite"> <form action="./" method="post... 갈매빛 / 崠駐 2010.04.01 5427 0
88 게시물 읽을 때 하단에 목록 보이지 않게 하기 게시판 설정이 웹진형일 경우, 한 게시물을 읽을 때 게시물 하단에 매우 긴 글 목록이 나타나게 됩니다. 이를 방지하기 위한 꽁수. (구버전에서는 목록보이기/감... 갈매빛 / 崠駐 2010.04.01 5220 0
87 최신 댓글의   표시 안나오게 하려면? widgets의 skin에 있는 list.html 에서 {htmlspecialchars(cut_str(strip_tags($val->content),20,'...'))} 를 찾아서 아래와 같이 수정합니다. {htmlspecialcha... 갈매빛 / 崠駐 2010.04.01 5918 0
86 게시판별 소스보기 방지코드 게시판마다 지정하려면 게시판 정보 설정에서 상단 내용 입력 폼에 아래 줄을 입력하면 됩니다. <body oncontextmenu="return false" onselectstart="return fal... 갈매빛 / 崠駐 2010.04.01 5298 0
» 초보 레이아웃 스킨 고치기 1 - CSS 편 기본 레이아웃 스킨을 이용해서 사용자 편의에 맞게 수정합니다. 수정은 default.css 파일을 이용하여 수정합니다. (기본적인 레이아웃 수정은 css 파일 수정만으... 갈매빛 / 崠駐 2010.03.31 5000 0
84 좌측 메뉴 하단에 애드센스를 탑재해 보자! 1. 구글 애드센스 코드를 받는다. 이때 광고단위 크기는 가로 200픽셀 미만으로 할 것. 지금 제로보드XE에 기본탑재된 레이아웃의 좌측 메뉴 사이즈가 딱 200픽셀... 갈매빛 / 崠駐 2010.03.31 4564 0
83 안광열 입니다...회원... 안광열 입니다...회원가입하고 문안인사드립니다..ㅎㅎㅎㅎ 자주 들려야 할텐데..... 파도 2010.03.08 4247 0
82 안녕하세요~   여기... 안녕하세요~ 여기에 이렇게 글을 써도 되는 건지.. 잘 모르겠지만 야생화 클럽에서 중책을 맡고 계신 것 같은 분을 찾다가 질문/ 답변 게시판에서 답변 달아 주시... 1 이영옥 2010.03.07 4301 0
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 12 Next
/ 12