웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
홈페이지 화면을 구성하다보면 상황에 따라 변하는 컨텐츠가 있을경우 그것을 처리하기가 애매해 집니다.
우선 zbxe의 경우 로그인전과 후가 그 길리가 다르고, 이번에 소개할 좌측 로그인 회원 리스트의 경우에도 리스트가 많아지면 세로로 쭈욱 늘어나기 때문에 홈페이지가 보기 싫어질때가 있죠.
이번에 소개할것은 div를 이용하여 리스트가 길어질경우 스크롤로 처리하는 팁입니다.
우선 본팁은 VHAIN 님께서 올려주신 현재로그인회원 출력 위젯을 디자인적으로 처리하는 팁이며, 이자리를 빌어 다시한번 VHAIN님께 감사의 인사를 전합니다.
적용된 사이트는 http://jobdahan.net 좌측하단부분에 현재 이 위젯을 적용시켰습니다.
수정할 파일은 두가지...
/zbxe/widgets/login_member/skins/default/list.html 파일
기존에 팁을 아래와 같이 작성을 했는데 한부분 놓친것을 edgarkim 님께서 알려 주셨네요.
edgarkim 님께서 알려주신 팁입니다. 위 소스 말고 이 소스를 사용하시기 바랍니다. ^^
기존 파일에서 스크롤 부분을 처리하기 위해 <div id="login_list"></div> 로 리스트 출력 부분을 감싸줍니다.
그리고 div 속성에서 id 값을 css 파일에서 조정해 줍니다.
/zbxe/widgets/login_member/skins/default/css/normal.css 파일입니다.
#login_list 부분이 해당 div를 처리하는 부분이 되게고, overflow:auto; 이부분이 내용이 길어지면 스크롤로 보여주라는 것을 처리하는 소스가 되겠습니다.
자신의 홈페이지에 맞게 width와 height를 변경해서 사용하면 되겠죠.
그리고 스크롤 디자인을 위한 SCROLLBAR- 옵션이 따로 추가 되었습니다.
자신의 홈피에 맞게 원하는 컬러를 지정해서 사용하시면 되겠네요.^^
그럼 이쁜 홈피 꾸미시길....^^
좌측 로그인 회원 리스트가 많아지면 스크롤 처리
2008.01.29 12:02
![](https://xe1.xpressengine.com/files/attach/images/121/16448924/login_list.gif)
우선 zbxe의 경우 로그인전과 후가 그 길리가 다르고, 이번에 소개할 좌측 로그인 회원 리스트의 경우에도 리스트가 많아지면 세로로 쭈욱 늘어나기 때문에 홈페이지가 보기 싫어질때가 있죠.
이번에 소개할것은 div를 이용하여 리스트가 길어질경우 스크롤로 처리하는 팁입니다.
우선 본팁은 VHAIN 님께서 올려주신 현재로그인회원 출력 위젯을 디자인적으로 처리하는 팁이며, 이자리를 빌어 다시한번 VHAIN님께 감사의 인사를 전합니다.
적용된 사이트는 http://jobdahan.net 좌측하단부분에 현재 이 위젯을 적용시켰습니다.
수정할 파일은 두가지...
/zbxe/widgets/login_member/skins/default/list.html 파일
기존에 팁을 아래와 같이 작성을 했는데 한부분 놓친것을 edgarkim 님께서 알려 주셨네요.
<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 --> <!--@if($colorset=="normal"||!$colorset)--> <!--%import("css/normal.css")--> <!--@end--> <div class="mg"> {@$mem_cnt=0} <!--@foreach($widget_info->member_list as $key => $val)--> {@$mem_cnt++} <!--@end--> <!--@if($widget_info->title)--> <h2>{$widget_info->title}{$mem_cnt-1}명</h2> <!--@end--> <div id="login_list"> <ul> <!--@foreach($widget_info->member_list as $key => $val)--> <!--@if($val->user_id!='admin')--> <li> <div class="nick_name member_{$val->member_srl}">{htmlspecialchars($val->nick_name)}</div> </li> <!--@end--> <!--@end--> </ul> </div> </div>
edgarkim 님께서 알려주신 팁입니다. 위 소스 말고 이 소스를 사용하시기 바랍니다. ^^
<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 --> <!--@if($colorset=="normal"||!$colorset)--> <!--%import("css/normal.css")--> <!--@end--> <div class="mg"> {@$mem_cnt=0} <!--@foreach($widget_info->member_list as $key => $val)--> <!--@if($val->user_id!='admin')--> {@$mem_cnt++} <!--@end--> <!--@end--> <!--@if($widget_info->title)--> <h2>{$widget_info->title}{$mem_cnt}명</h2> <!--@end--> <div id="login_list"> <ul> <!--@foreach($widget_info->member_list as $key => $val)--> <!--@if($val->user_id!='admin')--> <li> <div class="nick_name member_{$val->member_srl}">{htmlspecialchars($val->nick_name)}</div> </li> <!--@end--> <!--@end--> </ul> </div> </div>
기존 파일에서 스크롤 부분을 처리하기 위해 <div id="login_list"></div> 로 리스트 출력 부분을 감싸줍니다.
그리고 div 속성에서 id 값을 css 파일에서 조정해 줍니다.
/zbxe/widgets/login_member/skins/default/css/normal.css 파일입니다.
#login_list {width:200px;height:120px; overflow:auto; SCROLLBAR-FACE-COLOR: #e7e7e7; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #f2f2f2; SCROLLBAR-3DLIGHT-COLOR: #f2f2f2; SCROLLBAR-ARROW-COLOR: #ff9900; SCROLLBAR-DARKSHADOW-COLOR: #ffffff } .mg { padding-bottom:15px; overflow:hidden; position:relative;} .mg h2 { font-size:1em; display:block; height:21px; padding:9px 0 0 9px; margin-bottom:4px; color:#000000; background:url(../images/normal/lineNotice.gif) no-repeat left bottom;} .mg ul { overflow:hidden; width:180px;} .mg ul li { white-space:nowrap; padding:3px 0 3px 10px; overflow:hidden; border-bottom:1px dashed #EEEEEE; color:#54564b;}
#login_list 부분이 해당 div를 처리하는 부분이 되게고, overflow:auto; 이부분이 내용이 길어지면 스크롤로 보여주라는 것을 처리하는 소스가 되겠습니다.
자신의 홈페이지에 맞게 width와 height를 변경해서 사용하면 되겠죠.
그리고 스크롤 디자인을 위한 SCROLLBAR- 옵션이 따로 추가 되었습니다.
자신의 홈피에 맞게 원하는 컬러를 지정해서 사용하시면 되겠네요.^^
그럼 이쁜 홈피 꾸미시길....^^
댓글 6
-
심원섭
2008.01.30 22:39
-
애니컴
2008.02.01 21:42
멋진 팁입니다~
추천 누르고 가요 -
edgarkim
2008.02.02 11:11
잘 사용하겠습니다.
관리자일 경우에는 접속자 현황에 표기가 안되게 구현했네요..(접속자 현황에서도 -1 을 하여 관리자가 접속한건 count 안되게 구현)
그런데, 관리자가 아닌경우에도 -1 명이 되어 한명 접속시에는 접속자 명수가 0명으로 보이게 되어 있네요..
이렇게 수정해서 사용하면 어떨까요? (빨간부분만 참고하시면 됩니다.)
<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->
<!--@if($colorset=="normal"||!$colorset)-->
<!--%import("css/normal.css")-->
<!--@end-->
<div class="mg">
{@$mem_cnt=0}
<!--@foreach($widget_info->member_list as $key => $val)-->
<!--@if($val->user_id!='admin')-->
{@$mem_cnt++}
<!--@end-->
<!--@end-->
<!--@if($widget_info->title)-->
<h2>{$widget_info->title}{$mem_cnt}명</h2>
<!--@end-->
<div id="login_list">
<ul>
<!--@foreach($widget_info->member_list as $key => $val)-->
<!--@if($val->user_id!='admin')-->
<li>
<div class="nick_name member_{$val->member_srl}">{htmlspecialchars($val->nick_name)}</div>
</li>
<!--@end-->
<!--@end-->
</ul>
</div>
</div> -
똑디
2008.02.03 14:20
그렇네요^^ 왜 빼먹었을까요? ㅋㅋ
내용 수정해서 다시 올렸습니다. 감사합니다. -
ㅠㅣㅕㄷ
2008.03.24 02:15
똑띠님
login_member skin을 아무리 찾아도 없네요
도와 주세요
감사 합니다 -
최태현913
2008.06.28 01:58
위젯 프로그램 자료실-현재 로그인한 사용자 출력 위젯 v0.1
제목 | 글쓴이 | 날짜 |
---|---|---|
bgm 넣을려고 프레임 나눴을때 가로스크롤바 해결방법. [12] | 또리♡485 | 2008.01.25 |
회원그룹별 제한된 서비스 구현을 위한 조건문 [5] | 똑디 | 2008.01.25 |
(모든)*.파일 UTF_8 ↔ EUC-KR
[4]
![]() | Capyou | 2008.01.25 |
불펌소스 ~! [6] | 해피데이1541 | 2008.01.28 |
홈페이지에 예쁜 날씨 배너를 달아보자!!!!
[3]
![]() | blue7376.myid.net | 2008.01.28 |
[수정] webzine 스타일을 이용한 링크게시판 만들기
[5]
![]() | 대암지기 | 2008.01.28 |
좌측 로그인 회원 리스트가 많아지면 스크롤 처리
[6]
![]() | 똑디 | 2008.01.29 |
날씨배너 600종류 입니다.(지역별75종X색상별8종)
![]() | 푸른커튼 | 2008.01.30 |
LI UL OL 이 페이지에서 적용이 안될경우 [1] | 찐빵아저씨 | 2008.01.30 |
flash <=> xe menu 연동 [7] | tsana | 2008.02.03 |
BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] | 푸른커튼 | 2008.02.05 |
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기
[15]
![]() | plruto | 2008.02.07 |
주소끝에 /zbxe 안적어도 홈페이지에 바로 들어오게 하는법?? [10] | 박태훈922 | 2008.02.07 |
아날로그 플래시 시계 10종류 (홈페이지, 블로그용)
![]() | 푸른커튼 | 2008.02.09 |
로그인후 보여줄 페이지 설정 [4] | 권인해 | 2008.02.11 |
회원가입 생일 필수로 입력받고, 관리자페이지 회원목록에 회원생일 출력하기 [10] | 대암지기 | 2008.02.11 |
제로보드용 플래시시계 위젯 설치방법
![]() | 푸른커튼 | 2008.02.12 |
전에 누군가 찾았던 것인데..새로고침시 현재페이지로 [2] | 강영곤 | 2008.02.14 |
인사말 랜덤추출 스크립트 [xe적용방법] [12] | 라싸 | 2008.02.18 |
[전면수정]회원가입시 기본 정보공개 여부 체크하기(1) 모듈부분 [5] | 대암지기 | 2008.02.20 |
감사합니다~~ 안그래도 제가 바꿔볼려고 하던 참인데... ^^