Fastboot v1.6.2 카테고리모듈 마우스오버 적용하기

Fastboot 원본 스킨의 경우,

사이드바 카테고리 리스트에 마우스 포인터를 올렸을 때 제대로 가르키고 있는지 아리송해요.

저는 아직까지 카테고리 리스트가 적기때문에 사실 큰 불편함이 없지만

카테고리 리스트가 길어질 경우에는 마우스가 헤맬 것 같기도 합니다.

그래서 가독성과 편의성을 높이기 위해 마우스 오버 효과를 주는게 좋겠네요.

오늘은 카테고리 모듈의 마우스오버를 적용해볼게요.

 

 

 

 

원래는 이렇게 카테고리에 마우스 오버효과가 없어요.

 

 

 

 

우선 리스트에 마우스를 오버 했을 때 배경색과 텍스트 색상이 바뀌게 하기 위해서 아래 태그를 넣습니다.

 

Fastboot 사이드바 카테고리 마우스 오버_리스트.txt 

#sidebar .category.panel ul li a:hover

{ 

 background-color: #aaa;

 color: #fff;

}

보기 편하게 엔터를 쳤는데, 첨부한 텍스트와 같습니다.

background-color는 배경색이고, color는 텍스트색입니다.

#aaa, #fff 자리에 원하는 색상코드를 넣으면 되겠죠?

전 그냥 다른 모듈의 마우스오버와 같은 색상으로 통일했어요.

 

 

그런데 이렇게만 하면, 우측의 게시물 갯수를 나타내는 뱃지는 변함이 없을거예요.

 

 

뱃지를 가만히 두고 싶으면 그냥 내버려두면 되고,

뱃지도 마우스오버 효과를 주고 싶다면 아래 태그를 추가하세요.

 

Fastboot 사이드바 카테고리 마우스 오버_뱃지.txt

#sidebar .category.panel ul li a:hover .c_cnt

{

background-color:#aaa;

color:#fff !important;

}

마찬가지로 #aaa, #fff 자리에 원하는 색상코드를 넣으세요.

color태그에 따라붙은 !important는

간단히 말하자면, 속성값이 중복될 때 얘 값을 적용하겠다! 이 말입니다.

 

 

태그가 중복되지 않는 한 태그 삽입하는 위치는 상관없어요. 

전 그냥 맨 아래에 넣었어요.

 

 

 

 

짠. 마우스 오버 효과가 주어진 모습입니다.

이제 사이드바 카테고리 가독성이 훨씬 높아졌어요!

 

 

찾을 때는 골머리를 앓게 하더니 간단해서 왠지 씁쓸하네요ㅋㅋ