티스토리 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;}
}
Colored by Color Scripter

cs