묻고답하기
위젯 임의로 다는법 없을까요 ?
2011.02.28 10:10
저부분에다가 위젯을 달고싶은데
레이아웃설정에 따로 그런부분이 있는게 아니라서요 ...
애드온같은거로 가능할까요 ?
혹시몰라서
css하고 html 올려드려요 부탁드립니다.
css:
@charset "utf-8";body{font:12px Gulim,Arial}button{cursor:pointer}p{margin:0;padding:0;line-height:150%}
fieldset,img{border:0}caption,th{text-align:left}hr{display:none}.blank{display:block;overflow:hidden;clear:both;width:0;height:0;margin:0;padding:0;border:0;background:none;font-size:0;line-height:0}
.none{display:block;visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;z-index:-1;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0}
.skipTo{display:block;height:0;overflow:hidden;text-align:center}.skipTo:active,.skipTo:hover,.skipTo:focus{height:auto;padding:5px}
.mpReset,.mpReset *{margin:0;padding:0;list-style:none;border:0;background:none;font-style:normal;font-family:Gulim,Arial,Tahoma}
#wrap,#header,#container,#content,#column .extension .section,#footer{position:relative;height:100%}
#wrap:after,#header:after,#container:after,#content:after,#column .extension .section:after,#footer:after{display:block;clear:both;content:""}
@charset "utf-8";body{background:#e3e3e3}#wrap{width:1000px;margin:0 auto 50px;background:url(../img/wrap.png) repeat-y left top}
#header{height:220px;background:url(../img/header.png) no-repeat left -200px;z-index:30}
#header h1{position:absolute;left:60px;top:95px}#header .layer{position:absolute;top:95px;right:70px}
#header .layer a{color:#50988f;text-decoration:none}#header .layer a:hover,#header .layer a:focus{color:#0075c0}
#header .search{display:inline;float:left;width:155px;height:39px;margin:3px 20px 0;background:url(../img/header.png) no-repeat -500px top}
#header .search .inputText{display:inline;float:right;margin:13px 7px 0 5px;width:105px;font:12px Arial,Gulim;color:#444}
#header .search .submit{float:left;width:37px;height:39px;font-size:0;line-height:0;text-indent:-200px;overflow:hidden;cursor:pointer}
#header .rss{display:inline;float:left;margin:0 10px}#header .rss a{display:block;width:auto!important;width:0;height:44px;background:url(../img/header.png) no-repeat}
#header .rss a:hover{background-position:left -44px}#header .rss a span{display:block;padding:14px 0 0 50px;font:11px Arial}
#header .login a{background-position:-150px top}#header .login a:hover{background-position:-150px -44px}
#header .profile a{background-position:-300px top}#header .profile a:hover{background-position:-300px -44px}
#gnb{position:absolute;left:28px;bottom:0;z-index:90;width:944px;height:52px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;font-size:0;line-height:0}
#gnb a{color:#50988f;text-decoration:none}#gnb a span{font:12px Arial,Gulim,Tahoma}
#gnb .ul1{padding:0 20px}#gnb .li1{float:left;position:relative;padding:0 10px}
#gnb .a1{display:block;overflow:hidden;padding:0 0 3px}#gnb .a1:hover,#gnb .a1:focus,#gnb .on1 .a1{padding:0;border-bottom:3px solid #95c0d5}
#gnb .a1 span{display:block;padding:20px 20px 16px}#gnb .ul2{display:none;position:absolute;left:0;top:52px!important;top:53px;border-bottom:1px solid #ccc}
#gnb .ul2 li{position:relative;border:1px solid #ccc;border-bottom:0}#gnb .ul2 a{display:block;width:210px;height:34px;overflow:hidden;background-color:#fff;opacity:.9;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90)}
#gnb .ul2 a:hover,#gnb .ul2 a:focus{background-color:#f2f2f2}#gnb .ul2 a span{display:block;padding:12px 0 0 15px}
#gnb .sub2 .a2,#gnb .sub3 .a3{background:#fff url(../img/sub.gif) no-repeat 200px center}
#gnb .on2 .a2,#gnb .on3 .a3,#gnb .on4 .a4{border-bottom:2px solid #95c0d5}
#gnb .ul2 ul{display:none;position:absolute;left:210px;top:-1px!important;top:0;border-bottom:1px solid #ccc}
#container{padding:28px;background:url(../img/container.gif) repeat-y 680px top}
#column{float:right;width:250px;padding:0 12px}#column a{color:#50988f;text-decoration:none}
#column a:hover,#column a:focus{color:#0075c0;text-decoration:underline}
#column .extension h3.title{margin:0;padding:0;color:#555;font:12px Arial;text-transform:uppercase}
#column .extension h3.title a{color:#555}#column .extension div.section{margin:10px 0 40px;font:11px Arial;color:#555}
#content{float:left;width:600px;padding:0 25px}#container.ec{background-position:320px top}
#container.ec #column{float:left}#container.c{background:none}#container.c #content{display:block;float:none;width:auto}
#container.c #column{display:none}#footer{height:90px;background:url(../img/header.png) left -110px}
#footer .footer{padding:20px 50px}#footer *{font:11px Arial}#footer a{color:#50988f;text-decoration:none}
#footer a:hover,#footer a:focus{color:#0075c0;text-decoration:underline}
#footer .sta{display:inline;vertical-align:middle}#footer .sta li{display:inline;background:url(../img/sta.gif) no-repeat left center;padding:0 10px}
#footer .sta li:first-child{background:none}#footer .copyright{display:inline;margin:0 20px 0 0;color:#0075c0}
#footer .copyright .c{display:inline-block;width:21px;height:21px;margin:0 5px;overflow:hidden;background:url(../img/header.png) no-repeat right top;text-indent:-300px;vertical-align:middle}
#footer .copyright .powered{position:absolute;bottom:-20px;right:20px;font-size:10px}
#footer .copyright .powered *{font-size:10px}.loginWindow{display:none;position:fixed;left:0;top:0;_position:absolute;width:100%;height:100%;z-index:100}
.loginWindow.open{display:block}.loginWindow .modalWindow{display:block;position:fixed;border:0;left:0;top:0;_position:absolute;width:100%;height:100%;background:#000;opacity:.3;filter:alpha(opacity:30)}
.loginWindow .loginLayer{position:absolute;width:289px;top:120px;left:50%;padding:30px;border:2px solid #737373;margin:0 0 0 -175px;background:#fff}
.loginWindow .loginLayer form{display:none;*zoom:1;margin:0 0 29px}.loginWindow .loginLayer form:after{content:"";display:block;clear:both}
.loginWindow .loginLayer form legend{position:absolute;width:0;height:0;overflow:hidden;font-size:0;line-height:0;visibility:hidden}
.loginWindow .loginLayer fieldset{border:0;margin:0;padding:0}.loginWindow .loginLayer.loginTypeA form.typeA,.loginWindow .loginLayer.loginTypeB form.typeB{display:block}
.loginWindow .loginLayer dl{margin:0;padding:0 0 1px}.loginWindow .loginLayer dt{font-size:12px;font-weight:700;color:#868d95;margin:0 0 2px}
.loginWindow .loginLayer dd{margin:0 0 21px}.loginWindow .loginLayer .inputText{width:269px;height:31px;padding:6px 9px 0;border:1px solid #ddd;font:20px Tahoma;color:#333}
.loginWindow .loginLayer .inputText:focus{background-color:#fbfbfb}.loginWindow .loginLayer .inputCheck{margin:0 3px 0 0;width:13px;height:13px;vertical-align:middle}
.loginWindow .loginLayer.loginTypeA .inputText{background-image:url(../img/bgLoginText.png);background-repeat:no-repeat;background-position:right top}
.loginWindow .loginLayer.loginTypeB .inputText{background-image:url(../img/bgOpenidText.png);background-repeat:no-repeat;background-position:right top;padding:6px 9px 0 35px;width:243px}
.loginWindow .loginLayer .keep{margin:0;float:left;font-size:11px;line-height:normal;white-space:nowrap}
.loginWindow .loginLayer .keep label{color:#555}.loginWindow .loginLayer .loginButton,.loginWindow .loginLayer .loginButton input{position:relative;border:0;color:#fff;font-size:12px;font-weight:700;display:inline-block;height:36px;line-height:36px;background-color:transparent;background-image:url(../img/buttonLoginAction.png);background-repeat:no-repeat;overflow:visible}
.loginWindow .loginLayer .loginButton{float:right;background-position:0 0;right:11px}
.loginWindow .loginLayer .loginButton input{left:11px;background-position:right 0;padding:0 30px 0 45px;cursor:pointer}
.loginWindow .loginLayer .help{margin:0 -30px -30px -30px;padding:14px 0;list-style:none;text-align:center;background:#fafafa;border-top:1px solid #f2f2f2}
.loginWindow .loginLayer .help li{display:inline;font-size:11px;line-height:11px;padding:0 0 0 5px}
.loginWindow .loginLayer .help li.join{font-weight:700}.loginWindow .loginLayer .help li.find{border-left:1px solid #b3b3b3}
.loginWindow .loginLayer .help li.typeA,.loginWindow .loginLayer .help li.typeB{display:none;border-left:1px solid #b3b3b3}
.loginWindow .loginLayer.loginTypeA .help li.typeA,.loginWindow .loginLayer.loginTypeB .help li.typeB{display:inline}
.loginWindow .loginLayer .help li a{text-decoration:none;color:#555}.loginWindow .loginLayer .help li a:hover,.loginWindow .loginLayer .help li a:active,.loginWindow .loginLayer .help li a:focus{text-decoration:underline}
.loginWindow .loginLayer .close{position:absolute;cursor:pointer;border:0;padding:0;top:0;right:0;width:27px;height:27px;background:transparent url(../img/buttonCloseX.gif) no-repeat center center}
.loginWindow .loginLayer .close span{position:absolute;font-size:0;line-height:0;width:0;height:.;overflow:hidden;visibility:hidden}
layout.html:
<!--%import("js/js.min.js")-->
<!--%import("css/default.css")-->
{@
$layout_info->name = ($layout_info->name)? $layout_info->name : $layout_info->layout_title;
$layout_info->url = ($layout_info->url)? $layout_info->url : "./";
/**
* 위젯태그가 모두 없거나 칼럼 너비가 없으면 칼럼을 보이지 않는다.
**/
$layout_info->column = ( $layout_info->width == 0 || $layout_info->widget_1 || $layout_info->widget_2 || $layout_info->widget_3)? $layout_info->column : "c";
}
<!--@if($layout_info->width)-->
<style type="text/css">
<!--
#column { width:{$layout_info->width}px; }
#content { width:{$layout_info->width *-1 + 250 + 600}px; }
#container { background-position:{$layout_info->width *-1 + 250 + 680}px top; }
#container.ec { background-position:{$layout_info->width - 250 + 620}px top; }
-->
</style>
<!--@end-->
<div id="wrap" class="Wrapper {$layout_info->colorset}">
<a href="#content" class="skipTo">Skip to content</a>
<div id="header" class="mpReset">
<h1>
<a href="{$layout_info->url}">
<!--@if($layout_info->logo)-->
<img src="{$layout_info->logo}" alt="{$layout_info->name}" class="iePngFix" />
<!--@else-->
<img src="img/logo.png" alt="{$layout_info->name}" class="iePngFix" />
<!--@end-->
</a>
</h1>
<div id="gnb">
<ul class="ul1">
<!--@foreach($gnb->list as $val)--><!--@if($val["link"])-->
<li class="li1<!--@if($val['selected'])-->{@$selected=$val} on1<!--@end-->">
<a href="{$val['href']}" class="a1"<!--@if($val["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<!--@end-->><!--@if($val["text"] == $val["link"])--><span>{$val["text"]}</span><!--@else-->{$val["link"]}<!--@end--></a>
<!--@if($val["list"])-->
<ul class="ul2">
<!--@foreach($val["list"] as $v)--><!--@if($v["link"])-->
<li class="li2<!--@if($v['selected'])--> on2<!--@end--><!--@if($v['list'])--> sub2<!--@end-->">
<a href="{$v['href']}" class="a2"<!--@if($v["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<!--@end-->><!--@if($v["text"] == $v["link"])--><span>{$v["text"]}</span><!--@else-->{$v["link"]}<!--@end--></a>
<!--@if($v["list"])-->
<ul class="ul3">
<!--@foreach($v["list"] as $va)--><!--@if($va["link"])-->
<li class="li3<!--@if($va['selected'])--> on3<!--@end--><!--@if($va['list'])--> sub3<!--@end-->">
<a href="{$va['href']}" class="a3"<!--@if($va["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<!--@end-->><!--@if($va["text"] == $va["link"])--><span>{$va["text"]}</span><!--@else-->{$va["link"]}<!--@end--></a>
<!--@if($va["list"])-->
<ul class="ul4">
<!--@foreach($va["list"] as $vl)--><!--@if($vl["link"])-->
<li class="li4<!--@if($vl['selected'])--> on4<!--@end-->">
<a href="{$vl['href']}" class="a4"<!--@if($vl["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<!--@end-->><!--@if($vl["text"] == $vl["link"])--><span>{$vl["text"]}</span><!--@else-->{$vl["link"]}<!--@end--></a>
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
</div>
<div class="layer mpReset">
<!--// 로그인 -->
<!--@if($is_logged)-->
<p class="rss login"><a href="{getUrl('act','dispMemberLogout')}" title="{$lang->cmd_logout}"><span>로그아웃</span></a></p>
<p class="rss profile"><a href="{getUrl('act','dispMemberInfo')}" title="{$lang->cmd_view_member_info}"><span>정보</span></a></p>
<!--@else-->
<p class="rss login"><a href="#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><span>로그인/가입</span></a></p>
<!--@end-->
<!--// RSS -->
<!--@if($layout_info->rss != "hide")-->
<!--@if($layout_info->rss == 'show' || !$rss_url)-->
<!--@if($logged_info->is_admin == 'Y')-->
<p class="rss"><a href="{getUrl('','module','admin')}"><span>관리</span></a></p>
<!--@end-->
<!--@end-->
<!--@end-->
<!--// 검색 -->
<!--@if($layout_info->search != searchhide)-->
<form action="{getUrl()}" method="post" class="search fr">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="hidden" name="search_target" value="title_content" />
<fieldset>
<legend class="none">{$lang->cmd_search}</legend>
<input name="is_keyword" type="text" title="Search" class="inputText" accesskey="S" />
<input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<!--@end-->
</div>
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
<!--%import("./filter/login.xml")-->
<!--@if($member_config->enable_openid=='Y')--><!--%import("./filter/openid_login.xml")--><!--@end-->
<!-- loginWindow -->
<div id="loginWindow" class="loginWindow">
<!-- class="loginWindow" | class="loginWindow open" -->
<span class="modalWindow"></span>
<div id="loginLayer" class="loginLayer loginTypeA">
<!-- class="loginLayer loginTypeA" | class="loginLayer loginTypeB" -->
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
<form action="" method="post" class="typeA" id="commonLogin" onsubmit="return procFilter(this, login)">
<fieldset>
<legend>XE Login</legend>
<dl>
<dt><label for="uid">{$lang->user_id}</label></dt>
<dd><input name="user_id" type="text" class="inputText" id="uid" /></dd>
<dt><label for="upw">{$lang->password}</label></dt>
<dd><input name="password" type="password" class="inputText" id="upw" /></dd>
</dl>
<p class="keep"><input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/><label for="keepA">{$lang->keep_signed}</label></p>
<span class="loginButton"><input name="" type="submit" value="{$lang->cmd_login}" /></span>
</fieldset>
</form>
<!--@if($member_config->enable_openid=='Y')-->
<form action="./" method="post" class="typeB" id="openidLogin" onsubmit="return procFilter(this, openid_login)">
<fieldset>
<legend>OpenID Login</legend>
<dl>
<dt><label for="oid">Open ID</label></dt>
<dd><input name="openid" type="text" class="inputText" id="oid" /></dd>
</dl>
<span class="loginButton"><input name="" type="submit" value="{$lang->cmd_login}" /></span>
</fieldset>
</form>
<!--@end-->
<ul class="help">
<li class="join"><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li class="find"><a href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
<li class="find"><a href="{getUrl('act','dispMemberResendAuthMail')}">{$lang->cmd_resend_auth_mail}</a></li>
<!--@if($member_config->enable_openid=='Y')-->
<li class="typeA"><a href="#openidLogin" onclick="document.getElementById('loginLayer').className='loginLayer loginTypeB'">OpenID</a></li>
<li class="typeB"><a href="#commonLogin" onclick="document.getElementById('loginLayer').className='loginLayer loginTypeA'">OpenID</a></li>
<!--@end-->
</ul>
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
</div>
</div>
<!-- /loginWindow -->
<!--@end-->
{$layout_info->headerLayer}
</div>
<div id="container" class="{$layout_info->column}">
<!--@if($layout_info->column != "c")-->
<div id="column">
<!--@if($layout_info->widget_1)-->
<div class="extension">
<!--@if($layout_info->widget_1_title)--><h3 class="title">{$layout_info->widget_1_title}</h3><!--@end-->
<div class="section">{$layout_info->widget_1}</div>
</div>
<!--@end-->
<!--@if($layout_info->widget_2)-->
<div class="extension">
<!--@if($layout_info->widget_2_title)--><h3 class="title">{$layout_info->widget_2_title}</h3><!--@end-->
<div class="section">{$layout_info->widget_2}</div>
</div>
<!--@end-->
<!--@if($layout_info->widget_3)-->
<div class="extension">
<!--@if($layout_info->widget_3_title)--><h3 class="title">{$layout_info->widget_3_title}</h3><!--@end-->
<div class="section">{$layout_info->widget_3}</div>
</div>
<!--@end-->
</div>
<!--@end-->
<div id="content">
{$content}
</div>
</div>
<div id="footer" class="mpReset">
<div class="footer">
<address class="copyright">
<!--@if($layout_info->copyright)-->
{$layout_info->copyright}
<!--@else-->
<span class="c">© {date("Y")}</span> <strong><a href="{$layout_info->url}">{$layout_info->name}</a></strong>
<!--@end-->
<span class="powered">
Powered by <a href="http://xpressengine.com" onclick="window.open(this.href);return false;">XpressEngine</a>
/ Designed by <a href="http://mono-lab.net/" onclick="window.open(this.href); return false;">mono-lab</a>
/ UI Developed by <a href="http://elkha.kr" onclick="window.open(this.href);return false;">Elkha</a>
/ Modified by <a href="http://starforum.kr" onclick="window.open(this.href); return false;">fsfsdas</a>
</span>
</address>
<!--@if($sta)-->
<ul class="sta">
<!--@foreach($sta->list as $val)--><li><a href="{$val['href']}"<!--@if($val["open_window"]=="Y")--> onclick="window.open(this.href); return false;"<!--@end-->>{$val["link"]}</a></li><!--@end-->
</ul>
<!--@end-->
</div>
</div>
</div>