하도 오래전에 만들어 본것이라서 기억이 가물가물 합니다. 우선 달력 위젯을 삽입하는 방법은 제가 처음 이싸이트를 만들고, 제로보드 공식 싸이트에 올린 글을 참조하시면 됩니다. http://www.xpressengine.com으로 들어가셔서 XE 레이아웃 메뉴를 클릭하시면 제로보드에 사용할수 있는 각종 레이아웃이 나오는데 이중에서 106번이 제가 올린것입니다.
그리고 "좋은 소리 만들기"와 메뉴 간격을 좀더 넓히기 위해서는 CSS 파일을 변경하면 되는데 아래를 참조하시기 바랍니다.
/* Site Layout - Body Wrap */ body { background:#FFFFFF url(../images/default/top_bg.png) repeat-x left top; } #bodyWrap { width:980px; margin:6em auto 0 auto; }
/* Site Layout - Header */ #header { position:relative; width:980px; height:60px; background:url(../images/default/bgHeader.gif) no-repeat right top; margin-bottom:5px; z-index:99;} #header .weather { position:absolute; top:-40px; left:440px; width:150px; height:22px; } #header h1 { margin:0; padding:0; position:absolute; top:-51px; left:0px;} #language { position:absolute; top:-25px; right:20px; z-index:100;} #language strong { color:#000000; font:.75em Tahoma; margin-right:3px;} #language a img { vertical-align:-5px;} #language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #eaeaea; background:#ffff33;} #language ul li { list-style:none; } #language ul li a { display:block; width:60px; padding:3px 8px; font:9px Tahoma; color:#000000; text-decoration:none;} #language ul li a:hover { background:#f4f4f4;}
하도 오래전에 만들어 본것이라서 기억이 가물가물 합니다.
우선 달력 위젯을 삽입하는 방법은 제가 처음 이싸이트를 만들고, 제로보드 공식 싸이트에 올린 글을 참조하시면 됩니다.
http://www.xpressengine.com으로 들어가셔서 XE 레이아웃 메뉴를 클릭하시면 제로보드에 사용할수 있는 각종 레이아웃이 나오는데
이중에서 106번이 제가 올린것입니다.
그리고 "좋은 소리 만들기"와 메뉴 간격을 좀더 넓히기 위해서는 CSS 파일을 변경하면 되는데 아래를 참조하시기 바랍니다.
@charset "utf-8";
/*
NSH (http://www.nsh.kr/)
Tindrum 080612-080623
*/
/* Default Skin - Start */
#selectLang { margin:0; padding:0; }
#gnb { margin:0; padding:0; }
#footer { margin:0; padding:0; }
#copyright { margin:0; padding:0; }
a { selector-dummy : expression(this.hideFocus=true);}
/* Site Layout - Body Wrap */
body { background:#FFFFFF url(../images/default/top_bg.png) repeat-x left top; }
#bodyWrap { width:980px; margin:6em auto 0 auto; }
/* Site Layout - Header */
#header { position:relative; width:980px; height:60px; background:url(../images/default/bgHeader.gif) no-repeat right top; margin-bottom:5px; z-index:99;}
#header .weather { position:absolute; top:-40px; left:440px; width:150px; height:22px; }
#header h1 { margin:0; padding:0; position:absolute; top:-51px; left:0px;}
#language { position:absolute; top:-25px; right:20px; z-index:100;}
#language strong { color:#000000; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #eaeaea; background:#ffff33;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:60px; padding:3px 8px; font:9px Tahoma; color:#000000; text-decoration:none;}
#language ul li a:hover { background:#f4f4f4;}
#it_search_form { position:absolute; top:8px; right:15px;}
#it_search_form .input { border:1px solid #bc4032; height:17px; width:120px; color:#888888; font-size:.9em;}
#it_search_form .submit_button { width:1px; height:1px; visibility:hidden; }
#gnb { position:absolute; text-align:center; top:-1px; left:75px; height:34px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { font-weight:bold; font-size:1.1em; float:left; list-style:none; left center; position:relative; white-space:nowrap;}
#gnb li a { width:100px; display:block; float:left; padding:12px 0px 0px 0px; height:34px; color:#363636; white-space:nowrap; text-decoration:none; background:url(../images/default/TopPbgGnbBack.gif) no-repeat center top;}
#gnb li a:hover, {color:#000000;}
#gnb li a:focus { color:#eaeaea;}
#gnb li.on a { width:100px; font-weight:bold; padding:12px 0px 0 0px; height:34px; color:#ffffff; background:url(../images/default/TopPbgGnbOn.gif) no-repeat center top;}
.subMenu{ position:absolute; top:43px; left:100px; overflow:hidden; white-space:nowrap;}
.lnb1{ float:left; font-weight:bold; color:#ffffff; padding-left:8px; left:-8px; padding-right:8px; text-decoration:none; background:url(../images/default/bgGnbVr.gif) no-repeat left center; position:relative; white-space:nowrap; }
.lnb1:hover,focus {color:#ffff00;}
.lnb1.on { font-weight:bold; color:#ffff00;}
#isSearch { position:absolute; top:-50px; right:10px; width:214px; text-align:right; z-index:101; }
#isSearch .searchOrder { display:none; }
#isSearch .checked { position:absolute; left:0; top:0; text-align:left; display:block; padding:5px 0 0 5px; width:64px; height:14px; background:url(../images/default/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#000000; line-height:normal; }
*:first-child+html #isSearch .checked { top:1px; }
#isSearch ul { display:none; position:absolute; left:0; top:18px; padding:2px 0 3px 0; text-align:left; border:1px solid #00ff00; background:#ffff00; }
#isSearch ul li { width:67px; height:18px; list-style:none; }
#isSearch ul li input { display:none;}
#isSearch ul li label { display:block; padding:4px 0 0 4px; width:63px; height:15px; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#0000cc; }
#isSearch ul li label.on { background:#ffff66; }
#isSearch ul li label:hover,
#isSearch ul li label:focus { background:#ffff66; }
#isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 1px 3px; width:94px; height:13px; color:#000000; border:1px solid #00ff00; background-color:#ffffcc; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #00ff00; background-color:#ffffcc; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px; }
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px; }
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px; }
/* 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;}
/* Site Layout - Footer start*/
#footer { text-align:center; height:35px; clear:both; padding:20px 0px 0px 0px; background:url(../images/default/bottomPbg1.gif) no-repeat center;}
#footer li { display:inline; padding:0 .6em 0 1em; font-weight:bold; background:url(../images/default/vrType1.gif) no-repeat left center;}
#footer li.first-child { background:none;}
#footer li a { text-decoration:none; color:#0000ff; font:.9em ;}
#footer li a:hover, {color:#ff0000; text-decoration:no; }
#footer li address { display:inline; }
#copyright {width:980px; color:#0000ff; text-align:center;height:25px; padding:0px 0px 10px 0px; clear:both;}
/* Site Layout - Footer end*/
/* Default Skin - End */
위의 내용이 CSS파일 전체 내용인데 여기서 다음의 코드를 수정하시면 됩니다.
#bodyWrap { width:980px; margin:6em auto 0 auto; }
위 코드에서 6em 값을 변경해 보세요. 그러면 간격이 달라질겁니다.