Fastboot v1.6.2 블로그 상단메뉴바 색상 변경하기

Fastboot 스킨이 깔끔하고 심플하고 다 좋은데, 색상이 제 스탈이 아니에요.

그래서 처음 스킨을 적용하자마자 색부터 바꾸는 게 일이었는데,

가끔 뭔 짓을 해도 제 능력 범위내에서 못 찾는 경우가 있어요.

제가 컴퓨터 분야는 워낙 야매로 후다닥 터득하고, 대신 적용도 야매로 후다닥...

그러다보니 지식이 완전치를 못하거든요.ㅋㅋㅋㅋ

 

그래서 이럴 땐... 어떻게 하느냐... 

해당 색상코드를 알아내어 fastboot 모든 파일을 뒤져서 일괄적으로 바꿔버립니다.

빠른 시간에 후딱 처리할 수 있다는 것이 장점인 대신,   

단일색상으로 변경할 수 밖에 없어서 원치 않는 부분까지 변경되는 부작용이 있을겁니다. 

마침 질문이 들어와서 겸사겸사 

블로그 상단메뉴 색상과 사이드바 타이틀 색상을 변경하는 방법에 대해 설명드릴게요.

 

 

참고 : fastboot v.1.6.2 원래 기본스타일은 이렇습니다.

(상단메뉴 기본 색상코드는 #434a54, 사이드바 타이틀 색상코드는 #e6e9ed 입니다.)

 

 

 

 

#1. 상단메뉴(디렉토리) 색상 변경

 

이제 익숙하시리라 싶네요.  관리 < 꾸미기 < HTML/CSS편집 < CSS탭으로 이동하시구요.

 

Ctrl+F, <secondnav>를 검색해주세요.

수정할 곳은 딱 4군데.  아래 그림의 ①,②,③,④번 박스의 빨간 밑줄 부분을 원하는 색상코드로 바꿔주면 됩니다.

 

 

 

 

#2. 상단메뉴(디렉토리) 색상 변경(심화)

 

난 좀 더 세분화하여 색상을 지정하고싶다면

아래 샘플처럼 좀 더 디테일하게 상단메뉴바 색상을 컨트롤하고 싶으시다면 더 보기를 눌러 펼쳐보세요.

각 태그에 대한 설명이 간략하게 포함되어 있습니다.

 

위 그림의 번호는, 아래 그림의 태그 속성과 대응합니다.

위 그림에서 변경하고 싶은 영역의 번호를, 아래 코드에서 찾아 빨간 박스 색상코드만 수정하시면 됩니다.

① #secondNavWrap   -  기본 상단메뉴바  

② #secondNav>ul>li  -  배경이 아닌 텍스트지만, 리스트 때문에 점 표시가 생기므로 1번과 동일한 색상으로 변경해서 숨겨주세요.

③ #secondNav>ul ul ul a  -  오른쪽 하위 메뉴

   (#secondNav>ul ul ul  -  위 3번에 가려져 블로그상에 나타나지는 않지만... 그냥 3번과 동일한 색상으로 변경해주세요.)

④ #secondNav>ul ul li:hover>a   -  오른쪽 상위 메뉴 마우스 오버

⑤ #secondNav>ul ul ul li:hover>a  -  오른쪽 하위 메뉴 마우스 오버

⑥ #bread_nav a:hover  -  왼쪽 디렉토리 경로 마우스 오버

 

 

 

포스팅 하고 보니 엄청 쉽네요.

제가 아무 것도 모를 때는 엄청 끙끙 앓으며 이렇게 바꿔보고 저렇게 바꿔보고 했는데 말이죠... ㅋㅋ

 

사이드바 타이틀 색상은 기존 방법과는 조금 다르게 수정해야합니다.ㅠㅠ

그래서 다음 포스팅에서 별도로 다루도록 할게요.

 

☞ 다음글 : Fastboot v1.6.2 사이드바 타이틀 색상 변경하기

 

 

 

 

PS. 티스토리에서 HTML 색상코드 쉽게 확인할 수 있는 방법!

 

티스토리 블로그 작성시 글씨색상 설정하는 곳에서

피커로 간단하게 원하는 색상태그를 얻을 수 있습니다.*^^* (아래 GIF 참고)