출처 : http://design123.kr/bs/219
로그인 위젯 스킨 수정하기
1. 로그인 위젯의 위치
/home/xynex/public_html/zbxe/widgets/login_info/skins/default/
(검은색글씨부터가 설치경로인 건 아시겠죠? zbxe가 설치폴더입니다.)
default 스킨과 똑같은 위치에 만들고자 하는 로그인 스킨의 이름으로 폴더를 하나 더 생성합니다.
/home/xynex/public_html/zbxe/widgets/login_info/skins/default1/
※ 'default1'이란 것은 제작자 임의로 붙여주시면 됩니다. 'default1' 대신 'nzeo'라고 붙여도 되는 겁니다.
2. 폴더 구조 및 파일 설명
skins/default/filter 건드릴 필요없습니다.
skins/default/images 로그인스킨에 필요한 이미지가 들어가는 폴더입니다.
skins/default/js 건드릴 필요없습니다. 자바스크립트 파일입니다.
skins/default/login_form.html 로그인 전의 화면입니다.
skins/default/login_info.html 로그인 후의 화면입니다.
skins/default/skin.xml 스킨의 기본정보가 들어가있습니다.
js, filter 디렉토리는 따로 뭔가를 더 추가하지 않는 이상 수정할 필요가 없으니 설명하지 않겠습니다.
이 외의 수정을 해야하는 파일을 위주로 설명을 하겠습니다.
[ 파일설명 ]
2-0. 스타일시트 파일 (/css/default.css)
기본 레이아웃에 보면 default, white, black 이라고 되어있습니다.
로그인 위젯 역시 레이아웃의 스타일시트 파일에 영향을 받습니다.
지금 설명에서는 default.css 파일만 수정 제작하는 방법을 다루겠습니다만
만약에 default,css 파일 외에 white.css, black.css 파일을 만들어두시게 되면
레이아웃 설정에서 선택하는 색상에 맞게 로그인 위젯의 스타일시트 역시 변하게 됩니다.
더 설명드리자면, 레이아웃 설정에서 black.css 파일로 스타일시트 파일을 설정하게 되면
만약에 로그인 위젯에서 black.css파일을 만들어두게 되면 로그인 위젯의 스타일시트도 레이아웃 설정에 따라 black.css 파일이
스타일시트 파일로 지정이 되는 겁니다. 즉, 레이아웃 설정에 따라 로그인 위젯의 스타일시트도 변한다는 말입니다.
개인적인 생각으로는 위와 같이 레이아웃에서 색상이 바뀌면 로그인 위젯도 따라 영향을 받아 바뀌기 보다는
독립적으로 로그인 위젯에서도 색상스타일시트값을 변경할 수 있었으면 좋겠다는 생각입니다.
(혹시 이 글을 보신 분들 중에 동의하시는 분들이 있다면 직접 건의를 하셔도 됩니다.)
2-1. 스킨정보파일 (skim.html)
skin.xml 파일은 레이아웃에서 info.xml 과 같은 역할을 합니다.
(info.xml 파일의 위치 : /home/xynex/public_html/zbxe/layouts/xe_official/conf/info.xml)
언어설정부분은 제가 각 언어를 모르므로 기본 틀만 설명해드리겠습니다.
보시다시피 skin.xml 파일에는 기본 정보가 들어가있습니다. 위에도 말씀드렸다시피 info.xml 파일과 내용이 거의 흡사하죠? ^^
이 파일은 스킨의 기본 정보 외에는 별다른 것이 없다는 말입니다.
화면에 나타내고자 하는 소스는 바로 아래 파일들입니다.
2-2. 로그인 후 (login_info.xml)
login_info.xml 는 로그인 후의 화면입니다.
login_form.xml 은 로그인 전의 폼이 있는 화면입니다.
로그인하기 전의 화면인 form 디자인은 별 게 없으니깐
먼저, default/login_info.xml 파일의 소스를 보고 설명드리겠습니다.
위 소스가 아래 화면과 같은 디자인을 나타냅니다.
위의 소스화면에서,
흰색으로 칠해진 글씨가 '정낙훈 로그아웃' 부분입니다.
<div class="userName">...</div>
빨간색으로 칠해진 글씨가 '회원정보..관리' 부분입니다.
<ul class="userMenu">...</ul>
빨간색으로 칠한 글씨 안에 초록색 글씨 부분이 바로 '최근로그인 : ..' 부분입니다.
<p class="latestLogin">{$lang->last_login} : <span>{zDate($logged_info->last_login, "Y-m-d H:i")}</span></p>
※ div style="clear:both;" 로 인한 추가 설명
최근로그인 부분은 표시하고 싶지 않다 하시는 분들은 초록색 글씨 부분을 지워주면 됩니다.
여기서 주의할 점은 빨간색 부분은 지우면 안됩니다.
왜냐하면 바로 위에서 굵은 빨간색으로 칠한 latestLogin 이라는 class 명 때문인데요,
제가 설명하고자 하는 style="clear:both;" 가 바로 이 것입니다.
skins/default/css/ 폴더 아래의 default.css 스타일시트 파일에서 한 번 찾아보면
17번 째 줄에서
.box_login .lastlogin { clear:both; padding-bottom:5px;}
..와 같은 코드를 볼 수 있습니다.
clear:both; 라는 스타일시트는 테이블을 예로 든다면 마지막 셀 정도의 역할을 하는데요
일전에 일모리님의 css 강의를 보면 float 과 clear 에 대해서 나옵니다.
이 clear:both의 역할이란 div 를 float:left 로 모두 왼쪽 정렬을 하고 마지막은 clear:both; 로 닫아주는 것이거든요.
만약에 닫아주지 않는다면 이 뒤에 넘어오지 않아야하는 <DIV>까지도 왼쪽 정렬이 되버리는 것입니다.
<p class="latestLogin">{$lang->last_login} : <span>{zDate($logged_info->last_login, "Y-m-d H:i")}</span></p>
만약에 위에서 초록색글씨 부분 뿐만 아니라 p class 빨간색 글자가 있는 부분까지 모두 지워버리면
로그인 화면 아래의 구조부터 위치가 조금 헝클어집니다. 위로 올라오지 않아야하는 것이 위로 올라와서 왼쪽 정렬이 되기 때문인데요, 아래 그림을 보시면 이해가 쉬울 겁니다.
대략 이런 식으로 말이죠. clear:both; 로 닫아주지 않음으로 해서 그 뒤에 있는 div가 위로 끌려와서 옆에 붙어버립니다.
저렇게 되면 안되니깐 <p class="latestLogin">..</P>은 놔두고 지우셔야 합니다.
2. 파일설명
이어서 갑니다.
2-3. login_form.xml
작업 중에 보니깐 너무 이상해서.. login_form.xml 파일을 수정 간단하게 하고 가겠습니다.
login_info.xml 파일은 이후에 더 자세히 하죠.
지금 만드는 로그인 위젯 스킨은 오픈아이디는 사용하지 않을 것이므로
홈페이지에서 관리 > 회원 > 기본설정에서 오픈아이디 사용안함에 체크하고 작업 시작하겠습니다.
물론 스킨 상에서 로그인 위젯을 보이지 않게 해도 됩니다.
default.css 파일에서 open_id 부분에서 display:none; 이라고 추가해주시면 됩니다.
참고로 저도 로그인위젯스킨을 만들면서 설명드리는 것이니깐
읽으시는 분들이 길 헤매지 말고 잘 따라오세요.
1단계 들어갑니다.
default.css 파일 수정합니다.
※ 참고, 볼드체는 수정한 부분입니다.
폼은 24 line..
.box_login .input { width:120px; background-color: #ffffff; border:1px solid #CECECE; padding:2px 2px 2px 5px; height:14px; margin:0px; cursor:text; color:#666666;font:10px verdana bold;}
width값 등을 적당히 수정합니다.
border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; 를 빼주고 #CECECE 를 입력했습니다.
(보더색상값: 상 우 하 좌 이렇게 시계순입니다.)
버튼은 23 line..
.box_logininput.submit
{ width:45px;
height:45px;background:url(../images/default/login_btn_submit.gif)
no-repeat;border:none; margin:9px 0 0 -5px; _margin:5px 0 0 0; cursor:pointer; }
버튼의 위치를 왼쪽으로 살짝 더 붙여줬습니다.
버튼 그림을 변경하고자하면 url 부분의 이미지를 새로 만들어서 같은 이름으로 올리면 되겠습니다.
하는 김에 테두리도 할까 말까....
이미지로 처리해야할지, 아니면 CSS로 처리해야할지 고민인데..(__);;
우선 이미지부터 다 해보죠.
1. 이미지로 처리하기
재료는 싸이월드 홈2 로그인에 사용된 이미지를 사용하기로 합니다.
테두리에 사용된 이미지는 상단,하단,가운데 부분으로 총 3개의 이미지가 사용되었습니다.
하단이미지
가운데 이미지
가운데 이미지는 높이가 1픽셀이라 잘 안보여서 배경을 어둡게 처리했습니다.
위와 같은 재료를 사용하기 위해서는 DIV도 마찬가지 3개가 필요합니다.
<DIV></DIV> 상단
<DIV></DIV> 가운데
<DIV></DIV> 하단
이런 식으로 말이죠.
네이밍은 아래와 같이 붙입니다.
bg_personal_t
bg_personal_m
bg_personal_b
네이밍의 뜻은 아래와 같습니다.
bg = BackGround
personal = 개인정보 영역이므로..
t = Top
m = Middle
b = Bottom
.bgPersonl_t {width:200px;height:10px;background: url(http://design123.kr/bs/이미지주소)undefined;}
.bgPersonl_m {{width:200px;height:100px;background: url(http://design123.kr/bs/이미지주소)undefined;}}
.bgPersonl_b {width:200px;height:10px;background: url(http://design123.kr/bs/이미지주소)undefined;}}
와 같은 스타일시트 클래스명을 생성합니다.
그리고 각 div에 삽입합니다.
※ #bgPersonl_m 의 height 값은 알아서 주세요
<div class="bgPersonal_t"></div> 상단
<div class="bgPersonal_m"></div> 기존 로그인 부분이 이 안에 들어갑니다.
<div class="bgPersonal_b"></div> 하단
자, 여기서 login_form.xml 파일의 소스를 살펴봅시다.
<!--@if($colorset=="default"||!$colorset)-->
<!--%import("css/default.css")-->
<!--@end-->
<!--%import("./filter/login.xml")-->
<!--%import("./filter/openid_login.xml")-->
<!--%import("./js/login.js")-->
<div class="bgPersonal_t"></div>
<div class="box_login fc_01 bgPersonal_m" id="box_login">
<form action="./" method="get" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget">
<div class="form_field">
<div>
<input name="user_id" type="text" class="input" id="login_form_user_id" />
</div>
<div>
<input name="password" type="password" class="input" />
</div>
</div>
<div><input type="submit" value=" " class="submit" /></div>
<ul class="option">
<li><input type="checkbox" name="remember_user_id"id="chk_remember_user_id" value="Y" class="checkbox" /></li>
<li><label for="chk_remember_user_id">{$lang->remember_user_id}</label></li>
<li><a href="./{getUrl("act','dispMemberSignUpForm')}"class="fc_02 btn">{$lang->cmd_signup}</a></li>
</ul>
</form>
<div class="clear"></div>
<script type="text/javascript">
xAddEventListener(window, "load", function(){ doFocusUserId("fo_login_widget"); });
</script>
</div>
<div class="bgPersonal_b"></div>
<!-- OpenID -->
<!--@if($member_config->enable_openid=='Y')-->
<div class="openid_login fc_01" id="box_login">
<form action="./" method="post" onsubmit="return procFilter(this, openid_login)" >
<div class="wButtonWrite">
<ul>
<li><input type="text" name="user_id" class="openid_user_id" /></li>
<li><span class="wButtonTypeA"><imgsrc="/images/blank.gif" alt="" class="leftCap" /><inputtype="submit" value="{$lang->cmd_login}" accesskey="s" /><imgsrc="/images/blank.gif" alt="" class="rightCap"/></span></li>
</ul>
</div>
</form>
</div>
<!--@end-->
파란색, 초록색 굵은 글자 부분을 주목해서 봐주세요.
bgPersonal_t, bgPersonal_b,bgPersonal_m 는 추가해준 부분입니다.
box_login 이 두번째 기존로그인 부분인 것은 눈치채실 겁니다.
나머지는 상,하단이고요..
id로 해도 되는데 스타일시트보니깐 class 로 다 되어있고
또 id로 해봤는데 뭘 빼먹었는지 왠지 잘 안되더군요.
해보다가 2번째 로그인박스에서 잘 안되서 class로 수정 작업했습니다.
id는 #로 나타내고, class는 . 으로 표현합니다.
.bgPersonal_t {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_t.gif) no-repeat top;clear:both;}
.bgPersonal_b {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_b.gif) no-repeat top;clear:both;}
.box_login .bgPersonal_m {width:200px;background: url(../images/cyhome2/bg_personal_m.gif) repeat top;clear:both;}
※ 주의할 점은 url 주소를 정확하게 입력해주세요.
그리고 bgPersonal_m의 위치는 box_login 안이므로 위와 같이 적어주셔야합니다.
이제 login_form.xml 파일은 이렇게 수정합니다.
<div class="bgPersonal_t"></div>
<div class="box_login fc_01 bgPersonal_m" id="box_login">
...
</div>
<div class="bgPersonal_b"></div>
이렇게 login_info.xml 파일도 위와 같이 수정해주시면 됩니다.
id와 class의 차이점은 class는 여러 지역에 여러번 써도 된다는 것이고,
id는 한 곳에 한 번만 적어줘야합니다.
※ 위에서, 두번째 부분인 bgPersonal_m 클래스를 안만들고 css파일에서 .box_login 을 수정해줘도 됩니다.
이 부분은 위에서 이미 했으니 box_login은 수정 안하셔도 됩니다.
저는 두번째 bgPersonal_m 클래스 대신 box_login으로 대체했기에 수정합니다.
default.css
9 line..
.box_login { border:solid 3px #D5D8DB; background:#FFFFFE; margin-bottom:10px;}
이제 우리는 네모 틀 테두리는 필요없으므로 저 굵은글씨 부분은 지워주셔도 됩니다.
.box_login { border:solid 0px #D5D8DB; background:#FFFFFE; margin-bottom:10px;}
그냥 단순히 0px 으로 화면에 보이지 않도록 해주어도 됩니다.
저는 아래와 같이 해주었습니다.
border는 지우고 background를 추가시켜줬습니다.
그리고 bgPersonal_b와 죽 이어져야 하니깐 margin-bottom:10px; 는 지워줬습니다.
box_login에서 이 부분은 수정해주셔야합니다. margin-bottom은 말이죠.
안 그러면 마진값이 붙어서 아래 div와 떨어져보이거든요. 여기는 수정하고 지나가세요.
자, 이제 이렇게 완성이 되었습니다. 그런데 가만...... 확대해보겠습니다.
각 모서리에 의문의 #DDDDDD 선이 보입니다. 약간의 삽질을 했는데 원인은 모르겠고..
(아! 원인은 레이아웃 파일의 배경설정 때문이었네요. 여기서는 배경은 놔두지 않고 아래처럼 수정하는 방법으로 해결해보도록 합니다.)
.bgPersonal_b{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_b.gif)no-repeat #FFFFFF;border:0px;overflow:hidden;}
최종적으로 위와 같이 해주었습니다. background:#FFFFFF 를 추가시켜줬더니 해결이 되더군요. :D
box_login 도 보시자면 아래와 같습니다.
자. 이렇게 해서 login_form.xml 파일은 완성~~~~~~~~~
이제 login_info.xml 로그인 후의 화면이 남아있는데
바빠서 다음 내용은 다음 글을 확인해주세요.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
로그인위젯 마음대로 주무르기
부득이하게 제 개인서버에서 강의를 진행하는 점 양해해주시기 바랍니다.
물론 13강은 서버가 어디든 상관이 없지만요.
이번 13강에서는 로그인위젯에 여러가지 기능을 추가하거나 빼보도록 하겠습니다.
즉, 자신의 사이트에 맞는 로그인위젯을 만들어보겠다. 이 말이 되겠습니다.
우리는 샤방샤방 강의를 통해 웹미니 로그인 위젯을 사용하고 있는데, 이 위젯을 예로 들며 강의를 시작하겠습니다.
(물론 다른 위젯들도 방법은 거의 비슷합니다.)
주요 내용 설명을 하자면, 우리는 현재 오른쪽 로그인과 같은 형태의 로그인을 이용하고 있습니다.
여기서 왼쪽 로그인과 같이 레벨과 포인트를 추가하고, 관리자의 경우 관리자페이지로 이동할 수 있는 곳을 만들어보도록 하겠습니다.
또 클랜홈페이지에는 잘 쓰이지 않는 스크랩보기,저장함보기,친구보기를 삭제하겠습니다.
먼저 widgets/login_info/skins/webmini_2_5에 있는 login_info.html과, 거기에서 css폴더 안에 있는 default.css를 다운로드하도록 합니다.
그리고 메모장 등 텍스트 프로그램등으로 열어봅시다.
(저는 에디트 플러스 3을 사용합니다.)
먼저 login_info.html입니다.
<!--%import("css/default.css")-->
<!--%import("./filter/logout.xml")-->
아래에 다음 소스를 넣어줍시다.
{@ $oPointModel = &getModel('point'); $point = $oPointModel->getPoint($logged_info->member_srl); $oModuleModel = &getModel('module');??$config = $oModuleModel->getModuleConfig('point'); $level = $oPointModel->getLevel($point, $config->level_step); }
포인트와 레벨을 삽입할 수 있게 도와주는 문구라고 보시면 되겠습니다.
그리고 <li>를 찾아서, 그 위에
※ ☆을 제거하고 넣어주세요.
<☆div class="levelpoint">Level {$level}&nb☆sp;&n☆bsp;Point {$point}<☆/div>
를 넣어줍니다.
그리고 default.css의 가장 아래에 다음 부분을 넣어줍니다.
.login_default form .levelpoint { color:#777; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; padding-top:5px; text-align:center;}
다시 업로드해보면 위와 같이 나타납니다.
조금 짤리는 군요.
어차피 아래에서 메뉴 몇개를 없앨거니, 가만히 놔둬도 될 것 같습니다.
그럼 메뉴를 없애보죠.
login_info.html에서 다음 문구를 찾습니다.
※ ☆을 제거하고 찾아주세요.
<!--@foreach($logged_info->menu_list as $key => $val)-->
<li><☆a href="./{getUrl("act',$key,'member_srl','')}" title="{Context::getLang($val)}">{Context::getLang($val)}<☆/a></li>
<!--@end-->
이 것을 이렇게 바꾸어줍니다.
※ ☆을 제거하고 바꾸어주세요.
<li><☆a href="./{getUrl("act','dispMemberInfo','member_srl',$logged_info->member_srl)}">{$lang->cmd_view_member_info}<☆/a></li>
<li><☆a href="./{getUrl("act','dispMemberMessages','member_srl',$logged_info->member_srl)}">{$lang->cmd_view_message_box}<☆/a></li>
<li><☆a href="./{getUrl("act','dispMemberOwnDocument','member_srl',$logged_info->member_srl)}">{$lang->cmd_view_own_document}<☆/a></li>
적용해보면 필요한 부분만 남은 것을 볼 수 있습니다.
이번에는 관리자만 관리자페이지 링크가 보이도록 해봅시다.
방금 붙여넣은 곳 아래에 다음 소스를 넣어줍니다.
※ ☆을 제거하고 바꾸어주세요.
<!--@if($logged_info->is_admin=="Y")-->
<li><☆a href="./{getUrl(",'module','admin')}" onclick="window.open(this.href);return false;">관리자페이지<☆/a></li>
<!--@end-->
그리고 다시 확인해보면 관리자의 경우에는
이렇게 관리자페이지 링크가 나타나며 클릭하면 새창으로 관리자페이지가 열립니다.
일반 회원이 접속시에는
이렇게 관리자페이지 링크가 나타나지 않습니다.
(방금 넣은 소스에 관리자페이지대신 {$lang->cmd_management}를 넣으면 관리가 나타납니다. 제가 보기에는 관리자페이지가 나은 것 같아서 일부러 넣지 않았습니다.)
아무튼 이런 식으로 완성이 되었군요. 쿨럭.