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

페이지 정보

루루아빠 3,310 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,295,334
레벨 97
경험치 1,399,531

Progress Bar 10%

- 가입일 : 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 242213 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+3🏆 게시글 검색 단위에 맞는 메뉴 추가하기 shadow2fox 2021.05.18 1,775 2
이윰  댓글+2🏆 글 작성 시 alt 태그 게시글 제목으로 DB에 저장하기 shadow2fox 2021.05.05 1,504 2
이윰  댓글+4🏆 태그 앞과 뒤 공백 제거하기 shadow2fox 2019.06.25 2,202 2
이윰  댓글+3🏆 첨부 이미지 alt 속성 값 게시글 제목으로 보여주기 shadow2fox 2021.06.11 1,209 2
이윰  댓글+4🏆 새로고침 없이 댓글을 달거나 삭제할 수 있는 ajax 댓글 시스템으로 교체하기 shadow2fox 2018.12.11 3,485 2
이윰  댓글+3🏆 출석체크 점수 경험치로 부여하기 루루아빠 2019.08.11 2,518 2
이윰  댓글+2🏆 글, 댓글 작성시 불필요한 앞뒤 공백 제거해 DB에 저장하기 shadow2fox 2021.06.21 1,215 2
이윰  댓글+5🏆 네이버TV 올바르게 적용하기 shadow2fox 2019.10.12 2,321 2
이윰  댓글+1🏆 관리자는 쪽지 보낼 때 캡챠코드 적용하지 않기 shadow2fox 2019.01.10 2,288 1
이윰  댓글+1🏆 팝업창 페이지에서도 띄우기 shadow2fox 2019.02.05 2,044 1
이윰  댓글+1🏆 카카오TV 올바르게 적용하기 shadow2fox 2020.01.29 1,904 1
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 2,885 1
이윰  댓글+1🏆 카카오TV 플레이어 최신 버전 재생 오류 해결하기 shadow2fox 2019.03.11 2,592 1
이윰  댓글+1🏆 이윰빌더 현재 접속자 최신글에서 관리자도 ip가 숨겨지는 문제 해결하기 shadow2fox 2020.04.10 2,154 1
이윰  댓글+1🏆 Eyoom Builder 3.0.8 패치 shadow2fox 2019.03.12 2,283 1
이윰  댓글+1🏆 게시글 추천시 글 작성자에게 포인트 부여하기 shadow2fox 2019.03.15 1,914 1
이윰  🏆 반응형 이미지를 위한 태그 루루아빠 2015.04.29 2,859 1
이윰  🏆 모바일에서 이미지 넓이 높이 태그 제거하기 루루아빠 2015.05.07 2,622 1
이윰  🏆 이윰 메뉴 설정시 사용중인 출력순서 에러 해결하기 루루아빠 2015.05.12 3,136 1
이윰  🏆 모바일에서는 링크 이동시 로딩중 이미지 띄우기 루루아빠 2015.06.17 3,161 1