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

페이지 정보

루루아빠 3,284 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,292,498
레벨 96
경험치 1,393,412

Progress Bar 89%

- 가입일 : 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 2421213 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+2🏆 Eyoom Builder 1.1.0 패치 루루아빠 2015.05.19 3,874 0
이윰  댓글+1🏆 네비바 상단 배경 넣기 루루아빠 2015.05.16 2,944 0
이윰  댓글+1🏆 게시판 댓글 이미지 크기 제한과 모바일은 제외 루루아빠 2015.05.16 3,130 0
이윰  🏆 이윰 메뉴 설정시 사용중인 출력순서 에러 해결하기 루루아빠 2015.05.12 3,125 1
이윰  🏆 모바일에서 이미지 넓이 높이 태그 제거하기 루루아빠 2015.05.07 2,608 1
이윰  🏆 반응형 이미지를 위한 태그 루루아빠 2015.04.29 2,846 1
이윰  🏆 로그인 후에만 홈 들어가게 만들기 루루아빠 2015.04.28 2,645 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 2,658 0
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 2,874 1
이윰  🏆 이윰 조건문 변수 모음 루루아빠 2015.04.23 2,766 0
이윰  🏆 일반 회원과 특정 레벨 회원을 나타내는 변수 루루아빠 2015.04.23 2,725 0
이윰  🏆 사이드바 없애기 루루아빠 2015.04.22 2,850 1
이윰  🏆 관리자는 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 2,948 1
이윰  🏆 좀 더 전문적으로 관리자 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 2,756 1
이윰  댓글+2🏆 🚩 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3,285 0
이윰  🏆 게시판 basic 스킨 목록 보기에서 가운데로 정렬하기 루루아빠 2015.04.10 2,825 0
이윰  댓글+1🏆 이윰 메뉴 설정에서 출력 순서로 인한 오류 발생시 루루아빠 2015.04.09 3,395 0
이윰  🏆 익명 게시판에 글 작성시 기본으로 익명 체크되게 하기 루루아빠 2015.03.28 2,778 0
이윰  🏆 게시판 다운로드 포인트를 마이너스로 설정할 경우 루루아빠 2015.03.23 2,812 0
이윰  댓글+1🏆 디바이스에 따른 내용 보이기 숨기기 루루아빠 2015.03.20 3,267 0