[이윰] 게시판 카테고리 탭 형식으로 만들기

페이지 정보

yadolee 루루아빠 3,517 2 2015.04.21 01:32:38

평점

  • 평점 : 0점 (0명 참여)

본문

각 게시판 스킨 폴더 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">
    <!--{    <h5><strong class="color-red">{board.bo_subject}</strong> 카테고리</h5>    *}-->
    <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/community/css/custom.css 을 열고 다음 소스를 삽입한다.


.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: #87b822;
}

.tab-cart .nav-tabs > li > a {
    border: none;
}
.tab-cart .nav-tabs > li > a:hover {
    color: #fff;
    background: #87b822;
}

.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;
}

추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,332,473
레벨 100
경험치 1,487,599

Progress Bar 8.67%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글2

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2015.06.28 19:03
커뮤니티 테마의 각 색상에 맞게 적용하기 위해 eyoom/theme/community/css/color/색상.css 를 열어 를 다음과 같이 적용했다. 예제는 blue.css이다. 수정 후


.tab-cart .nav-tabs {
	border: none;
	background: none;

}

.tab-cart .nav-tabs a {
	font-size: 14px;

}



.tab-cart .nav-tabs > .active > a,
.tab-cart .nav-tabs > .active > a:hover,
.tab-cart .nav-tabs > .active > a:focus{display:block;position:relative;margin-left:-1px;padding:5px 0 5px;width:81px;height:27px;border:1px solid #ddd;background:#1687fb;color:#fff;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer;
}

.tab-cart .nav-tabs > li > a {display:block;position:relative;margin-left:-1px;padding:5px 0 5px;width:81px;height:27px;border:1px solid #ddd;background:#fff;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer;
}
.tab-cart .nav-tabs > li > a:hover {
	color: #fff;
	background: #1687fb;
}

.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;
}

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2015.04.21 14:10
추가적으로 게시판 리스트 목록에서 카테고리를 표시하지 않는다. 각 스킨 list.skin.html 을 열어 수정 전

<!--{? _is_category && .ca_name}-->
{.ca_name} 
수정 후

<!--{? _is_category && .ca_name}-->
<!-- {.ca_name}  -->

Total 7623439 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.2.6 패치 루루아빠 2017.01.20 3,043 0
이윰  댓글+1🏆 게시판 리스트에 무한스크롤 기능 패치 루루아빠 2015.06.08 4,728 0
그누•영카트  🏆 그누보드 로그인, 로그아웃시 현재 페이지 유지하기 루루아빠 2017.01.25 3,687 0
그누•영카트  그누보드(영카트) 5.5.3.1 (아이핀 사용시 오류 수정) shadow2fox 2022.03.08 650 0
jQuery  🏆 특정 부모 클래스 내부에 있지 않을 경우에만 적용하기 루루아빠 2017.02.06 2,487 0
이윰  🏆 짧은 글 주소에 댓글에 표시되지 않는 버그 패치 루루아빠 2015.06.08 3,641 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 2,750 0
그누•영카트  🏆 그누보드 5.0.36 패치 루루아빠 2015.06.11 3,421 0
그누•영카트  🏆 영카트 5.0.37 패치 루루아빠 2015.06.11 3,420 0
이윰  🏆 해당 페이지에 적용된 템플릿언더바 전체 변수 확인하기 루루아빠 2017.02.24 3,078 0
그누•영카트  🏆 영카트 5.4.1.7 shadow2fox 2020.02.01 2,062 0
이윰  🏆 이윰 레벨업 관련 push(푸시) 메세지 오류 루루아빠 2015.06.15 3,273 0
이윰  🏆 갤러리 게시판 혹은 웹진형 게시판 목록에서 본문 내용 글자수 루루아빠 2015.06.15 3,478 0
그누•영카트  🔒 비추천 게시물 블라인드 루루아빠 2015.06.15 2 0
그누•영카트  🏆 그누보드 5.2.7 패치 루루아빠 2017.03.21 3,353 0
이윰  🏆 특정 게시판 첨부 이미지와 본문 가운데 정렬 루루아빠 2015.06.16 3,354 0
그누•영카트  🏆 영카트 5.2.7 패치 루루아빠 2017.03.21 3,921 0
Bootstrap  🏆 텍스트에 tooltip 이미지 띄우기 루루아빠 2017.03.25 4,766 0
이윰  🏆 사이드 레이아웃의 프로필 사진 옆에 쪽지 badge 만들기 루루아빠 2015.06.18 3,472 0
그누•영카트  🏆 영카트 5.4.1.9 shadow2fox 2020.02.08 2,225 0