팁 & 테크

최근본상품
TOP
DOWN

팁 & 테크

게시판 카테고리 탭 형식으로 만들기

2015.04.21 14:24 6,051 29

본문

"이윰"님께서 올려주신 카테고리 탭 형식으로 보여주기를 어줍짢은 실력으로 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>&nbsp;

수정 후

<!--{? _is_category && .ca_name}-->
<!-- <a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a>&nbsp; -->

1
로그인 후 평가 가능합니다.
- shadow - 회원등급 : 중간계 / Level 19
포인트 674,464
경험치 36,425
[레벨 19] - 진행률 59%
- 가입일 : 2015-02-26 22:28:15
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 29

비즈팔님의 댓글

좋은 자료 감사합니다.
대충 만들어 사용중인데 깔끔하게 잘 정리해 주셨네요.^^

축하합니다. 첫댓글 포인트 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 2015.04.22 17:44

우와.... 역시 고수십니다~~~ 존경 존경~~

joosam님의 댓글

joosam 2015.04.22 18:15

사용해보니 깔끔한게 최곱니다~~~

shadow님의 댓글

shadow 2015.04.22 18:16

마음에 드신다니 다행이네요^^;

joosam님의 댓글

joosam 2015.04.22 18:17

어디사시는 뉘신지는 모르겠사오나... 나중에 인연 되시면  커피한잔 대접하겠습니다~~ ㅎㅎ

joosam님의 댓글

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>&nbsp; --> 요부분은 어디에 적용을 해야 하는건지요?

축하합니다. 행운의 포인트 82포인트를 획득하였습니다.

shadow님의 댓글

shadow 2015.04.22 18:38

각 게시판 스킨 list.skin.html 입니다.^^

joosam님의 댓글

joosam 2015.04.22 18:44

넵 없는 게시판도 있는듯 싶네요... 기본 게시판에는 있네요 ^^

선인장님의 댓글

이윰넷 1:1게시판에 탭형식 카테고리 디자인 참예쁘네요.  1:1문의 게시판 스킨을보고 따라해보려 했으나 실패했습니다 ㅜ

shadow님의 댓글

shadow 2015.04.24 14:20

"이윰넷"을 너무 카피하는 것 같아 일부러 저리 만든건데요.
제 기억이 맞다면 <div class="tab-cart"> 이 부분을 <div class="tab-e1"> 으로 바꾸시면 되지 않을까 합니다.

joosam님의 댓글

joosam 2015.05.22 22:55

shadow님 게시판 카테고리 텝을 EBB Share 스킨에 적용 하려면 어떻게 해야 할까요 ^^

shadow님의 댓글

shadow 2015.05.22 23:01

글 다시 적으려니 힘들어요 ㅜㅜ

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님의 댓글

joosam 2015.05.22 23:04

역시 똑 뿌러진 답변 감사합니다~~~ ㅎㅎ 방금 적용 해봤습니다... 분류를 클릭하면 미등록페이지라고 뜨는데요...
http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=3157 이 질문과 같은 문제일까요?

shadow님의 댓글

shadow 2015.05.22 23:04

joosam님의 댓글

joosam 2015.08.29 16:48

shadow님 PC Basic 테마의  스킨에 탭을 적용하고 싶은데요... pc테마는 위에 방법으로 적용이 되는데 모바일는 다르게 적용이 되네요..
팁을 좀 주시면 고맙겠습니다~~ (삽질중이라...) 도와 주십시요~~
pc와 모바일 두 곳 스킨에 모두 따로 따로 적용해야 하는 걸까요?

shadow님의 댓글

shadow 2015.08.30 06:01

"PC Basic" 테마는 비반응형이다보니 소스 수정을 PC와 모바일 모두 작업해주셔야 합니다.

cygz님의 댓글

cygz 2015.10.12 15:17

지금 pc베이직 테마를 사용하고 있는데요 위와 같은 방식으로 소스를 수정했는데 원하는 결과가 출력되지 않아 질문드립니다.

관리자사이트 > "이윰 설정" > "이윰 커뮤니티 메뉴설정" 에서 메뉴를 등록할 때 등록되는 게시판의 구조가
사전에 어떤 구조로 등록이 되어야 하는건가요?

축하합니다. 행운의 포인트 38포인트를 획득하였습니다.

shadow님의 댓글

shadow 2015.10.12 15:24

메뉴설정과는 상관없습니다.
그누보드 게시판 설정에 분류를 따르게 되어있습니다.

cygz님의 댓글

cygz 2015.10.12 15:44

아 네 그렇다면 원하는 결과로 출력되기 위해서는
게시판 설정에서 어떤 특정한 사전처리가 되어야 한다는 것인가요?
예를들어 a게시판에 카테고리를 추가한다던가 하는것처럼요?

shadow님의 댓글

shadow 2015.10.12 15:46

분류를 사용치 않으면 이 게시글에 언급된 메뉴가 나타나지 않지요.
분류가 나눠져 있고 위 소스를 올바르게 적용되었다면 상기 메뉴가 나타납니다.

cygz님의 댓글

cygz 2015.10.12 15:47

아 그렇군요 감사합니다.
지금 관리자 사이트에서 게시판 분류 설정 부분을 찾고있는데
어느 위치에서 설정하면 되는지도 좀 여쭤봐도 될까요?
바쁘실텐데 죄송합니다.

shadow님의 댓글

shadow 2015.10.12 15:50

관리자 > 게시판관리 > 게시판 수정 > 분류 에 '일반|보통|특별' 이런식으로 만드시면 됩니다.

cygz님의 댓글

cygz 2015.10.12 15:55

구현되는것 확인하였습니다.
분류라는 개념을 제가 모르고 있던것이였네요. ^^
대단히 감사합니다.

달고나님의 댓글

좋은 정보 감사합니다.

웨이브님의 댓글

1

미스코리아님의 댓글

감사합니다.