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

페이지 정보

루루아빠 3,286 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 7473338 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 Eyoom Builder 1.1.3 패치 루루아빠 2015.06.05 3,520 0
그누•영카트  🏆 영카트 5.2.5 패치 루루아빠 2017.01.10 2,499 0
JavaScript  🏆 아이프레임 자동으로 갱신하기 루루아빠 2015.06.05 3,186 0
그누•영카트  🏆 그누보드 5.2.6 패치 루루아빠 2017.01.20 2,177 0
이윰  🏆 이윰빌더 1.1.4 패치 루루아빠 2015.06.08 3,316 0
그누•영카트  🏆 영카트 5.2.6 패치 루루아빠 2017.01.20 2,481 0
이윰  댓글+1🏆 게시판 리스트에 무한스크롤 기능 패치 루루아빠 2015.06.08 4,504 0
그누•영카트  🏆 그누보드 로그인, 로그아웃시 현재 페이지 유지하기 루루아빠 2017.01.25 3,357 0
그누•영카트  그누보드(영카트) 5.5.3.1 (아이핀 사용시 오류 수정) shadow2fox 2022.03.08 432 0
jQuery  🏆 특정 부모 클래스 내부에 있지 않을 경우에만 적용하기 루루아빠 2017.02.06 2,261 0
이윰  🏆 짧은 글 주소에 댓글에 표시되지 않는 버그 패치 루루아빠 2015.06.08 3,418 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 2,463 0
그누•영카트  🏆 그누보드 5.0.36 패치 루루아빠 2015.06.11 2,827 0
그누•영카트  🏆 영카트 5.0.37 패치 루루아빠 2015.06.11 3,004 0
이윰  🏆 해당 페이지에 적용된 템플릿언더바 전체 변수 확인하기 루루아빠 2017.02.24 2,767 0
그누•영카트  🏆 영카트 5.4.1.7 shadow2fox 2020.02.01 1,664 0
이윰  🏆 이윰 레벨업 관련 push(푸시) 메세지 오류 루루아빠 2015.06.15 2,875 0
이윰  🏆 갤러리 게시판 혹은 웹진형 게시판 목록에서 본문 내용 글자수 루루아빠 2015.06.15 3,089 0
그누•영카트  🔒 비추천 게시물 블라인드 루루아빠 2015.06.15 2 0
그누•영카트  🏆 그누보드 5.2.7 패치 루루아빠 2017.03.21 3,066 0