본문 바로가기

블로그/블로그 관리

Fastboot v1.6.2 카운터모듈 마우스오버 적용하기

Fastboot 제작자님 블로그를 보면,

사이드바 카운터 모듈에 마우스를 오버할 경우

Today, Yesterday, Total 텍스트가 회색에서 흰색으로 바뀌게 됩니다.
근데 배포 블로그에서는 왜인지 적용이 되질 않아서 마우스 오버시 배경색에 글씨가 묻히게 되죠.

 

귀찮아서 에잇 하고 내버려뒀는데, 효자손님께서 질문을 하시어 겸사겸사 파헤쳐보았습니다.

어디서 문제가 된 걸까.. 하고 여기저기 찾아보다가,

그냥 태그를 추가 했어요.... 이번에도 야매입니다. 호호호호호

 

 

아주 간단해요. 한 줄만 추가해주시면 됩니다.

 

일단 수정 전, Fastboot v1.6.2 원본의 마우스 오버시 화면입니다. 

마우스 오버시 글씨가 안 보이죠. 이걸 잘 보이게 바꿔볼게요.

 

 

 

관리 < 꾸미기 < HTML/CSS편집 < CSS편집 탭으로 가세요.

위치는 상관없는데.... 저 같은 경우엔 직접 추가 한 것은 어지간하면 맨 아래에 별도로 주석을 달아 구분해요.

주석은 선택사항이구요~

원하는 위치에 아래 태그를 붙여 넣으세요. 

타이핑 어려우신 분은 텍스트파일 참고하셔서 드래그 복사 붙여넣기   

 

카운터 모듈 오버색상 태그.txt

#sidebar .list-group-item:hover .name{color:#fff;}

 

div sidebar의 list-group-item 클래스에 마우스 오버 하면 name이란 클래스의 텍스트 색상을 #fff로 !

뭐 그런 말입니다.

 

 

관리 < 꾸미기 < HTML/CSS편집 < CSS 에서

맨 마지막에 추가하도록 하죠.

저장!!

 

 

 

 

짠!!

이제 잘 보이네요!

 

 

 

마우스 오버시,

흰색이 아니라 다른 색상으로 바꾸고 싶다면

태그 마지막 부분의 #fff 를 원하는 색상코드로 바꾸면 되겠죠?  *^^*