티스토리 whatever스킨 카테고리 메뉴 넣기

티스토리에서 새로 출시한 커버스킨들중에서 whatever(왓에버)스킨이 가장 마음에 들어 적용했는데 카테고리 메뉴를 지원하지 않네요. 저뿐만 아니라 다른 사용자분들도 황당하지 않았을까 생각됩니다. 2개의 티스토리 블로그를 운영하고 있고 스킨도 자주 변경하는 편인데 카테고리 메뉴를 지원하지 않는 스킨은 처음 보는 것 같습니다.

공유차원에서 포스팅 합니다.

왓에버 스킨에 적용된 카테고리 메뉴 미리보기

  • 스킨 옵션
  • 레이아웃 타입 : 중앙 정렬
  • 컬러타입 : 밝은, 어두운

상단 메뉴바는 기존 형태를 그대로 유지하되 서브 메뉴 부분을 추가했습니다.

상단메뉴

모바일(스마트기기) 우측 버튼 클릭 시 나오는 메뉴

  • Letter 스킨을 참조했습니다.

오프캔바스메뉴

마지막으로 레이아웃이 좌측정렬일 경우입니다.

  • 레이아웃 타입 : 좌측정렬

좌측정렬

  • 컬러타입 : 밝은

 

좌측정렬 다크

  • 컬러타입 : 어두운

스킨에 적용하기

블로그 관리 > 스킨편집 > CSS

아래 코드를 복사해서 CSS 편집 창 가장 하단 빈 곳에 복사한 코드를 붙여 넣기 합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* whatever_nav
------------------------------------------------ */
#gnb .tt_category li a.link_tit {display: none;}
#gnb ul li {font-size: 0.875rem;padding: 26px 10px;}
#gnb .sub_category_list {display: none; position: absolute; z-index: 999; min-width: 120px; background-color: #ffffff; border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); font-size: .875rem;}
#gnb .category_list li:hover .sub_category_list {display: block;}
#gnb .sub_category_list li {float: none; padding: 0;}
#gnb .sub_category_list a:hover:after {display: none;}
#gnb .sub_category_list li a {text-align: left; padding: 6px 16px; line-height: 18px;}
#gnb > ul {display: inline-block;}
#gnb>ul.tt_category>li {padding: 0; border: 0;}
.layout-float #gnb > ul {display: block;}
.layout-float #gnb ul li {text-align: left; font-size: 1rem; border-bottom: 0;}
.layout-float #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 15px; border-left: 3px solid #f1f1f1;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;}
.layout-float #gnb .sub_category_list li a {padding: 6px 0px 6px 16px;}
.layout-float #gnb ul li a:hover:after {display: none;}
.color-dark #gnb .sub_category_list {background-color: #141414;box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.2);}
.layout-float.color-dark #gnb .sub_category_list {box-shadow:none;}
@media screen and (max-width: 928px) {
  #gnb>ul {display: block;}
  #gnb {overflow-y: auto; height: 100%;}
  #gnb ul {overflow: hidden; height: auto;}
  #gnb ul li {padding: 0; border-top: 0;}
  #gnb ul li a{padding: 8px 30px 8px;}
  #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 40px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;}
  .color-dark #gnb .sub_category_list {box-shadow: none;}
}
@media screen and (max-width: 767px) {
  .layout-float #gnb ul li {border-top: 0;}
  .layout-float #gnb .sub_category_list {margin: 2px 0 13px 45px;}
  .layout-float #gnb ul li a {padding: 8px 30px 8px;}
}
cs

whatever_nav.css
다운로드

블로그 관리 > 스킨편집 > HTML

HTML 편집창으로 이동해서 메뉴 치환자 ##_blog_menu_## 를 찾습니다.
단축키 Ctrl + F ##_blog_menu_## 대략 34번째 줄에 있습니다.

찾았으면 메뉴 치환자 위 또는 아래에 카테고리 치환자 ##_category_list_## 를 넣어 줍니다.
메뉴가 필요 없는 경우에는 치환자를 삭제하거나 관리자 페이지에서 메뉴들을 삭제하시면 됩니다.

참고: 갑자기 본문 안에 티스토리 치환자를 직접 넣을 수가 없게 되어네요. 치환자를 아래 이미지처럼[대괄호]으로 안에 넣어 주세요.

 

상단에 있는 적용 버튼을 누르고 나와서 본인의 블로그에 잘 적용되었는지 확인합니다.

참고사항 카테고리 글 개수표시와 새 글 아이콘 표시 부분 설정은 아래 포스팅을 참고
2018/12/27 - [Blog Tip] - 티스토리 카테고리 글 개수와 새 글 아이콘

홈버튼과 방명록 버튼 이동에 대한 포스팅을 추가했습니다.

2020/03/26 - 왓에버스킨 홈버튼, 방명록 버튼 위치 변경

반응형