상단바 제목 입맛대로 수정하기

FastBoot 티스토리 블로그 스킨 제목 입맛대로 수정하기

  FastBoot의 타이틀은 자동적으로 블로그 제목으로 치환이 되도록 되어 있습니다만 개인의 취향에 따라 수정하는 것이 더 좋겠죠. 또한 너무 제목이 길면 상단바가 2줄이 되는 현상도 있으니 참고하셔서 수정하시면 되겠습니다. skin.html에서 어느 부분을 이야기 하는 것이냐면,

	

<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="fa fa-book"></i> [$$_title_$$] <span class="fa fa-caret-down"></span>
</a>

  이 부분을 이야기 하는 것입니다. [$$_title_$$] 부분을 지우시고 원하는 제목을 넣으시면 그 제목으로 출력이 될 것입니다. 블로그 제목이 긴데 상단바에는 더 짧은 제목을 출력하시고 싶으신 분들은 그렇게 하시면 됩니다.

  그리고, 좌측의 책모양 아이콘을 거슬려 하시는 분도 계실텐데요, 아예 아이콘이 나오기를 원하지 않는다 하시면 <i class="fa fa-book"></i>부분을 삭제하시고(v1.2에는 없었습니다). 혹은 바꾸고 싶다 하시는 분들은 다른 아이콘으로 바꾸면 되는데, 그 부분은 아래 사이트에서 확인하실 수 있습니다.

http://fontawesome.io/icons/

  대충 느낌은 오시죠? fa-book 대신에 원하는 아이콘의 클래스를 넣으면 됩니다. 예를들면 fa-circle과 같이요. 그렇게 되면 책모양의 아이콘 대신 원모양의 아이콘이 나오겠죠. 쉽죠? 위 링크타고 들어가시면 아이콘이 많이 있으니 참조하시면 됩니다.

  또한, 제 블로그처럼 아예 이미지로 치환하시고자 하는 분도 계실텐데요, 그렇다면 우선 상단바가 높이가 50px라는 것을 인지하셔야합니다. 높이 50px의 이미지를 만든뒤 그 뒤 위 코드 <a></a>사이에 <img>태그를 이용하여 이미지를 넣고, 

	

  <a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="#"><img src="https://t1.daumcdn.net/cfile/tistory/247FD74952DB7A411F"/></a>

  이미지야 뭐 비공개포스팅으로 티스토리 서버에 올려줍니다. 링크 따와서 저런식으로 <a>사이에 넣어주시면 되구요,

  또한 아래코드를 style.css에 삽입합니다.

	
.navbar-brand {
  padding: 0;
} 
	

  위 코드를 넣지 않으시면 이미지로 로고부분을 넣었을 때 상단바 크기가 늘어날 것입니다. 참고하셔서 개성있게 수정해보세요~

저작자표시비영리변경금지

'반응형 티스토리 > FastBoot' 카테고리의 다른 글

FastBoot 스킨에 Offcanvas 적용  (5)	2014.03.22
FastBoot스킨에 Locator 추가  (5)	2014.03.21
반응형 갤러리 스킨 FastBoot v1.4 배포  (95)	2014.03.17
FastBoot 갤러리형 / 리스트형 / 심플타이틀형 모드 선택 추가  (15)	2014.03.15
반응형 스킨 FastBoot을 갤러리 스킨으로?  (16)	2014.03.14
상단바 제목 입맛대로 수정하기  (13)	2014.03.14
반응형 스킨 FastBoot v1.3.5 공개 / 배포 (IE8 지원)  (117)	2014.03.12
우측 배찌 색깔 바꾸기  (6)	2014.03.12
[임시패치] FastBoot IE8 동작 개선  (18)	2014.03.10
FastBoot스킨 IE8 속도 빠르게 하기 / 플러그인 호환 문제  (10)	2014.03.10
FastBoot v1.3 반응형 스킨 블로그에 적용하기  (62)	2014.03.08