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

페이지 정보

루루아빠 3,268 2 2015.04.21 01:32

평점

  • 평점 : 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 을 열고 다음 소스를 삽입한다.

/*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: #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;
}

추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,291,152
레벨 96
경험치 1,390,095

Progress Bar 77%

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

댓글2

루루아빠님의 댓글

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

/*Tabs Cart*/
.tab-cart .nav-tabs {
	border: none;
	background: none;
/* 	border-bottom: solid 2px #1687fb; */
}

.tab-cart .nav-tabs a {
	font-size: 14px;
/* 	padding: 5px 8px; */
}

/* .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: #1687fb;
}

.tab-cart .nav-tabs > li > a {
	border: none;
}
.tab-cart .nav-tabs > li > a:hover {
	color: #fff;
	background: #1687fb;
} */

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

루루아빠님의 댓글

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

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

<!--{? _is_category && .ca_name}-->
<!-- {.ca_name} -->
Total 7473338 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 일반 회원과 특정 레벨 회원을 나타내는 변수 루루아빠 2015.04.23 2,716 0
그누•영카트  🏆 첨부 이미지 가운데로 정렬하기 루루아빠 2015.04.23 2,706 0
이윰  🏆 사이드바 없애기 루루아빠 2015.04.22 2,839 1
이윰  🏆 관리자는 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 2,937 1
이윰  🏆 좀 더 전문적으로 관리자 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 2,747 1
이윰  댓글+2🏆 🚩 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3,269 0
에디터  댓글+1🏆 smarteditor2 사진 첨부시 절대경로를 상대경로로 변경하기 루루아빠 2015.04.18 4,385 0
에디터  🏆 smarteditor2를 이용하여 이미지 업로드시 이미지 위에 타이틀 팝업창 없애기 루루아빠 2015.04.11 3,160 0
그누•영카트  🏆 썸네일 화질 설정법 루루아빠 2015.04.11 3,158 0
기타  댓글+3🏆 아이프레임에 포함된 플래쉬(White flash방지) 로딩 완벽 해결법 루루아빠 2015.04.11 3,421 0
이윰  🏆 게시판 basic 스킨 목록 보기에서 가운데로 정렬하기 루루아빠 2015.04.10 2,817 0
기타  🏆 "syntaxhighlighter"로 적힌 소스 쉽게 복사하기 루루아빠 2015.04.09 3,121 0
이윰  댓글+1🏆 이윰 메뉴 설정에서 출력 순서로 인한 오류 발생시 루루아빠 2015.04.09 3,388 0
기타  🏆 내용이 포함된 box의 넓이와 높이 조정하는 법 루루아빠 2015.04.08 3,223 0
그누•영카트  댓글+1🏆 첨부된 이미지 링크 없애기 루루아빠 2015.04.04 2,600 0
그누•영카트  🏆 Re: 첨부된 이미지 링크 없애기 루루아빠 2015.04.07 2,902 0
그누•영카트  🏆 Re: Re: 첨부된 이미지 링크 없애기 루루아빠 2015.04.07 2,977 0
이윰  🏆 익명 게시판에 글 작성시 기본으로 익명 체크되게 하기 루루아빠 2015.03.28 2,768 0
그누•영카트  🏆 회원 닉네임 길이 제한두기 루루아빠 2015.03.28 2,837 0
이윰  🏆 게시판 다운로드 포인트를 마이너스로 설정할 경우 루루아빠 2015.03.23 2,806 0