레이아웃 스킨
| 라이센스 | GPL2 |
|---|---|
| 기타 라이센스 | |
| 적용 버전 | 정식버전(1.0이후) |
약 3개월전에 TeRyBoy님의 스킨에다 소마세월님의 롤오버 메뉴 팁을 제가 약간 변형하여 작성한 레이아웃으로 홈페이지 운영을 시작
하였습니다. 그러다가 Uyano님이 Blugate님의 팁을 이용한 롤오버 메뉴로 동작하는 레이아웃을 배포하였는데 저는 이것이 무척 마음에
들어서 포토샵 작업을 하여 스킨을 만들고 거기에 Bluegate-Uyano팁을 적용하여 레이아웃 스킨을 만들어 보았습니다. 레이아웃을 만들어
적용을 해보니까 인터넷 익스플로워나 파이어폭스에서는 롤오버 메뉴가 잘 동작을 하였는데 불행하게도 사파리나 오페라 같은
브라우저에서는 동작을 잘 하지 않았습니다. 미천한 실력으로 사파리나 오페라에서도 동작을 잘하도록 코드를 수정하고 있었는데 마침
제로보드 1.0.4 선행버전을 배포하였다는 Zero님의 메세지가 있었습니다. 그래서 1.0.4버전을 얼른 다운로드 받아 제 서버에 업로드 시켰
습니다. 처음에는 문제가 없는것 처럼 보였습니다. 그런데 로그인을 하려고 하니까 로그인이 안되는 것이었습니다. 당황스러웠습니다.
그래서 알 FTP프로그램을 이용하여 서버내의 프로그램을 이것저것 만지기 시작했습니다. 점점 제로보드가 이상해 지기 시작했습니다.
결국 3개월간 넣었던 데이터를 모조리 지우고 제로보드를 다시 깔수밖에 없었습니다. 당황이 황당으로 바뀌는 순간이었습니다.
처음에는 Bluegate-Uyano팁을 이용한 레이아웃을 설치할까 생각했었지만 아무래도 자신이 없어 소마세월님의 팁을 이용한 레이아웃을
다시 작성하기 시작했습니다. 3일만에 레이아웃을 만들어서 정상작동 시킨후 정보를 공유하는 차원에서 배포를 합니다.
레이아웃 스킨은 다음 그림과 같으며 제 홈페이지를 방문하시면 작동 모습을 직접 보실수 있습니다.
설치하는 방법은 첨부한 nsh.zip 파일의 압축을 풀면 xe_jso와 xe_jso_sub의 두개의 폴더가 나오는데 이두개의 폴더를 서버의
zbxe/layouts/ 폴더안에 업로드 시켜주면 됩니다. 참고로 제가 만든 이 레이아웃의 폭은 980픽셀인데, xe_jso는 body부분의 폭이
200픽셀, 570픽셀, 200픽셀로 3등분되어 있으며, xe_jso_sub는 770픽셀, 200픽셀로 2등분 되어 있습니다. 따라서 xe_jso는 초기화면에
사용하기 위한 레이아웃이고, xe_jso_sub는 나머지 다른 화면에 적용하면 됩니다. 위젯을 넣는 방법은 자신의 홈페이지에 관리자로
로그인하여 레이아웃 설정/편집에서 편집을 클릭하면 다음과 같은 화면이 나옵니다. xe_jso의 경우 맨좌측 로그인 밑에 위젯을
넣으려면 위젯 프로그램을 동작시켜 코드를 생성하여 그코드를 <!--좌측 로그인 하단 삽입코드 시작 --> 이라고 쓰여진곳 밑에
복사하여 넣으면 됩니다.
Body의 중앙부분은 관리자로 로그인하여 페이지 수정 버튼을 눌러 주므로서 화면상에서 직접 수정이 가능하고, Body의 우측부분은
<!-- 우측 삽입코드 시작 --> 이라고 써있는 곳의 밑에 생성된 위젯코드를 삽입시켜 주면 됩니다. 잡소리 너무 많이 한것 같습니다.
그런데 한마디만 더해야 겠네요. 맨처음 말했던 Bluegate-Uyano 팁을 이용한 레이아웃을 제 홈페이지의 제로보드 메뉴에 올려 놓았습니다.
소마세월 팁보다 Bluegate-Uyano 팁을 선호하는 분들께서는 제 홈페이지에서 다운로드 받아 사용하시기 바랍니다. 익스플로워나
파이어폭스에서는 별 문제가 없을것입니다.
올려놓은 소스내의 이미지 폴더를 보시면 제가 포토샵 작업을 한 원형의 psd 파일이 있습니다. 이것을 이용해서 레이아웃을
좀 바꾸시면 될것 같습니다. 그리고 본문을 쓰다가 제가 한가지 빼먹은 것이 있는데 혹시 맨 아래 메뉴의 양이 많아서 메뉴의
글자가 배경을 넘어가는 분은 CSS 파일을 에디터로 열어서
#footer { text-align:center; height:35px; clear:both; padding:20px 0px 0px 0px; background:url(../images/default/bottomPbg1.gif) no-repeat center;} 라고
쓰여진 곳에서 bottomPbg1.gif 를 bottomPbg2.gif 로 바꿔주시면 배경이 넓어집니다.
저도 업버젼 하면서 그런 실수를 했는데...
자세히 보면 알 FTP프로그램~ 이게 간혹 정상적인 Upload가 안되는 것 같습니다...
이것 때문에 자료까지 날려 버릴뻔 했습니다..ㅠㅠ
야 올려주신거 너무 너무 잘 사용중입니다. 감사드려요..
그런데 질문이 몇개 있습니다.
1. 메뉴뒤의 색상을 바꿀려면 어떻게 해야하는지?
2. 2단메뉴가 무조건 젤 앞부터 나오는데....1단 아래에 중간으로 해서 sort되게는 안되는지...
3. sub 레이아웃을 180 + 700 으로 하고 싶은데...이런건 어디서 수정해야 하죠?
넘 좋은 레이아웃인데 몇개 제가 원하는걸 하고 싶은데...잘몰라서요...
답변부탁드립니다.
Tindrum 입니다. 질문하신 내용을 제가 잘 이해 하지 못하겠어서 제 나름대로 답변을 드립니다. 현문우답이지요.
1. css\default.css 파일을 에디터로 열고 body { background:#FFFFFF url(../images/default/top_bg.png) repeat-x left top; }에서 색상값을 바꿔보세요. top_bg.png 파일은 화면 맨위의 하늘색 배경인데 images\default폴더내의 top_bg.png 파일을 새로 만든 파일로 바꾸면 됩니다.
2. 제 홈페이지에 가셔서 (http://www.nsh.kr) 제로보드 메뉴내의 bluegate-uyano 스킨을 다운로드 받으세요. 이것은 서브메뉴가
주메뉴를 따라다니는 코드인데 단점은 익스플로워와 파이어폭스와 같은 대표 브라우저에서는 잘 동작하지만 사파리와 같은
기타 브라우저에서는 동작을 잘 안합니다.
3. Sub 레이아웃을 180+700으로 바꾸시면 전체 레이아웃의 폭이 880밖에 안됩니다. 제가 생각하기에는 너무 좁은것 같네요.
어차피 제가 배포한 스킨의 폭이 980이니까 180 + 800인 경우를 생각해 보도록 하겠습니다. xe_jso의 default.css 파일을 에디터로
열면 다음과 같은 코드를 볼수 있습니다.
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:10px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px outset #00ff00;}
/* Site Layout - Column Left */
#columnLeft { position:relative; width:200px; float:left; margin-right:5px; border:1px solid #8b8989;}
#columnLeft .mask { width:200px; height:5px; background:#ffffff; display:block; clear:both;}
/* Site Layout - Column Right */
#columnRight { width:570px; float:left; overflow:hidden;}
#visualArea { width:570px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}
#mainright{position:relative; float:right; margin-top:0px; width:200px; background:#ffffff; border:1px solid #8b8989;}
위 코드는 레이아웃을 200 + 570 +200 (980중에서 10은 여백) 으로 나누는 것입니다. 180 + 800으로 하기 위해서는 #columnLeft 의
width값을 200px에서 180px으로 바꿉니다. 그다음 #colummnRight 의 width값을 570px에서 800px로 바꾸고, #mainright 한줄을 모두
지우면 됩니다.
좋은 작품 감사합니다. 많은 도움이 되었습니다.
그런데 이 레이아웃을 설정한 이후에 게시판이 끝까지 나오지 않고, 2/3정도에서 짧게 나오는 것을 보게 됩니다.
어떻게 해결할 수 있을까요? 깊은 배려심 부탁드립니다.
제메일은 nsh8048@paran.com 입니다. 감사합니다.






=====
아 ~ 올리시는 중이셨군요