​​ FastBoot스킨 상단 고정바 색상변경

FastBoot스킨 상단 고정바 색상변경

 

 

작업을 하다보니 밑에서 부터 위로 올라가게 되네요.

본문 글씨크기를 키우다보니 본문제목크기도 키우고, 제목색상을 바꾸다 보니 상단바 색상도 바꿔야 할것같아서 여기까지 오게 되네요.

위의 제 블로그 상단부 빨간박스부분이 뭔가 좀 부조화스럽습니다. 색상이라도 바꿔줘야 할것 같습니다.

 

방법은 역시나 추측하시는 대로 본문수정할때와 같습니다.

티스토리 HTML편집에서 CSS탭으로 가서 Ctrl F 찿기를 눌러줍니다.

검색창에 #SecondNavWrap 라고 치고 엔터를 칩니다. 대략 1000에서 1100대줄 사이쯤에 있습니다.

 

 

 

코드를 보시면 감이 오겠지만 밑줄이 배경색상이고, 나버지 부분들은 상단 고정바의 넓이 등을 설정하는 부분입니다. 상단바의 두께까지 손대보실 분들은 여기서 설정을 바꾸어 주시면 되겠습니다.

 

그런데 당부드릴 말씀은 CSS작업중에는 가능한한 전체 원본백업을 해놓으시던지, 아니면 저장시에 취소버튼을 잘 활용하십시요. CSS가 꼬여버리면 일이 아주 복잡해지죠.

각설하고 다시 본론으로 돌아와서 백그라운드 색상은 저같은경우는 진한초록색(#005500)으로 바꿨습니다. 

색상코드표는 티스토리 글쓰기 편집창에서 상단메뉴중 배경색상 바꾸기에도 있으나 종류가 좀 단순한듯 해서 저는 네이버 색상팔레트를 씁니다.

네이버 검색화면에서 '색상표'라고 검색하면 결과에서 색상표가 나오게 됩니다.

 

 

자 이제 상단 고정바의 색상까지 변경하였습니다.

 

 

 

아 그런데 문제가 있습니다. 

 

 

그림에서 보는 바와같이 메뉴들에 마우스 포인터를 대면 하위메뉴들이 나오는데 그때 하위메뉴의 바탕색도 초록색으로 바꿔줘야 할것 같습니다.

조금전의 css창에서 작업했던곳에서 스크롤을 조금만 내리면 #secondNav>ul ul ul a{width:100%; ... 로 시작되는 부분이 있는데, 그줄에서 background-color를 원하는 색상으로 코드교체 해줍니다.

 

 

 

이제 코드를 바꾸셨으면 저장하고 나간뒤 새로고침하여 페이지를 보면 아래 그림의 상단바처럼 진한초록색으로 바뀌어 있습니다.

수고하셨습니다.

 

 

댓글

Designed by JB FACTORY