상단바 제목 입맛대로 수정하기
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에는 없었습니다). 혹은 바꾸고 싶다 하시는 분들은 다른 아이콘으로 바꾸면 되는데, 그 부분은 아래 사이트에서 확인하실 수 있습니다.
대충 느낌은 오시죠? 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 |
padding: 0;
}
코드를 넣었는데도 불구하고 Locator 를 침범하네요ㅠ
분명 50px에도 맞췄는데...
저도 위 방법을 사용하려 로고를 넣은 것이라서, 확인이 안되어 왜 안되시는지 이유는 잘 모르겠습니다.
그랬는데 레디즈님 소스 보기를 해서 그 소스를 그대로 복사해서 했는데 해결됐습니다!
대신 화살표 방향이 사라졌네요..ㅋㅋㅋ..
분명 같은 코드인데..
이유를 모르겠네요 ^^;
class보시면 두개 중복되는게 겹쳐있죠~~
어쨌든 지금은 해결하셨다니 다행이네요.
전 이제 블로그 개편 보고서 쓰고 있습니다:)
다시 한번 감사합니다!
이 포스팅에서처럼 제목을 이미지로 바꿔서 집어넣었는데요, 모바일 웹(queenoffrost.tistory.com/m)으로 보니 상단바 아래로 집어넣은 이미지가 나오는 문제가 생겼네요. 이 문제는 어떻게 해결해야 할까요?
덧붙여 상단바를 보면 홈-태그-방명록-검색으로 이어지는 요소들이 쭉 있는데, 저는 검색부분만 간격을 오른쪽으로 더 보내고 싶습니다. 이렇게 하려면 어떤 부분을 손대야 하는지 알려주실수 있나요?
a class="hidden-xs navbar-brand dropdown-toggle"
이렇게 되도록요
2. 검색바 class에 위와 비슷한 요령으로 pull-right를 추가해주시면 됩니다.
1.61 스킨을 사용중인데. 1.61에는 다른 방법으로 해야할까요?ㅠ