게시판 카테고리 탭 형식으로 만들기
3,271
2015.04.21 14:24
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=103 주소복사
본문
"이윰"님께서 올려주신 카테고리 탭 형식으로 보여주기를 어줍짢은 실력으로 css를 포함 수정해 보았습니다.
- 게시판 목록 최상단에 위 이미지와 같이 카테고리가 보여지게 됩니다. -
각 게시판 스킨 폴더 list.skin.html을 열어 <!--{* 게시판 카테고리 시작 *}--> 을 찾고 다음 소스을 수정합니다.
수정 전
<!--{* 게시판 카테고리 시작 *}-->
<!--{?_is_category}-->
<script>
// 카테고리 이동
function category_view(sca) {
if(sca) var url = "{_category_href}&sca="+sca;
else var url = "{_category_href}";
$(location).attr('href',url);
return false;
}
</script>
<nav>
<h5><strong class="color-red">{board.bo_subject}</strong> 카테고리</h5>
<div class="row col-sm-4">
<select name="ca_name" id="ca_name" required class="form-control" onchange="return category_view(this.value);">
<option value="">전체</option>
<!--{@ _bocate}-->
<option value="{.ca_sca}" {? _decode_sca == .ca_name}selected{/}>{.ca_name}</option>
<!--{/}-->
</select>
</div>
<div class="clearfix"></div>
</nav>
<div class="margin-hr-10"></div>
<!--{/}-->
<!--{* 게시판 카테고리 끝 *}-->
수정 후
<!--{* 게시판 카테고리 시작 *}-->
<!--{?_is_category}-->
<div class="tab-cart">
<div class="margin-hr-10"></div>
<div class="row col-sm-12">
<ul class="nav nav-tabs">
<li class="{?!_decode_sca}active{/}">
<a href="{_category_href}">전체</a>
</li>
<!--{@ _bocate}-->
<li class="{? _decode_sca == .ca_name}active{/}">
<a href="{_category_href}&sca={.ca_sca}">{.ca_name}</a>
</li>
<!--{/}-->
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="margin-hr-10"></div>
<!--{/}-->
<!--{* 게시판 카테고리 끝 *}-->
카테고리 분류 모양을 설정하는 "tab-cart" 클래스를 정의하기 위해 eyoom/theme/설치된 테마/css/custom.css 을 열고 다음 소스를 삽입합니다.
/*Tabs Cart*/
.tab-cart .nav-tabs {
border: none;
background: none;
}
.tab-cart .nav-tabs a {
font-size: 14px;
padding: 5px 13px;
}
.tab-cart .nav-tabs > .active > a,
.tab-cart .nav-tabs > .active > a:hover,
.tab-cart .nav-tabs > .active > a:focus {
color: #fff;
border: none;
background: #e33334;
}
.tab-cart .nav-tabs > li > a {
border: none;
}
.tab-cart .nav-tabs > li > a:hover {
color: #fff;
background: #e33334;
}
.tab-cart .tab-content {
padding: 10px 0;
}
.tab-cart .tab-content img {
margin-top: 4px;
margin-bottom: 15px;
}
.tab-cart .tab-content img.img-tab-space {
margin-top: 7px;
}
추가적으로 게시판 리스트 목록 제목 앞에 카테고리를 표시하지 않는 방법입니다.
수정 전
<!--{? _is_category && .ca_name}-->
<a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a>
수정 후
<!--{? _is_category && .ca_name}-->
<!-- <a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a> -->
1
좋아요!
7
레벨 17
경험치 28,938
Progress Bar 52%
- 가입일 : 2015-02-26 22:28:15
- 서명 :
- 자기소개 :
Total 123건 1 페이지
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
|---|---|---|---|---|---|
| 123 |
이윰EGG
|
2016.08.24 | 3,795 | 0 | |
| 122 |
절대섹쉬꽃미남
|
2016.08.12 | 3,064 | 1 | |
| 121 |
그림자밟기
|
2016.03.26 | 1,656 | 0 | |
| 120 |
그림자밟기
|
2016.03.26 | 1,508 | 1 | |
| 119 |
l2zeo
|
2016.01.27 | 1,722 | 0 | |
| 118 |
수퍼개미
|
2015.10.27 | 2,638 | 0 | |
| 117 |
l2zeo
|
2015.10.26 | 9,605 | 0 | |
| 116 |
l2zeo
|
2015.10.26 | 2,795 | 0 | |
| 115 |
shadow
|
2015.10.06 | 5,424 | 1 | |
| 114 |
shadow
|
2015.09.21 | 1,705 | 0 | |
| 113 |
shadow
|
2015.09.20 | 1,763 | 1 | |
| 112 |
l2zeo
|
2015.09.18 | 6,942 | 0 | |
| 111 |
shadow
|
2015.09.17 | 1,295 | 1 | |
| 110 |
shadow
|
2015.09.17 | 2,311 | 0 | |
| 109 |
shadow
|
2015.08.17 | 3,372 | 1 | |
| 108 |
shadow
|
2015.07.30 | 3,074 | 1 | |
| 107 |
암스원
|
2015.07.20 | 3,831 | 1 | |
| 106 |
이윰넷
|
2015.07.08 | 3,877 | 1 | |
| 105 |
갓구운빵
|
2015.07.03 | 1,966 | 0 | |
| 104 |
암스원
|
2015.07.01 | 3,546 | 2 |
댓글목록
비즈팔님의 댓글
좋은 자료 감사합니다.
대충 만들어 사용중인데 깔끔하게 잘 정리해 주셨네요.^^
축하합니다. 첫댓글 포인트 93포인트를 획득하였습니다.
축하합니다. 행운의 포인트 47포인트를 획득하였습니다.
티보리님의 댓글
유용한 정보 감사합니다.
선인장님의 댓글
제일 위에 수정한 부분 이윰님은
<!--{* 게시판 카테고리 시작 *}--> <!--{?_is_category}--> <nav> <h5><strong class="color-red">{board.bo_subject}</strong> 카테고리</h5> <div class="row col-sm-4"> <ul class="nav-tabs"> <li class="{?!_decode_sca}active{/}"> <a href="{_category_href}">전체</a> </li> <!--{@ _bocate}--> <li class="{? _decode_sca == .ca_name}active{/}"> <a href="{_category_href}&sca={.ca_sca}">{.ca_name}</a> </li> <!--{/}--> </ul> </div> <div class="clearfix"></div> </nav> <div class="margin-hr-10"></div> <!--{/}--> <!--{* 게시판 카테고리 끝 *}-->이렇게 수정하셨던데 어떤점이 다른지 여쭤봐도 될까요?
선인장님의 댓글
적용해봤는데 이쁘네요 테마와도 잘 어울리구요.
joosam님의 댓글
우와.... 역시 고수십니다~~~ 존경 존경~~
joosam님의 댓글
사용해보니 깔끔한게 최곱니다~~~
shadow님의 댓글
마음에 드신다니 다행이네요^^;
joosam님의 댓글
어디사시는 뉘신지는 모르겠사오나... 나중에 인연 되시면 커피한잔 대접하겠습니다~~ ㅎㅎ
joosam님의 댓글
<!--{? _is_category && .ca_name}-->
<!-- <a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a> --> 요부분은 어디에 적용을 해야 하는건지요?
축하합니다. 행운의 포인트 82포인트를 획득하였습니다.
shadow님의 댓글
각 게시판 스킨 list.skin.html 입니다.^^
joosam님의 댓글
넵 없는 게시판도 있는듯 싶네요... 기본 게시판에는 있네요 ^^
선인장님의 댓글
이윰넷 1:1게시판에 탭형식 카테고리 디자인 참예쁘네요. 1:1문의 게시판 스킨을보고 따라해보려 했으나 실패했습니다 ㅜ
shadow님의 댓글
"이윰넷"을 너무 카피하는 것 같아 일부러 저리 만든건데요.
제 기억이 맞다면 <div class="tab-cart"> 이 부분을 <div class="tab-e1"> 으로 바꾸시면 되지 않을까 합니다.
joosam님의 댓글
shadow님 게시판 카테고리 텝을 EBB Share 스킨에 적용 하려면 어떻게 해야 할까요 ^^
shadow님의 댓글
글 다시 적으려니 힘들어요 ㅜㅜ
list.skin.html 을 여시구요 <!--{?_is_category}--> 바로 아래쪽 소스를 삭제합니다.
<script> // 카테고리 이동 function category_view(sca) { if(sca) var url = "{_category_href}&sca="+sca; else var url = "{_category_href}"; $(location).attr('href',url); return false; } </script>다시 <nav> 를 검색
<nav> <h5><strong class="color-red">{board.bo_subject}</strong> 카테고리</h5> <div class="row col-sm-4"> <select name="ca_name" id="ca_name" required class="form-control" onchange="return category_view(this.value);"> <option value="">전체</option> <!--{@ _bocate}--> <option value="{.ca_sca}" {? _decode_sca == .ca_name}selected{/}>{.ca_name}</option> <!--{/}--> </select> </div> <div class="clearfix"></div> </nav>위 소스를 삭제하시고 그 자리에 아래 소스를 첨부하시면 됩니다.
<div class="tab-cart"> <div class="margin-hr-10"></div> <div class="row col-sm-12"> <ul class="nav nav-tabs"> <li class="{?!_decode_sca}active{/}"> <a href="{_category_href}">전체</a> </li> <!--{@ _bocate}--> <li class="{? _decode_sca == .ca_name}active{/}"> <a href="{_category_href}&sca={.ca_sca}">{.ca_name}</a> </li> <!--{/}--> </ul> </div> </div> <div class="clearfix"></div>joosam님의 댓글
역시 똑 뿌러진 답변 감사합니다~~~ ㅎㅎ 방금 적용 해봤습니다... 분류를 클릭하면 미등록페이지라고 뜨는데요...
http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=3157 이 질문과 같은 문제일까요?
shadow님의 댓글
http://eyoom.net/bbs/board.php?bo_table=freeboard&wr_id=1372
위 링크를 참조하세요^^
joosam님의 댓글
shadow님 PC Basic 테마의 스킨에 탭을 적용하고 싶은데요... pc테마는 위에 방법으로 적용이 되는데 모바일는 다르게 적용이 되네요..
팁을 좀 주시면 고맙겠습니다~~ (삽질중이라...) 도와 주십시요~~
pc와 모바일 두 곳 스킨에 모두 따로 따로 적용해야 하는 걸까요?
shadow님의 댓글
"PC Basic" 테마는 비반응형이다보니 소스 수정을 PC와 모바일 모두 작업해주셔야 합니다.
cygz님의 댓글
지금 pc베이직 테마를 사용하고 있는데요 위와 같은 방식으로 소스를 수정했는데 원하는 결과가 출력되지 않아 질문드립니다.
관리자사이트 > "이윰 설정" > "이윰 커뮤니티 메뉴설정" 에서 메뉴를 등록할 때 등록되는 게시판의 구조가
사전에 어떤 구조로 등록이 되어야 하는건가요?
축하합니다. 행운의 포인트 38포인트를 획득하였습니다.
shadow님의 댓글
메뉴설정과는 상관없습니다.
그누보드 게시판 설정에 분류를 따르게 되어있습니다.
cygz님의 댓글
아 네 그렇다면 원하는 결과로 출력되기 위해서는
게시판 설정에서 어떤 특정한 사전처리가 되어야 한다는 것인가요?
예를들어 a게시판에 카테고리를 추가한다던가 하는것처럼요?
shadow님의 댓글
분류를 사용치 않으면 이 게시글에 언급된 메뉴가 나타나지 않지요.
분류가 나눠져 있고 위 소스를 올바르게 적용되었다면 상기 메뉴가 나타납니다.
cygz님의 댓글
아 그렇군요 감사합니다.
지금 관리자 사이트에서 게시판 분류 설정 부분을 찾고있는데
어느 위치에서 설정하면 되는지도 좀 여쭤봐도 될까요?
바쁘실텐데 죄송합니다.
shadow님의 댓글
관리자 > 게시판관리 > 게시판 수정 > 분류 에 '일반|보통|특별' 이런식으로 만드시면 됩니다.
cygz님의 댓글
구현되는것 확인하였습니다.
분류라는 개념을 제가 모르고 있던것이였네요. ^^
대단히 감사합니다.
달고나님의 댓글
좋은 정보 감사합니다.
웨이브님의 댓글
1
미스코리아님의 댓글
감사합니다.