Whatever 스킨 홈 화면 카테고리 변경하기

Whatever 스킨 홈 화면 카테고리 변경하기 

 

블로그 영동 2호는 Whatever 스킨 홈을 사용하고 있다. 

 

홈 화면 위쪽에 나타난 카테고리를 내 마음대로 바꾸려고 한다. 

 

홈, 태그, 방명록에 카테고리를 추가하고, 아래와 같이 배열하려고 한다. 

 

카테고리 1, 카테고리 2, 카테고리 3, 홈, 태그, 방명록 이렇게 말이다.

 

바꾸는 방법을 소개한다.

 

1차 작업_ 코드 넣어주기  아래의 코드를 

 

스킨편집 >> CSS 가장 밑에 아래의 코드를 넣어주기만 하면 된다. 

 

 

 

 

 

/* 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;}
}

 

 

 

작업 2_ HTML 바꾸기 

 

① Ctrl+F를 눌러 ##blog menu##를 검색한다. 

 

##_category_list_## 를 아래와 같이 넣어 준다. 

 

 

 

카테고리가 생겼습니다.