게시판 카테고리 탭 형식으로 만들기
2015.04.21 14:24
6,369
29
- - 짧은주소 : http://e3net.fineyes.com/bbs/?t=1q
본문
"이윰"님께서 올려주신 카테고리 탭 형식으로 보여주기를 어줍짢은 실력으로 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
로그인 후 평가 가능합니다.
-
shadow
- 회원등급 : 중간계 / Level 19
포인트 674,464
경험치 36,425
[레벨 19] - 진행률
59%
- 가입일 : 2015-02-26 22:28:15
- 서명 : 미입력
- 자기소개 : 미입력
댓글목록 29
비즈팔님의 댓글
- 아이디로 검색
2015.04.21 14:56좋은 자료 감사합니다.
대충 만들어 사용중인데 깔끔하게 잘 정리해 주셨네요.^^
축하합니다. 첫댓글 포인트 93포인트를 획득하였습니다.
축하합니다. 행운의 포인트 47포인트를 획득하였습니다.
티보리님의 댓글
- 아이디로 검색
2015.04.21 23:26유용한 정보 감사합니다.
선인장님의 댓글
- 아이디로 검색
2015.04.22 07:41제일 위에 수정한 부분 이윰님은
이렇게 수정하셨던데 어떤점이 다른지 여쭤봐도 될까요?
선인장님의 댓글
- 아이디로 검색
2015.04.22 07:50적용해봤는데 이쁘네요 테마와도 잘 어울리구요.
joosam님의 댓글
- 아이디로 검색
2015.04.22 17:44우와.... 역시 고수십니다~~~ 존경 존경~~
joosam님의 댓글
- 아이디로 검색
2015.04.22 18:15사용해보니 깔끔한게 최곱니다~~~
shadow님의 댓글
- 아이디로 검색
2015.04.22 18:16마음에 드신다니 다행이네요^^;
joosam님의 댓글
- 아이디로 검색
2015.04.22 18:17어디사시는 뉘신지는 모르겠사오나... 나중에 인연 되시면 커피한잔 대접하겠습니다~~ ㅎㅎ
joosam님의 댓글
- 아이디로 검색
2015.04.22 18:36<!--{? _is_category && .ca_name}-->
<!-- <a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a> --> 요부분은 어디에 적용을 해야 하는건지요?
축하합니다. 행운의 포인트 82포인트를 획득하였습니다.
shadow님의 댓글
- 아이디로 검색
2015.04.22 18:38각 게시판 스킨 list.skin.html 입니다.^^
joosam님의 댓글
- 아이디로 검색
2015.04.22 18:44넵 없는 게시판도 있는듯 싶네요... 기본 게시판에는 있네요 ^^
선인장님의 댓글
- 아이디로 검색
2015.04.24 14:18shadow님의 댓글
- 아이디로 검색
2015.04.24 14:20"이윰넷"을 너무 카피하는 것 같아 일부러 저리 만든건데요.
제 기억이 맞다면 <div class="tab-cart"> 이 부분을 <div class="tab-e1"> 으로 바꾸시면 되지 않을까 합니다.
joosam님의 댓글
- 아이디로 검색
2015.05.22 22:55shadow님 게시판 카테고리 텝을 EBB Share 스킨에 적용 하려면 어떻게 해야 할까요 ^^
shadow님의 댓글
- 아이디로 검색
2015.05.22 23:01글 다시 적으려니 힘들어요 ㅜㅜ
list.skin.html 을 여시구요 <!--{?_is_category}--> 바로 아래쪽 소스를 삭제합니다.
다시 <nav> 를 검색
위 소스를 삭제하시고 그 자리에 아래 소스를 첨부하시면 됩니다.
joosam님의 댓글
- 아이디로 검색
2015.05.22 23:04역시 똑 뿌러진 답변 감사합니다~~~ ㅎㅎ 방금 적용 해봤습니다... 분류를 클릭하면 미등록페이지라고 뜨는데요...
http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=3157 이 질문과 같은 문제일까요?
shadow님의 댓글
- 아이디로 검색
2015.05.22 23:04http://eyoom.net/bbs/board.php?bo_table=freeboard&wr_id=1372
위 링크를 참조하세요^^
joosam님의 댓글
- 아이디로 검색
2015.08.29 16:48shadow님 PC Basic 테마의 스킨에 탭을 적용하고 싶은데요... pc테마는 위에 방법으로 적용이 되는데 모바일는 다르게 적용이 되네요..
팁을 좀 주시면 고맙겠습니다~~ (삽질중이라...) 도와 주십시요~~
pc와 모바일 두 곳 스킨에 모두 따로 따로 적용해야 하는 걸까요?
shadow님의 댓글
- 아이디로 검색
2015.08.30 06:01"PC Basic" 테마는 비반응형이다보니 소스 수정을 PC와 모바일 모두 작업해주셔야 합니다.
cygz님의 댓글
- 아이디로 검색
2015.10.12 15:17지금 pc베이직 테마를 사용하고 있는데요 위와 같은 방식으로 소스를 수정했는데 원하는 결과가 출력되지 않아 질문드립니다.
관리자사이트 > "이윰 설정" > "이윰 커뮤니티 메뉴설정" 에서 메뉴를 등록할 때 등록되는 게시판의 구조가
사전에 어떤 구조로 등록이 되어야 하는건가요?
축하합니다. 행운의 포인트 38포인트를 획득하였습니다.
shadow님의 댓글
- 아이디로 검색
2015.10.12 15:24메뉴설정과는 상관없습니다.
그누보드 게시판 설정에 분류를 따르게 되어있습니다.
cygz님의 댓글
- 아이디로 검색
2015.10.12 15:44아 네 그렇다면 원하는 결과로 출력되기 위해서는
게시판 설정에서 어떤 특정한 사전처리가 되어야 한다는 것인가요?
예를들어 a게시판에 카테고리를 추가한다던가 하는것처럼요?
shadow님의 댓글
- 아이디로 검색
2015.10.12 15:46분류를 사용치 않으면 이 게시글에 언급된 메뉴가 나타나지 않지요.
분류가 나눠져 있고 위 소스를 올바르게 적용되었다면 상기 메뉴가 나타납니다.
cygz님의 댓글
- 아이디로 검색
2015.10.12 15:47아 그렇군요 감사합니다.
지금 관리자 사이트에서 게시판 분류 설정 부분을 찾고있는데
어느 위치에서 설정하면 되는지도 좀 여쭤봐도 될까요?
바쁘실텐데 죄송합니다.
shadow님의 댓글
- 아이디로 검색
2015.10.12 15:50관리자 > 게시판관리 > 게시판 수정 > 분류 에 '일반|보통|특별' 이런식으로 만드시면 됩니다.
cygz님의 댓글
- 아이디로 검색
2015.10.12 15:55구현되는것 확인하였습니다.
분류라는 개념을 제가 모르고 있던것이였네요. ^^
대단히 감사합니다.
달고나님의 댓글
- 아이디로 검색
2015.10.12 16:16좋은 정보 감사합니다.
웨이브님의 댓글
- 아이디로 검색
2015.11.11 09:161
미스코리아님의 댓글
- 아이디로 검색
2016.01.27 17:36감사합니다.