PXE 상품에 대한 기술지원 코너
총 1714 건
PXE Candy Shop
캔디샵 텝 메뉴 위젯 + 카테고리 관련 질문입니다.
- 이정주
- 조회 수 3897
- 댓글 수 9
- 추천 수 0
| 테스트 URL | |
|---|---|
| XE 코어 버전 | |
| 웹브라우저 | |
| 상태 |
안녕하세요 현화님.
1.
캔디샵 텝 메뉴 위젯에 관련하여 질문드립니다.
아래 사이트의 주 카테고리 3번째에서
텝 메뉴 위젯 제목을 보이지 않게 하고 싶은데요(기사, 미디어),
어떻게 해야 할까요~?
http://philosophy.ne.kr/zbxe/
2.
카테고리를 추가하고 싶은데요,
추가한 부분이 이상하게 테이블을 벗어나네요;;
소스는
<li><a href="#tabNews09">기사,미디어</a></li>
<li><a href="#tabNews10">철학자 Interview</a></li>
<li><a href="#tabNews11">에세이/칼럼</a></li>
<li><a href="#tabNews12">자유게시판</a></li>
<li><a href="#tabNews130">갤러리</a></li>
<li><a href="#tabNews140">설문조사</a></li>
<li><a href="#tabNews150">UCC</a></li>
<li><a href="#tabNews160">VJ</a></li>
(생략)
<div id="tabNews130">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="106" />
</div>
<div id="tabNews140">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="106" />
</div>
<div id="tabNews150">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="3119" />
</div>
<div id="tabNews160">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="3120" />
이런식으로 수정했구요.
바르게 수정한 것 같은데.. .뭔가 더 수정해야 할 부분이 있는 건가요~?
IP *.141.224.107
1.
캔디샵 텝 메뉴 위젯에 관련하여 질문드립니다.
아래 사이트의 주 카테고리 3번째에서
텝 메뉴 위젯 제목을 보이지 않게 하고 싶은데요(기사, 미디어),
어떻게 해야 할까요~?
http://philosophy.ne.kr/zbxe/
2.
카테고리를 추가하고 싶은데요,
추가한 부분이 이상하게 테이블을 벗어나네요;;
소스는
<li><a href="#tabNews09">기사,미디어</a></li>
<li><a href="#tabNews10">철학자 Interview</a></li>
<li><a href="#tabNews11">에세이/칼럼</a></li>
<li><a href="#tabNews12">자유게시판</a></li>
<li><a href="#tabNews130">갤러리</a></li>
<li><a href="#tabNews140">설문조사</a></li>
<li><a href="#tabNews150">UCC</a></li>
<li><a href="#tabNews160">VJ</a></li>
(생략)
<div id="tabNews130">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="106" />
</div>
<div id="tabNews140">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="106" />
</div>
<div id="tabNews150">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="3119" />
</div>
<div id="tabNews160">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" list_count="6" duration_new="24" subject_cut_size="50" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="3120" />
이런식으로 수정했구요.
바르게 수정한 것 같은데.. .뭔가 더 수정해야 할 부분이 있는 건가요~?
댓글
9 건
댓글 닫기
댓글 보기
WTA전체적으로 셋팅은 참 잘 되어 있군요 사이트가. 먼저 탭 메뉴 같은 경우에는 아예 텝 메뉴 위젯폴더를 하나 복사하시고 위에 제목 출력되는 부분의 코드를 삭제해버려서 별도의 위젯으로 운용하는게 가장 좋은 방법 같네요. 그 위젯에 보면 코드 맨 윗줄에 아래와 같은 코드가 있는데 아마 이 부분을 날려버리면 위에 탭 제목부가 날아갈 것으로 보입니다.
그리고 새로운 카테고리 추가는 다 잘 하신거 같은데 새로 만든 카테고리에 대한 CSS 정의가 빠진 것 같네요. 새로 만든 카테고리 번호 130, 140, 150, 160을 CSS 파일에서 정의를 해줘야 아마 제자리를 찾아 갈 듯 합니다. 2col.css에 보면 아래와 같은 코드가 있습니다.
여기에 추가를 해주면 되니까 아마 아래 처럼 수정을 하면 자리를 찾지 않을까 싶네요
위와 같이 새로 만든 카테고리의 텝 아이디를 여기에서 추가해 주면 됩니다. 앞으로 계속 추가할 때도 마찬가지일 것이고요
<div class="tabBox">
<!--@foreach($tab_list as $key => $val)-->
<div class="tab <!--@if(!$_checked)-->on{@ $_checked = true;}<!--@end-->" id="tab_{$_id_prefix}_{$key}" onmouseover="overTab(this);"><div><a href="{getUrl('','mid',$val->mid)}">{htmlspecialchars($val->browser_title)}</a></div></div>
<!--@end-->
<div class="clear"></div>
</div>그리고 새로운 카테고리 추가는 다 잘 하신거 같은데 새로 만든 카테고리에 대한 CSS 정의가 빠진 것 같네요. 새로 만든 카테고리 번호 130, 140, 150, 160을 CSS 파일에서 정의를 해줘야 아마 제자리를 찾아 갈 듯 합니다. 2col.css에 보면 아래와 같은 코드가 있습니다.
.contentsBox2 #tabNews09,#tabNews10,#tabNews11,#tabNews12 { position:absolute; top:20px; left:148px; }여기에 추가를 해주면 되니까 아마 아래 처럼 수정을 하면 자리를 찾지 않을까 싶네요
.contentsBox2 #tabNews09,#tabNews10,#tabNews11,#tabNews12, #tabNews130, #tabNews140, #tabNews150, #tabNews160 { position:absolute; top:20px; left:148px; }위와 같이 새로 만든 카테고리의 텝 아이디를 여기에서 추가해 주면 됩니다. 앞으로 계속 추가할 때도 마찬가지일 것이고요
아 그리고 CS 레이아웃은 XHTML이나 CSS, XE 모든 것에 대해 어느정도 지식이 있어야 완전히 활용하기가 가능한데 정주님은 상당히 안정적으로 설치를 하셨네요
감사합니다 현화님! 레이아웃이 관리하기 편하게 구성된 덕택이죠^^;;
아, 그런데 텝 메뉴 위젯폴더를 추가해서 사용하는 방식이요,
1) tab_newest_document 폴더를 복사 후 -> tab_newest_document2 이름을 가진 폴더를 생성
2) tab_newest_document.class.php 를 tab_newest_document2.class.php 로 변경
3) tab_newest_document2.class.php 소스에서 class tab_newest_document extends WidgetHandler { 를 class tab_newest_document2 extends WidgetHandler { 로 바꿈
이렇게 하는 거 아니었던가요~?
시도해보는 데 잘 안 되네요..ㅜ
아, 그런데 텝 메뉴 위젯폴더를 추가해서 사용하는 방식이요,
1) tab_newest_document 폴더를 복사 후 -> tab_newest_document2 이름을 가진 폴더를 생성
2) tab_newest_document.class.php 를 tab_newest_document2.class.php 로 변경
3) tab_newest_document2.class.php 소스에서 class tab_newest_document extends WidgetHandler { 를 class tab_newest_document2 extends WidgetHandler { 로 바꿈
이렇게 하는 거 아니었던가요~?
시도해보는 데 잘 안 되네요..ㅜ
아 아닙니다. tab_newest_document.class.php와 같은 파일들은 XE 기본 파일이기 때문에 건드리면 안됩니다. widgets/tab_newest_document/skins 폴더에 보면 제가 배포한 CS_official이라는 텝방식 최신글 위젯 스킨이 있습니다. 이 폴더를 CS_official2등과 같이 이름을 바꾼후에 list.html에서 위에서 설명한 부분을 삭제하시고, skin.xml을 열어서 <title xml:lang="ko">PXE Candy Shop 탭 방식 최근글 출력 기본 스킨</title> 이 부분을 알기 쉬운 제목으로(뒤에 2를 붙인다던지)하여 저장한 후에 사용하시라는 의미였습니다. 한마디로 제가 배포한 텝방식 최신글 위젯을 복사본을 하나 더 만들어서 변경하신 후에 관리자 설정의 위젯에서 불러들여 코드를 생성하시라는 뜻이었습니다.
그렇군요~ 그런데 저도 처음에는 스킨을 하나 더 만든다는 생각으로 시도 했습니다만(CS_official2), 이상하게도 깨져나올 뿐더러 CS_official 스킨을 적용한 텝 메뉴에도 영향을 주더라구요! (www.philosophy.ne.kr/zbxe)
물론 위에서 말씀해 주셨던 텝 메뉴를 보이지 않게 하는 방법은 올바른 것 같습니다. CS_official2를 적용하지 않고 CS_official만을 적용했을 때, 다시 말해 CS_official 에서의 list.html을 위와 같이 수정한 결과 제가 원하는 형태로 출력 되었으니까요. 그런데 CS_official 과 CS_official2 를 동시에 적용하고자 했을 때 (전자는 주카테고리1에, 후자는 주카테고리3에) 문제가 생깁니다.ㅜ
이전에도 이와 같은 문제를 겪은 바가 있었고 제가 댓글에서 제시했던 대로 하라는 팁을 받았었던 적이 있어서 그렇게 해봤습니다만, {그때는 됐었던 것 같은데;;}여전히 안 되네요..ㅜ
도대체 무엇이 문제일까요?..ㅜㅜ
물론 위에서 말씀해 주셨던 텝 메뉴를 보이지 않게 하는 방법은 올바른 것 같습니다. CS_official2를 적용하지 않고 CS_official만을 적용했을 때, 다시 말해 CS_official 에서의 list.html을 위와 같이 수정한 결과 제가 원하는 형태로 출력 되었으니까요. 그런데 CS_official 과 CS_official2 를 동시에 적용하고자 했을 때 (전자는 주카테고리1에, 후자는 주카테고리3에) 문제가 생깁니다.ㅜ
이전에도 이와 같은 문제를 겪은 바가 있었고 제가 댓글에서 제시했던 대로 하라는 팁을 받았었던 적이 있어서 그렇게 해봤습니다만, {그때는 됐었던 것 같은데;;}여전히 안 되네요..ㅜ
도대체 무엇이 문제일까요?..ㅜㅜ
페이지 수정을 통해서는 두 텝 메뉴가 동시에 잘 작동되는데요, 레이아웃(메인)을 통해서는 잘 적용되지가 않네요.!
해결했습니다!!
1.
<div class="tabBox">
<!--@foreach($tab_list as $key => $val)-->
<div class="tab <!--@if(!$_checked)-->on{@ $_checked = true;}<!--@end-->" id="tab_{$_id_prefix}_{$key}" onmouseover="overTab(this);"><div><a href="{getUrl('','mid',$val->mid)}">{htmlspecialchars($val->browser_title)}</a></div></div>
<!--@end-->
<div class="clear"></div>
</div>
-> 위 소스를 몽땅 지우고 적용하니까 탭 메뉴 출력시 깨져보이는 것이었더군요. 노란색 부분만 지우고 적용하니 깨지지 않고 잘 적용되었습니다.
2.
이상하게도 CS_official2가 적용된 탭 메뉴를 수정하기 위해 default.css 파일을 수정하면 CS_official 이 적용된 탭 메뉴까지도 수정이 되더군요. CS_official 의 default.css 파일을 수정하면 CS_official이 적용된 탭 메뉴는 수정되지 않는데도 말이죠. 꼭 두 스킨이 적용된 탭 메뉴가 함께 움직이는 것 같았습니다. 그러다보니 각각 외관상 적당한 포지션을 갖기가 어려웠는데요, 문득 편법(?)을 생각해낸 것이 2col.css 파일을 수정하는 것이었습니다. 제목이 노출되는 텝 메뉴는 { position:absolute; top:38px; left:148px; } 와 같이 그대로 둔 반면, 제목을 노출시키지 않는 텝 메뉴는 { position:absolute; top:0px; left:148px; } 와 같이 수정한 것이지요. 그 결과 각각 외관상 고유한 포지션을 갖을 수 있게 되었습니다! 이 방법을 이용하니 #tabNews 별로 각각 고유한 포지션을 갖게 될 수 있더군요!!
이것 때문에 정말 막막했었는데... 그래도 해결되니 기쁩니다^^;;
(그런데 도대체 왜 두 스킨이 하나처럼 적용되었던 걸까요-_-흠...)
1.
<div class="tabBox">
<!--@foreach($tab_list as $key => $val)-->
<div class="tab <!--@if(!$_checked)-->on{@ $_checked = true;}<!--@end-->" id="tab_{$_id_prefix}_{$key}" onmouseover="overTab(this);"><div><a href="{getUrl('','mid',$val->mid)}">{htmlspecialchars($val->browser_title)}</a></div></div>
<!--@end-->
<div class="clear"></div>
</div>
-> 위 소스를 몽땅 지우고 적용하니까 탭 메뉴 출력시 깨져보이는 것이었더군요. 노란색 부분만 지우고 적용하니 깨지지 않고 잘 적용되었습니다.
2.
이상하게도 CS_official2가 적용된 탭 메뉴를 수정하기 위해 default.css 파일을 수정하면 CS_official 이 적용된 탭 메뉴까지도 수정이 되더군요. CS_official 의 default.css 파일을 수정하면 CS_official이 적용된 탭 메뉴는 수정되지 않는데도 말이죠. 꼭 두 스킨이 적용된 탭 메뉴가 함께 움직이는 것 같았습니다. 그러다보니 각각 외관상 적당한 포지션을 갖기가 어려웠는데요, 문득 편법(?)을 생각해낸 것이 2col.css 파일을 수정하는 것이었습니다. 제목이 노출되는 텝 메뉴는 { position:absolute; top:38px; left:148px; } 와 같이 그대로 둔 반면, 제목을 노출시키지 않는 텝 메뉴는 { position:absolute; top:0px; left:148px; } 와 같이 수정한 것이지요. 그 결과 각각 외관상 고유한 포지션을 갖을 수 있게 되었습니다! 이 방법을 이용하니 #tabNews 별로 각각 고유한 포지션을 갖게 될 수 있더군요!!
이것 때문에 정말 막막했었는데... 그래도 해결되니 기쁩니다^^;;
(그런데 도대체 왜 두 스킨이 하나처럼 적용되었던 걸까요-_-흠...)
두 스킨이 함께 수정되는 것은 아마 두 위젯에서 모두 똑같은 이름의 CSS 이름을 사용하고 있어서 그런 것 같습니다. CS_official 속의 default.css와 CS_official2 속의 default.css에 정의 된 CSS의 이름들이 서로 동일하니까 브라우저가 두 스타일시트를 불러와놓고는 어떤것을 적용시켜야 하는지 헤매서 그러지 않나 싶군요. 이런 류의 질문은 XE 전반 질문에 속하기 떄문에 원래 제가 답변을 안하기 떄문에 확실히 해보지 않고 팁 정도로만 알려드려서 아마 좀 힘드셨을 겁니다.
제 생각엔 2col.css의 정의는 다시 원상복구를 해놓고(왜냐하면 다른 브라우저나 다른 조건이 생겼을 때 오작동이 생길수도 있으므로), 새로 복사한 CS_official2의 list.html과 default.css를 수정하여 사용하는 편이 안전 할 것 같습니다. 예를들면 CS_official2의 list.html을 열어서 맨 CSS의 가장 부모뻘 되는 클래스 이름부터 바꿔놓고.. 아래처럼 말이죠.
그담에 CSS 파일을 열어서 맨 앞에 붙은 부모뻘 클래스 이름을 전부 바꿔주면 되겠죠. 아래처럼요.
위에서는 공간을 너무 많이 잡아서 조금만 바꿨지만 CSS 파일에 있는 모든 .tabWidget의 이름을 .tabWidget2로 바꾸면 이제 CS_official과 서로 다른 이름의 클래스를 사용하니 아마 충돌하지 않고 서로 독립적으로 운용되겠죠. 어쩌다보니 위젯 하나 새로 만드는 방법까지 알려드리게 됐네요 ㅋ
제 생각엔 2col.css의 정의는 다시 원상복구를 해놓고(왜냐하면 다른 브라우저나 다른 조건이 생겼을 때 오작동이 생길수도 있으므로), 새로 복사한 CS_official2의 list.html과 default.css를 수정하여 사용하는 편이 안전 할 것 같습니다. 예를들면 CS_official2의 list.html을 열어서 맨 CSS의 가장 부모뻘 되는 클래스 이름부터 바꿔놓고.. 아래처럼 말이죠.
<div class="tabWidget2">
그담에 CSS 파일을 열어서 맨 앞에 붙은 부모뻘 클래스 이름을 전부 바꿔주면 되겠죠. 아래처럼요.
.tabWidget2 { width:532px; overflow:hidden; margin-bottom: 20px; }
.tabWidget2 .tabBox { height:27px; z-index:1; }
.tabWidget2 .tabBox a { text-decoration:none; font:9pt 돋움; letter-spacing:-1px; }
.tabWidget2 .tab { position:relative; left:65px; top:5px; margin-right:4px; float:left; cursor:pointer; z-index:2; height:25px; }
.tabWidget2 .on { position:relative; top:5px; margin-right:4px; float:left; cursor:pointer; z-index:2; height:25px; }위에서는 공간을 너무 많이 잡아서 조금만 바꿨지만 CSS 파일에 있는 모든 .tabWidget의 이름을 .tabWidget2로 바꾸면 이제 CS_official과 서로 다른 이름의 클래스를 사용하니 아마 충돌하지 않고 서로 독립적으로 운용되겠죠. 어쩌다보니 위젯 하나 새로 만드는 방법까지 알려드리게 됐네요 ㅋ
아! 그런 방법이 있었군요~! 감사합니다! 훨씬 안정적인 홈페이지가 될 것 같네요~!
여러모로 홈페이지 성격에 딱 맞아서 너무 좋습니다, 캔디샵^^;;
여러모로 홈페이지 성격에 딱 맞아서 너무 좋습니다, 캔디샵^^;;