티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기

종종 올리는 블로그 첫 글입니다.

 

블로그 스킨 선택과 수정, 세팅하는 시간이 며칠 걸렸네요 ^^

 

여러가지 스킨을 고민하다가 결정하게된 티스토리의 새 반응형 웹스킨 '#1' !!!

 

가장 마음에 들었지만 버그와 제 입맛에 맞지 않는 몇가지를 손보았고, 원하시는 분이 있으시면 도움이 되고자 이렇게 글을 올립니다.

 

티스토리 새 반응형 웹스킨 '#1'에서 버그?라고 생각되는 첫번째 수정 사항은 카테고리 바가 브라우져 높이보다 긴 경우 스크롤이 생기지 않아서 감추어진 카테고리는 선택하지 못하는 불편함이 있었습니다.

 

아래 스크린샷처럼 카테고리 보다 창이 더 길 경우에는 문제 없습니다.

 

 

 

그러나, 아래처럼 창 높이보다 카테고리가 긴 경우( 제 경우에는 길지 않아서 창 크기를 줄여봤습니다.)에는 보이지 않는 카테고리는 클릭하지 못하는 버그가 있습니다.

 

 

유동적으로 창크기가 클경우에는 스크롤바가 안생기고, 카테고리가 더 긴 경우에만 생기도록 해야 반응형 스킨이지 않겠습니까? ^^

 

그래서 자바스크립트 jQuery로 구현해봤습니다.

 

처음 로딩할때와 창 크기를 변경하는 이벤트일때 브라우져 창 크기를 구해서 창 크기가 카테고리보다 작을 경우에만 스크롤바가 발생하도록 구현해야 됩니다.

 

1. 아래 코드를 스킨 HTML 문서의 </head>앞 19번째 라인에 추가하세요.

  <script type="text/javascript">
    $(function(){
       $(window).bind("load resize", function(){ // 처음 로딩하거나 창크기 변경할때
         var scheight = $(window).height(); // 브라우져 창 크기를 구해서
         $(".list_cate").css("max-height", scheight - 90); // 카테고리 최대 높이를 창크기보다 작게 지정
       });
    });
  </script>
</head>

해당 코드가 이해 안되셔도 위 코드를 19번째 라인(</head> 앞 라인)에 추가하시기만 하면 됩니다.

 

2. 그런 다음에 스킨 CSS 문서에서 69번째 라인쯤 .area_menu .list_cate 으로 시작하는 줄을 아래처럼 수정합니다.

.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:158px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff;overflow:auto}

 

3. 그리고 스킨 CSS 문서 329번째 라인쯤에 .area_menu .list_cate으로 시작하는 줄을 아래처럼 수정합니다.

	.area_menu .list_cate{position:static;width:200px;padding:13px 0 15px;border:0 none;border-radius:0;max-height:inherit}

 

그러면 아래처럼 창크기보다 카테고리가 긴 경우에만 스크롤바가 생깁니다.

 

 

 

그런데, 카테고리 뒤에 글 갯수까지 생겼네요? ^^;;

 

4. 그건 아래 코드처럼 스킨 CSS 문서의 78번째 라인을 주석 처리(/*   */) 해주세요.

.area_navi .list_cate ul li { line-height:18px }
.area_navi .list_cate ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }
.area_navi .list_cate ul li.selected > a,
.area_navi .list_cate ul li a:hover { text-decoration:underline;color:#3db39e }
/* .area_navi .list_cate .c_cnt, .area_navi .list_cate img { display:none } */
.area_navi .list_cate ul li ul li a {  }
.area_navi .list_cate ul li ul li ul { padding-bottom:6px; margin-top:-6px }
.area_navi .list_cate ul li ul li ul li { color:#b4b4b4; padding-left:21px }
.area_navi .list_cate ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }
.area_navi .list_cate ul li ul li ul li a::before { content:'· ' }
.area_navi .list_cate .menu_profile { display:none }

 

위 코드처럼 78번째 라인을 주석 처리(/*   */) 해주시면 됩니다.

 

위 내용이 이해 안되시는 분들은 아래 파일(main.zip)을 받아서 압축을 푸신후에 main.html은 메모장으로 열어서 스킨 HTML에 복붙(복사해서 붙여넣기)하고, main.css는 스킨 CSS에 복붙하세요 ^^ 

main.zip

 

 

티스토리 새 반응형 웹스킨 '#1'의 추가 수정한 사항은 다음 글에 종종 올리도록 하겠습니다.

 

종종 올리는 블로그의 첫 글이 많은 도움이 되셨으면 합니다.

 

궁금하신 사항이 있으시면 댓글로 글 남겨주시면 성심성의껏 답변 해드리겠습니다.

 

감사합니다. ^^