Xpressengine에 기본으로 들어있는 xe_official_v2 레이아웃에는 로그인폼이 팝업으로 구현됩니다.
이 기능을 다른 레이아웃에 적용하는 방법입니다.(예제 : xe_official)
1. xe/layouts/xe_official/layout.html에 아래와 같이 소스를 삽입합니다.
<div id="top_index">
<!--@if($logged_info)-->
<a class="member_{$logged_info->member_srl}">{$logged_info->nick_name}</a>
<a href="{getUrl('act','dispMemberLogout')}" class="l">로그아웃</a>
<a href="{geturl('act','dispMemberInfo')}" class="l">내정보</a>
<a href="{getUrl('act','dispMemberMessages','message_type','','member_srl',$logged_info->member_srl)}" class="l">{@$oCommunicationModel = &getModel('communication'); $output = $oCommunicationModel->getMessages("R");}쪽지<span>{$output->total_count}개</span></a>
<!--@else-->
<a href="#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L" class="l">로그인</a>
<a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}" class="l">회원가입</a>
<!--@end-->
<!--@if($logged_info->is_admin=='Y')-->
<a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}" class="l">설정</a>
<a href="{getUrl(','module','admin')}" " onclick="window.open(this.href); return false;" class="l">Admin</a>
<!--@else-->
<a href="javascript:bookmarksite('{$layout_info->fa}', '{$layout_info->index_url}')" class="l">즐겨찾기</a>
<!--@end-->
</div>
<!--@if($logged_info)-->
<a class="member_{$logged_info->member_srl}">{$logged_info->nick_name}</a>
<a href="{getUrl('act','dispMemberLogout')}" class="l">로그아웃</a>
<a href="{geturl('act','dispMemberInfo')}" class="l">내정보</a>
<a href="{getUrl('act','dispMemberMessages','message_type','','member_srl',$logged_info->member_srl)}" class="l">{@$oCommunicationModel = &getModel('communication'); $output = $oCommunicationModel->getMessages("R");}쪽지<span>{$output->total_count}개</span></a>
<!--@else-->
<a href="#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L" class="l">로그인</a>
<a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}" class="l">회원가입</a>
<!--@end-->
<!--@if($logged_info->is_admin=='Y')-->
<a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}" class="l">설정</a>
<a href="{getUrl(','module','admin')}" " onclick="window.open(this.href); return false;" class="l">Admin</a>
<!--@else-->
<a href="javascript:bookmarksite('{$layout_info->fa}', '{$layout_info->index_url}')" class="l">즐겨찾기</a>
<!--@end-->
</div>
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
- 중간생략 ( 이부분 스크립트를 작성하면 게시판 글작성이 안됩니다. 아래의 layout.html을 참조하세요 ) -
<!-- /loginWindow -->
<!--@end-->
# 이상하게도 위의 스크립트를 작성해서 글을 작성하면 글 등록이 되지를 않네요. {@ $member_config = MemberModel::getMemberConfig(); }
- 중간생략 ( 이부분 스크립트를 작성하면 게시판 글작성이 안됩니다. 아래의 layout.html을 참조하세요 ) -
<!-- /loginWindow -->
<!--@end-->
할수없이 소스로 대치합니다. layout.html
2. xe/layouts/xe_official/css/default.css에 아래와 같이 소스를 삽입합니다. (위치설정이나 칼라는 자신에게 맞게끔 설정하세요)
/* top 메뉴 위치*/
#top_index { position:absolute; top:275px; right:150px; _right:210px; z-index:998; text-align:left;}
#top_index span { color:#ff0000; padding-left:5px; }
#top_index a { color:#a98a60; font:.9em Tahoma; margin-right:5px; text-decoration:none;}
#top_index .l { border-left:1px dotted #a98a60; padding-left:10px; }
#top_index a:hover,
#top_index a:focus { color:#a98a60; font:.9em Tahoma; }
/* modalWindow */
.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(../images/bgLoginText.gif)undefined; background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../images/bgOpenidText.gif)undefined; 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(../images/buttonLoginAction.gif)undefined; 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(../images/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;}
#top_index { position:absolute; top:275px; right:150px; _right:210px; z-index:998; text-align:left;}
#top_index span { color:#ff0000; padding-left:5px; }
#top_index a { color:#a98a60; font:.9em Tahoma; margin-right:5px; text-decoration:none;}
#top_index .l { border-left:1px dotted #a98a60; padding-left:10px; }
#top_index a:hover,
#top_index a:focus { color:#a98a60; font:.9em Tahoma; }
/* modalWindow */
.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(../images/bgLoginText.gif)undefined; background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../images/bgOpenidText.gif)undefined; 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(../images/buttonLoginAction.gif)undefined; 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(../images/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;}
3. logoform.zip 파일의 압축을 풀어서 xe/layouts/xe_official/images 방안에 업로드합니다.
filter.zip 파일의 압축을 풀어서 xe/layouts/xe_official/filter 방안에 업로드합니다.
필요하신분들께 도움이 되겠네요
잘 보고 갑니다^^