2011.12.30 11:46
김문식242
위와 같은 샘플처럼 회원가입화면도 레이아웃처럼 띄우는 방법을 찾고 있습니다. 마이페이지도 이렇게 띄우고 싶구요
방법좀 알려주세요~~~~
2011.12.30 12:28
http://www.xpressengine.com/index.php?&mid=download&category_srl=18322954&search_keyword=offi&package_srl=18324299
위 링크에서 해당 레이아웃을 받으셔서
layout.html 파일에서
<ul class="account"> <li class="log"> <!--@if($is_logged)--> <a href="{getUrl('act','dispMemberLogout')}"><img src="img/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a> <!--@else--> <a href="#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="img/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a> <!--@end--> </li> <!--@if(!$is_logged)--> <li class="register"><a href="{getUrl('act','dispMemberSignUpForm')}"><span>Register</span></a></li> <!--@else--> <li class="profile"> <button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button> <!-- memberProfile --> <div id="memberProfile" class="memberProfile"> <!-- class="memberProfile" | class="memberProfile active" --> <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button> <h2 class="authorName">{$logged_info->nick_name}</h2> <ul> <!--@foreach($logged_info->menu_list as $key => $val)--> <li><a href="{getUrl('act',$key,'member_srl','')}">{Context::getLang($val)}</a></li> <!--@end--> </ul> <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button> </div> <!-- /memberProfile --> </li> <!--@end--> <li class="language"> <!-- class="language" | class="language open" --> <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em> <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button> <ul class="languageList"> <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li> <!--@end--><!--@end--> </ul> </li> </ul>
위 부분을 적당한 위치에 놓구요
layout.html 맨 아래부분에
<!--@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-->
위 소스를.. <div id="header"></div>넣으시고..(꼭 #header 에 넣으셔야 합니다.)
css폴더안에 layout@official.css 파일 여셔서
#header .account{ position:absolute; top:40px; right:0; margin:0; padding:0; z-index:2;}#header .account li{ position:relative; float:left; list-style:none; background-image:url(../img/lineHeaderVr.gif); background-repeat:no-repeat; background-position:left 4px;}div.black #header .account li{ background-image:url(../img/lineHeaderVrBlack.gif);}#header .account li *{ vertical-align:top;}#header .account li li{ float:none; height:auto; background-image:none;}#header .account li.log{ background-image:none; font-size:0; line-height:0;}#header .account li.log a{ display:block; padding:5px 8px;}#header .account li.profile button{ border:0; padding:0; width:53px; height:15px; cursor:pointer; background-color:transparent; background-image:url(../img/buttonProfile.gif); background-repeat:no-repeat; background-position:center -10px; overflow:visible;}div.black #header .account li.profile button{ background-position:center 5px;}#header .account li.profile button span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}#header .account li.profile .memberProfile{ display:none; position:absolute; top:15px; left:8px; padding:20px; background:#fff; border:2px solid #737373;}#header .account li.profile .memberProfile.active{ display:block;}#header .account li.profile .memberProfile .authorName{ margin:0 0 8px 0; font-size:16px; font-weight:bold; color:#333; white-space:nowrap;}#header .account li.profile .memberProfile ul{ margin:0; padding:15px 15px 5px 15px; list-style:none; border:1px solid #f2f2f2; background:#fcfcfc;}#header .account li.profile .memberProfile li{ float:none; white-space:nowrap; margin:0 0 10px 0; padding:0 0 0 10px; background:url(../img/bulletB.gif) no-repeat left center;}#header .account li.profile .memberProfile li a{ background:none; color:#333; text-decoration:none;}#header .account li.profile .memberProfile li a:hover,#header .account li.profile .memberProfile li a:active,#header .account li.profile .memberProfile li a:focus{ text-decoration:underline;}#header .account li.profile .memberProfile .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;}#header .account li.profile .memberProfile .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}#header .account li.register a{ display:block; width:43px; height:5px; padding:5px 8px; background-image:url(../img/buttonRegister.gif); background-repeat:no-repeat; background-position:center -10px;}div.black #header .account li.register a{ background-position:center 5px;}#header .account li.register a span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}#header .account li.language{ position:relative;}#header .account li.language em{ display:inline-block; height:15px; overflow:hidden; padding:0 8px; font-size:9px; font-style:normal; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px -10px;}div.black #header .account li.language em{ background-position:8px -10px;}#header .account li.language em span{ display:inline-block; overflow:hidden; visibility:hidden;}#header .account li.language em.ko{ background-position:-92px -10px;}div.black #header .account li.language em.ko{ background-position:8px -10px;}#header .account li.language em.en{ background-position:-92px -25px;}div.black #header .account li.language em.en{ background-position:8px -25px;}#header .account li.language em.jp{ background-position:-92px -40px;}div.black #header .account li.language em.jp{ background-position:8px -40px;}#header .account li.language em.zh-CN{ background-position:-92px -55px;}div.black #header .account li.language em.zh-CN{ background-position:8px -55px;}#header .account li.language em.zh-TW{ background-position:-92px -70px;}div.black #header .account li.language em.zh-TW{ background-position:8px -70px;}#header .account li.language button{ height:15px; border:0; padding:0; font-size:0; line-height:0; overflow:visible; cursor:pointer; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px 5px; background-color:transparent;}div.black #header .account li.language button{ background-position:8px 5px;}#header .account li.language button span{ font-size:0; line-height:0; width:0; height:0; overflow:hidden; visibility:hidden;}#header .account li.language .sLanguage{ position:relative; width:100px; text-align:right;}#header .account li.language .sLanguage span{ font-size:0; line-height:0; letter-spacing:-100px; display:inline-block; visibility:visible; width:100%; height:15px; background-image:url(../img/buttonSelectLanguageToggle.gif); background-repeat:no-repeat; background-position:85px 4px;}#header .account li.language.open .sLanguage span{ background-position:85px -6px;}#header .account li.language .languageList{ display:none; width:98px; margin:0; padding:5px 0; position:absolute; top:20px; right:0; background:#fff; border:1px solid #eee;}#header .account li.language.open .languageList{ display:block; z-index:999;}#header .account li.language .languageList button{ width:100%;}div.black #header .account li.language .languageList{ background:#666; border-color:#888;}#header .account li.language .languageList .ko button{ background-position:-92px -10px;}div.black #header .account li.language .languageList .ko button{ background-position:8px -10px;}#header .account li.language .languageList .en button{ background-position:-92px -25px;}div.black #header .account li.language .languageList .en button{ background-position:8px -25px;}#header .account li.language .languageList .jp button{ background-position:-92px -40px;}div.black #header .account li.language .languageList .jp button{ background-position:8px -40px;}#header .account li.language .languageList .zh-CN button{ background-position:-92px -55px;}div.black #header .account li.language .languageList .zh-CN button{ background-position:8px -55px;}#header .account li.language .languageList .zh-TW button{ background-position:-92px -70px;}div.black #header .account li.language .languageList .zh-TW button{ background-position:8px -70px;}#header .account li.language .languageList li { display:none;}#header .account li.language .languageList .ko,div.black #header .account li.language .languageList .ko,#header .account li.language .languageList .en,div.black #header .account li.language .languageList .en,#header .account li.language .languageList .jp,div.black #header .account li.language .languageList .jp,#header .account li.language .languageList .zh-CN,div.black #header .account li.language .languageList .zh-CN,#header .account li.language .languageList .zh-TW,div.black #header .account li.language .languageList .zh-TW { display:block; }.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 0;}.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 0;}.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}.loginWindow .loginLayer dd{ margin:0 0 21px 0;}.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; 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.gif); background-repeat:no-repeat; background-position:right top;}.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../img/bgOpenidText.gif); 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:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../img/buttonLoginAction.gif); 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:bold;}.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;}
#header .account{ position:absolute; top:40px; right:0; margin:0; padding:0; z-index:2;}#header .account li{ position:relative; float:left; list-style:none; background-image:url(../img/lineHeaderVr.gif); background-repeat:no-repeat; background-position:left 4px;}div.black #header .account li{ background-image:url(../img/lineHeaderVrBlack.gif);}#header .account li *{ vertical-align:top;}#header .account li li{ float:none; height:auto; background-image:none;}#header .account li.log{ background-image:none; font-size:0; line-height:0;}#header .account li.log a{ display:block; padding:5px 8px;}#header .account li.profile button{ border:0; padding:0; width:53px; height:15px; cursor:pointer; background-color:transparent; background-image:url(../img/buttonProfile.gif); background-repeat:no-repeat; background-position:center -10px; overflow:visible;}div.black #header .account li.profile button{ background-position:center 5px;}#header .account li.profile button span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}#header .account li.profile .memberProfile{ display:none; position:absolute; top:15px; left:8px; padding:20px; background:#fff; border:2px solid #737373;}#header .account li.profile .memberProfile.active{ display:block;}#header .account li.profile .memberProfile .authorName{ margin:0 0 8px 0; font-size:16px; font-weight:bold; color:#333; white-space:nowrap;}#header .account li.profile .memberProfile ul{ margin:0; padding:15px 15px 5px 15px; list-style:none; border:1px solid #f2f2f2; background:#fcfcfc;}#header .account li.profile .memberProfile li{ float:none; white-space:nowrap; margin:0 0 10px 0; padding:0 0 0 10px; background:url(../img/bulletB.gif) no-repeat left center;}#header .account li.profile .memberProfile li a{ background:none; color:#333; text-decoration:none;}#header .account li.profile .memberProfile li a:hover,#header .account li.profile .memberProfile li a:active,#header .account li.profile .memberProfile li a:focus{ text-decoration:underline;}#header .account li.profile .memberProfile .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;}#header .account li.profile .memberProfile .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}#header .account li.register a{ display:block; width:43px; height:5px; padding:5px 8px; background-image:url(../img/buttonRegister.gif); background-repeat:no-repeat; background-position:center -10px;}div.black #header .account li.register a{ background-position:center 5px;}#header .account li.register a span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}#header .account li.language{ position:relative;}#header .account li.language em{ display:inline-block; height:15px; overflow:hidden; padding:0 8px; font-size:9px; font-style:normal; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px -10px;}div.black #header .account li.language em{ background-position:8px -10px;}#header .account li.language em span{ display:inline-block; overflow:hidden; visibility:hidden;}#header .account li.language em.ko{ background-position:-92px -10px;}div.black #header .account li.language em.ko{ background-position:8px -10px;}#header .account li.language em.en{ background-position:-92px -25px;}div.black #header .account li.language em.en{ background-position:8px -25px;}#header .account li.language em.jp{ background-position:-92px -40px;}div.black #header .account li.language em.jp{ background-position:8px -40px;}#header .account li.language em.zh-CN{ background-position:-92px -55px;}div.black #header .account li.language em.zh-CN{ background-position:8px -55px;}#header .account li.language em.zh-TW{ background-position:-92px -70px;}div.black #header .account li.language em.zh-TW{ background-position:8px -70px;}#header .account li.language button{ height:15px; border:0; padding:0; font-size:0; line-height:0; overflow:visible; cursor:pointer; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px 5px; background-color:transparent;}div.black #header .account li.language button{ background-position:8px 5px;}#header .account li.language button span{ font-size:0; line-height:0; width:0; height:0; overflow:hidden; visibility:hidden;}#header .account li.language .sLanguage{ position:relative; width:100px; text-align:right;}#header .account li.language .sLanguage span{ font-size:0; line-height:0; letter-spacing:-100px; display:inline-block; visibility:visible; width:100%; height:15px; background-image:url(../img/buttonSelectLanguageToggle.gif); background-repeat:no-repeat; background-position:85px 4px;}#header .account li.language.open .sLanguage span{ background-position:85px -6px;}#header .account li.language .languageList{ display:none; width:98px; margin:0; padding:5px 0; position:absolute; top:20px; right:0; background:#fff; border:1px solid #eee;}#header .account li.language.open .languageList{ display:block; z-index:999;}#header .account li.language .languageList button{ width:100%;}div.black #header .account li.language .languageList{ background:#666; border-color:#888;}#header .account li.language .languageList .ko button{ background-position:-92px -10px;}div.black #header .account li.language .languageList .ko button{ background-position:8px -10px;}#header .account li.language .languageList .en button{ background-position:-92px -25px;}div.black #header .account li.language .languageList .en button{ background-position:8px -25px;}#header .account li.language .languageList .jp button{ background-position:-92px -40px;}div.black #header .account li.language .languageList .jp button{ background-position:8px -40px;}#header .account li.language .languageList .zh-CN button{ background-position:-92px -55px;}div.black #header .account li.language .languageList .zh-CN button{ background-position:8px -55px;}#header .account li.language .languageList .zh-TW button{ background-position:-92px -70px;}div.black #header .account li.language .languageList .zh-TW button{ background-position:8px -70px;}#header .account li.language .languageList li { display:none;}#header .account li.language .languageList .ko,div.black #header .account li.language .languageList .ko,#header .account li.language .languageList .en,div.black #header .account li.language .languageList .en,#header .account li.language .languageList .jp,div.black #header .account li.language .languageList .jp,#header .account li.language .languageList .zh-CN,div.black #header .account li.language .languageList .zh-CN,#header .account li.language .languageList .zh-TW,div.black #header .account li.language .languageList .zh-TW { display:block; }
.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 0;}.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 0;}.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}.loginWindow .loginLayer dd{ margin:0 0 21px 0;}.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; 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.gif); background-repeat:no-repeat; background-position:right top;}.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../img/bgOpenidText.gif); 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:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../img/buttonLoginAction.gif); 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:bold;}.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;}
복사해서 해당 css 파일에 붙여넣으세요
그리고img 폴더를 전부 업로드 시키세요
http://www.xpressengine.com/index.php?&mid=download&category_srl=18322954&search_keyword=offi&package_srl=18324299
위 링크에서 해당 레이아웃을 받으셔서
layout.html 파일에서
위 부분을 적당한 위치에 놓구요
layout.html 맨 아래부분에
위 소스를.. <div id="header"></div>넣으시고..(꼭 #header 에 넣으셔야 합니다.)
css폴더안에 layout@official.css 파일 여셔서
복사해서 해당 css 파일에 붙여넣으세요
그리고img 폴더를 전부 업로드 시키세요