Fastboot v1.6.2 사이드바 타이틀 색상 변경하기

저번 포스팅에서는 Fastboot 스킨의 상단메뉴바 색상을 바꿔보았죠.

간단해서 금방 따라하셨으리라 생각합니다.

 

☞ 이전글 : Fastboot v1.6.2 블로그 상단메뉴바 색상 변경하기

 

이제 사이드바 타이틀 색상을 변경할 차례인데요. 이게 조금 번거롭다면 번거로워요.

 

우선 필요한 준비물이 있어요.

HTML편집기(메모장도 가능)

제가 알려드리는 검색어만 콕 찝어서 수정하고 끝낼거면 메모장으로 가능하구요,

추후 응용하여 사용하고 싶으신 분은 HTML편집기를 준비하세요.

 

메모장이야 윈도우에 기본으로 설치되어 있을거고 

HTML편집기는 다양한데 저는 notepad++ 란 프로그램을 사용합니다. (사실 다른 소프트웨어를 모릅니다.ㅋㅋㅋㅋ)

☞ notepad++ 7.3.2 다운로드 바로가기

 

설치버전, 미설치버전 등등 있으니 원하는 대로 받으시고, 64비트는 64비트 전용으로 받으셔야 하니 유의하세요.

 

 

#1. fastboot.css 파일 얻기

 

준비가 되셨으면, 본격적으로 요녀석을 바꿔봅시다.

 

 

우선 본인이 사용 중인 Fastboot 스킨을 다운로드 하여 Fastboot.css 파일을 얻을 거예요.

사실 Fastboot.css 파일에 손을 대지 않았다면 굳이 사용중인 스킨을 다운 받을 필요가 없어요.

아래 첨부한 Fastboot v1.6.2 fastboot.css 원본 파일을 받으셔도 됩니다.

fastboot.css

 

관리 < 꾸미기 < 스킨 < 스킨다운로드 !

 

 

압축된 파일을 받으셨을텐데요, 압축을 해제해주세요.

압축 해제한 폴더의 images폴더로 가면 아래와 같이 fastboot.css 파일이 있을거예요.

얘를 손봐줘야 합니다.

 

 

 

 

#2. fastboot.css 파일 수정하기 (간단버전)

 

일단 메모장으로만 수정하는 방법에 대해 설명하겠습니다. 

fastboot.css 파일을 더블클릭하면 요렇게 연결 프로그램이 뜰거예요. 그럼 메모장 선택하고 확인!

(혹시 이렇게 안 뜨면 먼저 메모장을 열어 파일을 불러오기 하셔도 돼요.)

 

 

 

열어보면~~

헉, 이렇게 정신사나운 태그들이 불라불라불라불라 되어있어요.

 

 

 

하지만 제가 지름길을 알려드릴테니 당황하지 말고 Ctrl+F 를 누르세요.  

 

