FastBoot 티스토리 스킨의 상단 Locator 커스텀하기
상단 Locator를 입맞대로 바꿔보자
FastBoot스킨에서 Locator가 1.5버전부터 추가가 되었죠.
그런데 이 부분을 마음에 들어하시지 않는 분도 계신 것 같고, 색상도 변경하고 싶어하시는 것 같고.. 여러가지 수정하고 싶으신 것 같으셔서, 이번에 Locator에 관련된 것은 몰아서 한번 포스팅을 해보려고 합니다.
1. Locator 없애기
일단 가장 극단적으로 없애는 방법을 알아보면서 FastBoot에 Locator가 어디에 위치하는지 알아봅시다.
<!--F 상단 네비게이션 바 끝 -->
<s_t3>
<div class="container">
<div class="row">
<div id="leftContent" class="col-md-9">
<!--F Breadcrumb (Locator) -->
<div id="bread_nav">
</div>
<div id="content">
<!--F 추천 광고위치 1 : 포스팅 제목 윗부분(모든 페이지에 출력) -->
생각보다 찾기는 쉬운데요, 왜냐하면 Locator가 실제 위치하고 있는 위치에 skin.html에 제가 표식을 달아놨기 때문입니다. 중간에 보시면 <!--F Breadcrumb (Locator) -->라고 주석을 달아둔 부분이 있는데, 이 부분이 Locator부분입니다. 즉, 만약에 Locator를 없애고 싶으시다면, <!--F Breadcrumb (Locator) --><div id="bread_nav"></div> 이 부분을 통째로 지우시면 됩니다. 물론 완벽하게 없애려면 스크립트와 CSS에서도 제거해야겠지만.. 이 부분은 오히려 설명드리면 복잡해질 것 같아서 넘어가겠습니다. 일단 저 부분만 지워도 없어진다는 것 아시겠죠?
2. Locator와 사이드바 상단 여백 조정하기(top-margin)
상단에 좀 높이가 안맞아서 안이쁘다고 하시는 분들이 많은데, 제가 생각해도 이번버전에서 상단여백이 칼같이 맞지는 않은 것 같습니다. 상단 여백을 수정하려면 어떻게 해야되냐하면, 우선 사이드바의 표식이 #sidebar이고, 왼쪽 Content가 오는 부분의 표식이 #leftContent 인 것을 알고 넘어가도록 합시다. 그런 후 CSS를 살펴봅시다.
일단 style.css에 보면 아래처럼 되어 있습니다.
#sidebar { margin-top:5px; }
현재 #sidebar의 위쪽의 여백은 5px이 주어져 있는 상태입니다. 그런데 #leftContent의 경우에는 상단에 Locator가 위치하여 위쪽의 높이가 맞지 않는 상태죠. 그렇다면? sidebar를 아래로 내려야겠죠. 아래처럼 보이게 하고 싶다는 겁니다.
보시면 왼쪽 영역하고 카테고리 상단 부분이 딱 맞춰진 것을 볼 수 있습니다. Locator의 높이가 20px입니다. 그렇다면 위에서 margin-top이 5px였으니까 20px를 늘리면 높이가 위 그림처럼 맞게 나올 것입니다. 따라서 CSS를 다음과 같이 수정합니다.
#sidebar { margin-top:25px; }
그러면 이제 좀 더 깔끔하게 보이겠죠?
3. Locator 색상 바꾸기
오늘 설명할 내용 중에서는 아마 제일 복잡할 것 같은데요, 아래 부분을 수정하셔야 합니다.
#bread_nav a { display: block; float: left; height: 20px; background: #5ac8fa; text-align: center; padding: 2.5px 10px 0 20px; position: relative; margin: 0 5px 0 0; font-size: 10px; text-decoration: none; color: #fff; } #bread_nav a:after { content: ""; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #5ac8fa; position: absolute; right: -10px; top: 0; z-index: 1; }
두 부분을 수정해야 하는데, 우선 #bread_nav a 부분입니다. 중간에 보시면 background 라고 되어 있는 부분이 있고, 다른 한 부분은 a:after에 border-left 부분에 보시면 맨 끝부분에 같은 색상이 있는 것을 보실 수 있습니다. 이 두 부분을 같게 하면서 수정하시면 됩니다. 참고하실만한 색상표는..
링크 걸어드리니 색상 참조하셔서, 수정하시면 될 것 같습니다. 플랫한 스킨이기 때문에 플랫한 색상을 넣으셔야 어울립니다..
이 정도로 알려드리면 이제 Locator에 대한 커스텀은 마무리가 되는 것 같습니다. 혹시라도 더 궁금하신 사항 있으면 질문하시면, 글내용을 추가하든 포스팅을 추가하든 해서 커스텀에 도움이 될 수 있도록 해 드리겠습니다. ^^
'반응형 티스토리 > FastBoot' 카테고리의 다른 글
티에디션 없애기 / Flipboard Layout (29) | 2014.04.18 |
---|---|
블로그를 사이트로 보이게하는 Second Navigation (19) | 2014.04.11 |
FastBoot 색상 세부 조정 중 / FastBoot 앞으로의 방향 (25) | 2014.04.09 |
[임시] FastBoot Offcanvas 상하 스크롤 만들기 (6) | 2014.04.06 |
사이드바와 본문 크기/위치 조절하기 (Bootstrap 기반 스킨) (41) | 2014.04.05 |
FastBoot 티스토리 스킨의 상단 Locator 커스텀하기 (24) | 2014.04.04 |
블로그를 모바일 앱처럼! FastBoot v1.5.1 배포 (313) | 2014.03.29 |
FastBoot IE7 동작 (21) | 2014.03.27 |
FastBoot v1.4 반응형 스킨 기본값 설정 해야할 것 (31) | 2014.03.23 |
FastBoot 스킨에 Offcanvas 적용 (5) | 2014.03.22 |
FastBoot스킨에 Locator 추가 (5) | 2014.03.21 |
새삼 깨달은거지만, 포스팅할거는 생각만 하지말고, 단어 한개씩이라도 꾸준히 메모장 같은데에 메모 해놓는게 최선인거 같아요 ㅜㅜ
구상 해논거 포스팅 하려면... 완전 쌩노가다가 되 버려서 ㅋㅋ
폰이고 패드고 어플실행하고 귀찮아서 -0-
저도 노트랑 펜을 사놓고, 노트랑 펜 탓하다가 또 하나 사고 하다보미 한번도 사용 안한 펜이랑 노트만 쌓여가네요 ㅋㅋ
iOS에서의 대댓글은 곧 저만의 방식으로 해결을 함 해 봐야겠네요 ㅎㅎ 생각하고 있는건 opacity 로 평상시에는 흐릿하거나 혹은 일부 요소가 안보이게 했다가 호버시 모든 요소가 보이게 하는걸로 해 보려고 구상만 하고 있습니다. ㅎㅎ
여기에 글감이 떠오르면 저장해놨다가 나중에 꺼내쓰곤하죠.. ^^ 아이디랑 비번으로 간단히 로그인할 수 있게 해두었습니다. ㅎㅎ
제가 한짓이지만요 ㅎㅎ
제가 쓸 것 만들기도 벅차 배포까지는;;
심미적인 부분이 아직 많이 부족한 스킨입니다.
스킨 적용해두고 오늘에나 발견했네요;;;
포스팅 보려 들어가면상단 Locator에 카테고리 경로가 잡히잖아요.?
이게 좀 이상합니다..;;
카테고리로 들어가서 목록이 쭉~~ 나올때는 상단 Locator에 경로가 정상적으로 잡히는데
포스팅만 들어가면 카테고리 주소 앞에 공백이 엄청 들어갑니다. 화면에 나오는 카테고리명은 정상인데 주소값에 공백이 무지 많네요;;
왜 이러는지 알수있을까요??
아무리 봐도 모르겠어서 질문 남겨봅니다 ㅠㅠ
지금은 정상으로 보이는군요..
이게 os랑 관련이 있을까요???
제가 집에 있는게 죄다 애플이라 윈도우에서 확인은 못해봤는데..
제 맥, 아이패드, 아이폰 에서는 아직까지도 제대로 안되고 있네요 ㅠㅠ
https://24.media.tumblr.com/8068b48fc563a00f96ce8c4b014e0e44/tumblr_n4dpjz1kk81sv1k7yo1_1280.jpg
https://31.media.tumblr.com/3c73b92c2cfc9d87d146a373352939bd/tumblr_n4dpjz1kk81sv1k7yo2_1280.jpg
1번째 스샷처럼 포스팅으로 진입해서 상단 로케이터를 클릭하면 2번 스샷과 같이 에러가 뜹니다.. 주소에 보면 %20이 가득 들어간게 보이실거에요.. 다만 3번 스샷처럼 카테고리 목록 상에서까지는 로케이터 주소가 정상인데 포스팅만 들어가면 저런식으로 나오네요...
방금 윈도우에서 확인해보니 동일하게 보이구요.. 왜 이러는걸까요 ㅠㅠ
제보 감사합니다.
카테고리에 특수문자를 쓰면 일어나는 현상인 듯 합니다..
<a id="current_category" class="label-default label" href="[$$_article_rep_category_link_$$]" style="display:inline">
<i class="fa fa-folder-open"></i>
[$$_article_rep_category_$$]
<span class="caret"></span>
</a>
부분에서요, 앵커태그(<a>)의 id부분을 삭제하시구요.
<div id="current_category" class="hidden">[$$_article_rep_category_$$]</div>
로 따로 그 밑에 넣어주세요. (</a> 뒤에)
줄을 여러번 나눈게 문제의 원인인 듯 합니다.. div로 깔끔하게 한줄로 넣으면 해결될 문제로 보입니다. 이상하게 특수문자가 들어가면 그런 현상이 있네요.
$$는 ##로 바꿔주시구요..
빛보다 빠른 피드백 감사드려요~~~ㅎㅎ
괜히 카테고리에 특수문자는 넣어놔서 고생했네요 ㅎㅎ;;
다시 한번 감사드립니다~
글쎄요.. 말씀하시는 문제는 커스텀중 발생하신 것 같은데 지금은 확인이 좀 힘드네요.. ㅠ
동영상은 저도 넣어본적이 없어서 뭐라 말씀은 못드리겠습니다만 아마 동영상 배경 등으로 검색하시면 나오지 않을까 싶어요.