tab.gif

이와같이 탭이 오른쪽으로 정렬이 되면서 좌측엔 해당탭메뉴들을 대표하는 이미지 타이틀을 넣을수 있습니다.

레이아웃에 적용된 위젯코드는 아래와 같습니다.


undefined
   <!--나의작품-->   
   <img width="100%" height="100" src="/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="tab_newest_document" body="" skin="xe_official" colorset="normal" widget_cache="0" order_target="list_order" order_type="desc" duration_new="24" subject_cut_size="" thumbnail_type="crop" thumbnail_width="" thumbnail_height="" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" view_category="on" 
   mid_list="vj,ca,camp" 
   design_top="/zbxe/images/moviegallery_title.gif" 
   widget_sequence="598430" />
   <br>

design_top="/zbxe/images/moviegallery_title.gif"  이부분이 이미지 타이틀을 출력하는 부분입니다.

즉, 타이틀 이미지가 위 경로에 업로드 되어야 하겠지요.


moviegallery_title.gif

이런형태로 이미지를 만들어서 사용했습니다.

이미지 높이 부분은 동일하게 제작하시구요, 넓이는 해당 탭메뉴에 지장을 안주는 범위로 만드시길..

작업한 psd 파일도 함께 올립니다.


기존 위젯소스를 변경해서 작업한것이기때문에 만약 지금 사용하고 계신 탭위젯을 덮어쓰도 상과없다면 덮어쓰셔서 업로드 하시구요, 기존 위젯과 다른 스킨으로 사용하고 싶으시다면 위젯폴더명과 class파일명을 변경해서 사용하시길..

뭔말인지 잘 모르겠다 싶으시면 그냥 위젯폴더에 업로드(덮어쓰세요.^^) 하시면 됩니다.


최신글 위젯의 경우 상단, 배경, 하단을 이미지로 꾸밀수 있게 처리를 했었는데
탭위젯은 그냥 지금처럼 타이틀 이미지만 넣어서 사용하도록 했습니다.


이 게시물을..

잡다한 몽상백서 똑띠입니다.
http://jobdahan.net  
zbXE 동영상 강좌 및 포토샵 강좌, 일러스트 강좌와 함께
쇼핑몰 창업 정보도 함께 공유합니다.