[ .panel-default>.panel-heading{color:#434a54;background-color:#e6e9ed;border-color:#e6e9ed} ]를 찾으셔서

 색상코드 #e6e9ed   두 개를 원하는 색상코드로 바꾼 후 저장하면 됩니다.

아래 텍스트파일 복사하셔서 쉽게 검색하세요~

fastboot 사이드바색상 검색문장.txt

 

 

 

 

 

 

 

#3. 수정한 fastboot.css 파일 업로드 하기

 

이제 수정한 css파일로 교체해줘야겠죠?

티스토리 관리 < 꾸미기 < HTML/CSS편집 < 파일업로드 탭에서

기존의 fastboot.css 파일을 삭제하고~

 

 

 

 

메모장으로 수정한 fastboot.css 파일을 업로드 합니다. 저장.

 

 

그럼...끝.

끝입니다. 쉽죠? 후후후

이렇게 바뀌었어요. 컬러가 막 유치유치원스럽네요.

(css파일을 교체하면 완전 바로 적용되지 않더라구요. 한 30초에서 1분 정도 기다려요.)

 

 

 

 

#4. fastboot.css 파일 편집 응용편

 

이번에는 HTML편집기를 이용하여, 원하는 위치를 찾아 수정하는 방법을 알려드릴게요.

우선 fastboot.css 파일을 보기 좋게 수정해야합니다.

 

HTML편집기로 Fastboot.css 파일을 엽니다.

저는 notepad++ 프로그램 위주로 설명할게요.

 

일단 원본 fastboot.css 파일을 열면 이렇게 태그들이 한줄로 주우우우우우우욱 있어요.

아까 메모장을 보던 거랑은 다르죠.

7번째 줄과 11번째 줄이 어마무시하게 길어요. 이렇게 한줄로 모든 태그가 적용되면 제가 사용하는 방법을 쓸 수가 없어요.

 

 

그래서 임의로 엔터를 쳐서 아래와 같이 열(세로)을 바꿔줘야해요.

 

전 이런 식의 코드를 처음봐서 ..... 아무렇게나 엔터를 쳐도 되는건지, 혹은 정확히 어디마다 끊어야하는지 모르지만

일단 태그가 끝나는 [ } ] 위주로 끊어주었어요. 

일일이 하려면 노가다이니 제가 11번째줄만 임의로 수정한 파일을 올려드릴게요.

 

 fastboot.css

 

이 파일을 다시 업로드 합시다.

조금 번거롭지만 한 번 이렇게 열을 나누어놓은 파일을 업로드해놓으면

앞으로 커스터마이징 하는데에 도움이 될 거예요.

티스토리에서 파일업로드 하는 법은 알죠?

기존 fastboot.css 파일은 삭제하고 수정한 fastboot.css 파일을 업로드해주세요.

 

 

 

이제 요소검사를 통해서 사이드바 타이틀 색상을 어디서 변경해야할지 찾아봅시다.

요소검사 활용하는 방법에 대해선 이전 포스팅을 참고해주세요. 아주 유용한 방법이랍니다.  

 

☞ 이전글 : 홈페이지 요소 검사 활용하기

 

 

① 사이드바 타이틀 부분에 마우스 오른쪽 클릭

② 요소검사 클릭

개발자도구 창에서 재빠른 눈치로 해당된 태그를 찾습니다.

초록색 박스(④번)에 보면

.panel-default > .panel-heading에 배경색과 테두리에 #e6e9ed 색상이 적용되었네요. 혹시 얘네가 맞나 확신이 없다면 저 체크박스를 해제했다가 다시 체크했다가를 반복하며 사이드바 타이틀 부분의 색상이 변하는지 보세요. 영향을 받는 속성이라면 색상이 바뀌겠지요.

자, 그리고 fastboot.css(80) 이라고 되어있죠? 감이 오시나요.

fastboot.css 파일의 80번째 줄에서 속성을 정의하고 있다!! 이 말입니다.

 

 

 

HTML편집기로 돌아가 fastboot.css 파일을 열어요.

 

80번째 줄로 슉슉 가서 [ .panel-default > .panel-heading ]이 있나 한번 보세요.

딱! 보이죠?

이렇게 세로 열 순서를 이용해 원하는 코드를 보다 빠르고 쉽게 찾기 위해 css파일을 수정한 거에요.

배경색 background-color와, 테두리색 borde-color에 #e6e9ed 색상코드가 쓰였군요.

이 두개를 원하는 색상으로 변경하면 됩니다.

 

 

저장 후, 수정된 fastboot.css 파일 다시 업로드하는 것 잊지 마세요.!!!!!!!

그럼 끝~~

 

 

 

이것 말고도 스킨 중에는 fastboot.css에서 정의한 것들이 꽤 있어요.

Fastboot v1.6.2 원본이라면,  본문의 관리자메뉴가 아래와 같이 알록달록 할 거예요.

얘 역시 fastboot.css에서 정의하고 있답니다.

 

 

이번 포스팅의 응용편을 참고하시면 쉽게 변경하실 수 있답니다.

전 이렇게 싸그리 색을 지워버렸어요.ㅋㅋㅋㅋ

 

        

 

 

인텔레고님께서 궁금해하셔서, 나름 열심히 포스팅을 했는데

괜히 복잡하게 풀어놓았나 어쨌나 쉽게 이해하시려나 모르겠네요.

아무튼 fastboot 스킨 사용하시는 분들께 도움이 되었으면 합니다.