Fastboot 스킨 상단바 타이틀 이미지로 꾸미기

Fastboot을 쓰면서 가장 바꾸고 싶었던게 바로 상단바 타이틀이었다. 타 Fastboot을 사용하는 고수 블로거분들을 보면.. 하나같이 상단바를 이쁘게 꾸며놓으셨더라..

필자는 html이나 CSS 코드를 잘 다루지는 못하기 때문에, 발품을 팔면서 스킨 상단바 이미지를 바꾸는 방법을 터득했다.

오늘은 Fastboot 스킨 상단바 이미지 꾸미기 방법에 대해 자세히 알아보겠다.

상단바 이미지 꾸미기

일단, 기본 Fastboot의 상단바 타이틀화면은 다음과 같다. 이 스킨을 사용하는 유저분들도 아래 그림과 같을 것이라고 생각된다.

상단바 이미지를 꾸미기 위해 가장 먼저 할일은, 상단바 이미지를 제작하여, 제작한 파일을 스킨에 업로드하는 것이다.

title.zip

이 파일은 필자의 블로그 상단바 이미지이다. 1920×100 크기로 만들었으며, 그림상 2단으로 되어있는데 윗부분은 1920×30, 아래부분은 1920×70이다.

여러분들 나름대로 꾸미면 되겠으나, 일단은 위의 이미지로 시험을 해보는것도 좋을 것 같다.

관리자메뉴의 HTML/CSS 편집 화면으로 들어간다.

상단의 파일업로드 메뉴에 들어가서 +추가 버튼을 누른 후, 위의 그림파일을 추가하고 저장 버튼을 누른다.

이 다음이 중요한데, 사실 이미지를 저장했다고 해서 스킨이 변경되는 것은 아니고, 이걸 CSS 코드로 이미지출력을 해야 한다.

위와 같이 CSS 편집창을 열고 가장 아랫부분에 다음과 같이 코드수정을 한다.

/* 170905 상단바 수정코드 시작 */

#desktopNav {background-image:url('images/title.png');height:100px;}

#desktopNav h3 {display:none;}

#desktopNav .text-muted {display:none;}

/* 170905 상단바 수정코드 끝 */

하나하나 살펴보면 다음과 같다.

/* 170905 상단바 수정코드 시작 */ : 나중에 편집의 편의를 위해 추가한 코드의 시작과 끝을 알림. 

#desktopNav : 상단바와 관련된 부분을 나타냄

{background-image:url('images/title.png'); : 업로드한 title.png 파일을 상단바에 등록

height:100px;} : 상단바 높이를 100px로 조절

#desktopNav h3 {display:none;} : 상단바의 타이틀 안보이게 하기

#desktopNav .text-muted {display:none;} : 상단바의 타이틀 아래 설명문구 안보이게 하기

/* 170905 상단바 수정코드 끝 */ 나중에 편집의 편의를 위해 추가한 코드의 시작과 끝을 알림. 

여러분이 주의깊게 봐야할 부분이 업로드파일의 이름인데, 만약 title.png가 아니라 12345.jpg라면, 위의 부분에서 images/12345.jpg 로 변경해야 한다.

또하나 주의깊게 봐야할 점은 높이부분인데, 상단바의 높이는 기본값이 130px이다. 필자가 보기에 필요이상으로 큰 것 같아 100px로 조절했다.

마지막으로, 상단바 타이틀과 설명문구가 이미지와 겹치지 않게 하기 위해 보이지 않게 하기 위한 코드를 추가하였다.

변경된 메인화면 상단바이다. 기존 화면보다 더 깔끔해진 것 같다. ^^

만약 상단바 높이를 100px가 아닌 130px로 그대로 두게 되면, 위의 그림과 같이 이미지가 엉킬 수 있으므로, 잘 조절해야한다.

여태까지 Fastboot 스킨 상단바 이미지 꾸미는 법을 정리해보았다. 맨땅에 헤딩하듯 하나하나 바꿔나가고 있는데, 점점 블로그가 자리를 잡아가는 것 같아 매우 흡족하다 ㅎㅎ. 오늘의 포스팅 끝.