웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
상단로그인..?
2008.04.15 15:19
제 사이트에 사용중인 상단로그인 소스입니다.
미리보기 - http://www.webmini.net
로그인전
![logout.gif logout.gif](http://www.webmini.net/files/attach/images/14136/061/029/logout.gif)
로그인후
![login.gif login.gif](http://www.webmini.net/files/attach/images/14136/061/029/login.gif)
물론 위젯으로 만들어 사용해도 되나, 저같은 경우는 레이아웃에 직접소스를 넣었습니다.
위와 같이 구현하는 방법은 다음과 같습니다.
1. 사용하시는 레이아웃의 layout.html 파일을 열고 header 부분 원하는 위치에 아래의 소스를 넣습니다.
<div id="mini_gnb">
<ul>
<!--@if($logged_info)-->
<li><strong>{$logged_info->nick_name}</strong>님 반갑습니다.</li>
<li><a href="{getUrl('act','dispMemberLogout')}"><img src="./images/{$layout_info->colorset}/btn_mini_logout.gif" alt="로그아웃" class="bul" /></a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">마이페이지</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLoginForm')}"><img src="./images/{$layout_info->colorset}/btn_mini_login.gif" alt="로그인" class="bul" /></a></li>
<!--@end-->
<!--@if(!$logged_info)-->
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<!--@end-->
<li><a href="/customer">고객센터</a></li>
<li><a href="/sitemap">전체보기</a></li>
</ul>
</div>
위에 고객센터와 전체보기,이미지주소는 자신의 사이트에 맞는 주소를 넣으시면 됩니다.
<div id="header">와 <div id="language"> 사이에 넣으시면 되겠네요.
다음은 해당 레이아웃 css 파일을 여시고 아래의 소스를 삽입합니다.
#mini_gnb {margin:0; text-align:right;}
#mini_gnb ul {padding:4px 15px 0 0;}
#mini_gnb li {display:inline; list-style:none; padding:0 1px 0 4px; font-size:11px; white-space:nowrap;}
#mini_gnb li strong {color:#555;}
#mini_gnb li a {letter-spacing:-1px;}
#mini_gnb li a:hover {text-decoration:underline;}
#mini_gnb img.bul {vertical-align:middle;}
스타일시트 같은경우도 자신의 사이트에 맞게 조금씩 수정을 하셔야 할듯합니다.
응용해서 사용해 보시길바랍니다.
ps. 똑띠님 사이트와 비슷한 방식이긴 합니다만, 링크부분을 똑띠님 사이트처럼 할경우 마크업 유효성 검사에서 에러가 납니다. 물론 유효성검사가 의미가 있는건 아니지만 위에 방식이 맞는듯해서 올려봅니다.^^
미리보기 - http://www.webmini.net
로그인전
![logout.gif logout.gif](http://www.webmini.net/files/attach/images/14136/061/029/logout.gif)
로그인후
![login.gif login.gif](http://www.webmini.net/files/attach/images/14136/061/029/login.gif)
물론 위젯으로 만들어 사용해도 되나, 저같은 경우는 레이아웃에 직접소스를 넣었습니다.
위와 같이 구현하는 방법은 다음과 같습니다.
1. 사용하시는 레이아웃의 layout.html 파일을 열고 header 부분 원하는 위치에 아래의 소스를 넣습니다.
<div id="mini_gnb">
<ul>
<!--@if($logged_info)-->
<li><strong>{$logged_info->nick_name}</strong>님 반갑습니다.</li>
<li><a href="{getUrl('act','dispMemberLogout')}"><img src="./images/{$layout_info->colorset}/btn_mini_logout.gif" alt="로그아웃" class="bul" /></a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">마이페이지</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLoginForm')}"><img src="./images/{$layout_info->colorset}/btn_mini_login.gif" alt="로그인" class="bul" /></a></li>
<!--@end-->
<!--@if(!$logged_info)-->
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<!--@end-->
<li><a href="/customer">고객센터</a></li>
<li><a href="/sitemap">전체보기</a></li>
</ul>
</div>
위에 고객센터와 전체보기,이미지주소는 자신의 사이트에 맞는 주소를 넣으시면 됩니다.
<div id="header">와 <div id="language"> 사이에 넣으시면 되겠네요.
다음은 해당 레이아웃 css 파일을 여시고 아래의 소스를 삽입합니다.
#mini_gnb {margin:0; text-align:right;}
#mini_gnb ul {padding:4px 15px 0 0;}
#mini_gnb li {display:inline; list-style:none; padding:0 1px 0 4px; font-size:11px; white-space:nowrap;}
#mini_gnb li strong {color:#555;}
#mini_gnb li a {letter-spacing:-1px;}
#mini_gnb li a:hover {text-decoration:underline;}
#mini_gnb img.bul {vertical-align:middle;}
스타일시트 같은경우도 자신의 사이트에 맞게 조금씩 수정을 하셔야 할듯합니다.
응용해서 사용해 보시길바랍니다.
ps. 똑띠님 사이트와 비슷한 방식이긴 합니다만, 링크부분을 똑띠님 사이트처럼 할경우 마크업 유효성 검사에서 에러가 납니다. 물론 유효성검사가 의미가 있는건 아니지만 위에 방식이 맞는듯해서 올려봅니다.^^
태그 연관 글
- [2019/10/20] 묻고답하기 소셜xe 오류이후 관리자 로그인 기능이 사라졌습니다.
- [2019/03/17] 묻고답하기 제 사이트가 갑자기 로그인이 먹통입니다.
- [2017/12/20] 묻고답하기 로그인이 되지 않습니다. *3
- [2017/07/20] 묻고답하기 이거 로그인 대문? 어떻게 하나요ㅜㅜ 봐도 모르겠어요ㅜㅜ *1
- [2016/07/16] 묻고답하기 하나의 XE계정으로 여러 사이트에서 로그인 할 수 있는 방법이 없을까요? *1
댓글 10
-
J..
2008.04.15 17:21
와 좋은정보 감사합니다. ^^ -
315
2008.04.15 21:16
너무 너무 멋진 팁입니다.
알려주셔서 감사합니다.
잘사용하겠습니다. -
우와~~~ 이거 알고 싶었는데, 정말 감사합니다. 쌩유~~~~!!!
-
빽짱구
2008.04.16 09:01
하나 빠진게 있었군요. 이미지를 불러올시 가로 정렬을 위해 저같은 경우는 .bul 이라는 class 를 불러들여서 사용하고 있습니다.
저처럼 로그인/로그아웃을 이미지로 사용할시 해당스타일시트에 .bul {vertical-align:middle;} 를 추가후 해당 이미지 소스에 .bul 을 호출하시면 됩니다. -
숙지황
2008.04.20 23:02
자료 감사 합니다.
늘 고마움을 생각 하며 쓰겠읍니다.
방문하여 눌러주는 센스 을 발휘하고 왔읍니다.
추천 한방~~~
겻들입니다. -
궁금이
2008.04.25 17:23
로그인(이미지) 와 그 옆으로 마이페이지 , 고객센터 전체보기, 가 있는데......
이미지와...그옆 글자들 높이 안 맞아 떨어지는데...
이미지를 약간 아래도 내린다던가.....텍스트를 약간 위로 올리는 방법 없나요????????????/ -
빽짱구
2008.04.27 10:06
위에 제가 남긴 댓글을 보심이... .bul {vertical-align:middle;} 추가후 <img src="이미지" alt="" class="bul">
-
제 홈페이지에도 적용하고 싶응데 도무지 어케 수정해야 할지 모르겠습니다.
한번만 봐주시면 감사하겠습니다. 노프레임으로 만들었고
www.webk.co.kr/webk/ 에 php페이지들이 몰려있고 제로보드는www.webk.co.kr/webk/zbxe 에 들어있습니다.
사이트는 http://www.webk.co.kr 입니다. -
bncPlan
2008.07.08 23:19
감사합니다, 추천도 했습니다 -
월잉
2009.08.11 15:51
감사합니다!
근데 제가 왕초보라서 ㅠㅠ 저 위의 이미지처럼 나오게 하려면 어떻게 해야 하는지 자세히 알려주실 수 없나요?
그리고 포인트도 같이 나오게 하고 싶은데, 어떻게 수정해야 하는 지 알려주심 감사하겠습니다!!!!
제목 | 글쓴이 | 날짜 |
---|---|---|
좁은폭의 레이아웃을 쓰시는 분들을 위하여 (게시판 제목부분 깔끔하게 만들기)
[5]
![]() | gajagu | 2008.03.20 |
사이트 주소로 접속했을때 XE폴더로 이동하기 #2 [15] | 베니 | 2008.03.28 |
로그인풀림방지 - 자동 www 붙이는 다른 방법 [23] | RainSky | 2008.03.28 |
양력/음력DB 홈페이지에 사용하기 [2] | 감뿌리 | 2008.03.29 |
플래시로 페이지에 랜덤 이미지 돌리기 [3] | ☜ TeRy ☞ | 2008.04.04 |
최근 이미지 목록 + 라이트박스
[6]
![]() | 베니 | 2008.04.04 |
사각박스 코너를 이미지없이 둥글게 만드는법 [5] | 느까끼 | 2008.04.07 |
외부페이지에서 매개변수 사용하기 [2] | JnCsoft | 2008.04.07 |
플래시 컨트럴 활성화하라는 메시지 없애기
[4]
![]() | 달구벌 | 2008.04.08 |
레이아웃수정시 참고할 zbXe레이아웃스킨의 css와 layout 상관관계(1.0.0 기본스킨)
[21]
![]() | 갯가 | 2008.04.08 |
제로보드 설치 후 뭘 어떻해야 할지 깜깜할때 | dharma0999 | 2008.04.09 |
[3-1차 수정]확장변수 자유롭게 내 마음대로 게시글 리스트에 표현 합시다!![ver1.0.1]
[16]
![]() | 대암지기 | 2008.04.09 |
404 에러 페이지를 만들어 보자 [2] | hangoon | 2008.04.11 |
최신 댓글부터 역순으로 정렬하기 [5] [1] | 쏘프티 | 2008.04.11 |
사이트 주소 또는 title 고정시키기 [6] | 하늘(skycheer) | 2008.04.12 |
상단로그인..? [10] | 빽짱구 | 2008.04.15 |
관리자 로그인시 원하는걸 보여주자 [5] | 빽짱구 | 2008.04.15 |
엑소버드 음악 제로보드XE에 구겨넣기... [8] | artlab | 2008.04.17 |
글 순서 바꾸기 임시방편 [6] | 장운주 | 2008.04.18 |
졸졸이 스토커 가두어보기 2탄(보드우측에 포함된 것처럼)
[1]
![]() | 갯가 | 2008.04.26 |