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(이미지주소);}
.bgPersonl_m {{width:200px;height:100px;background: url(이미지주소);}}
.bgPersonl_b {width:200px;height:10px;background: url(이미지주소);}}
와 같은 스타일시트 클래스명을 생성합니다.
그리고 각 div에 삽입합니다.
※ #bgPersonl_m 의 height 값은 알아서 주세요
<div class="bgPersonal_t"></div> 상단
<div class="bgPersonal_m"></div> 기존 로그인 부분이 이 안에 들어갑니다.
<div class="bgPersonal_b"></div> 하단
자, 여기서 login_form.xml 파일의 소스를 살펴봅시다.
<!-- colorset의 값에 따라 css 파일을 import 한다 -->
<!--@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-->
<!--@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는 한 곳에 한 번만 적어줘야합니다.
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 으로 화면에 보이지 않도록 해주어도 됩니다.
저는 아래와 같이 해주었습니다.
.box_login { background:url(../images/cyhome2/bg_personal_m.gif) #FFFFFE; }
border는 지우고 background를 추가시켜줬습니다.
그리고 bgPersonal_b와 죽 이어져야 하니깐 margin-bottom:10px; 는 지워줬습니다.
box_login에서 이 부분은 수정해주셔야합니다. margin-bottom은 말이죠.
안 그러면 마진값이 붙어서 아래 div와 떨어져보이거든요. 여기는 수정하고 지나가세요.
자, 이제 이렇게 완성이 되었습니다. 그런데 가만...... 확대해보겠습니다.
각 모서리에 의문의 #DDDDDD 선이 보입니다. 약간의 삽질을 했는데 원인은 모르겠고..
(아! 원인은 레이아웃 파일의 배경설정 때문이었네요. 여기서는 배경은 놔두지 않고 아래처럼 수정하는 방법으로 해결해보도록 합니다.)
.bgPersonal_t{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_t.gif)repeat-y #FFFFFF;border:0px;overflow:hidden;}
.bgPersonal_b{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_b.gif)no-repeat #FFFFFF;border:0px;overflow:hidden;}
.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 도 보시자면 아래와 같습니다.
.box_login { background:url(../images/cyhome2/bg_personal_m.gif) repeat-y #FFFFFE;}
자. 이렇게 해서 login_form.xml 파일은 완성~~~~~~~~~
이제 login_info.xml 로그인 후의 화면이 남아있는데
바빠서 다음 내용은 다음 글을 확인해주세요.