FastBoot 티스토리 스킨의 상단 Locator 커스텀하기

Posted by Readiz
2014.04.04 02:12 반응형 티스토리/FastBoot


상단 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에 대한 커스텀은 마무리가 되는 것 같습니다. 혹시라도 더 궁금하신 사항 있으면 질문하시면, 글내용을 추가하든 포스팅을 추가하든 해서 커스텀에 도움이 될 수 있도록 해 드리겠습니다. ^^




이 댓글을 비밀 댓글로
  1. 로케이터는 저도 커스텀 해보기 위해서 궁리를 해봤지만 별다른 아이디어가 생각나지 않아서 기본 상태 그대로 유지하기로 했습니다. ㅎㅎ
    • 안주무시는군요.. ㅎㅎ onasaju님 블로그 방명록 한번만 확인부탁드릴게요. 제가 글써논게 있어서..
  2. 음.. 잘보고갑니다 ^^
    • 처음 1.51 적용하고 색만바꾸고 쓰고있엇는데 누가 문의했나보네요 ㅎㅎ
    • 자답을 하시다니.. ㅋㅋ
  3. 방명록에 글 남기고 왔습니다. ㅎㅎ 잠들기전에 아이패드로 블로그 유입경로 확인하고, 빈번하게 발생하는 키워드를 확인해서 추후에 추가 포스팅 하려고 메모 해놓는게 습관이 됐네요 ㅎㅎ

    새삼 깨달은거지만, 포스팅할거는 생각만 하지말고, 단어 한개씩이라도 꾸준히 메모장 같은데에 메모 해놓는게 최선인거 같아요 ㅜㅜ

    구상 해논거 포스팅 하려면... 완전 쌩노가다가 되 버려서 ㅋㅋ
    • 저는 오리지날 수첩이랑 연필로 메모해놓는답니다 ㅎㅎ
      폰이고 패드고 어플실행하고 귀찮아서 -0-
    • 조금 번거롭지만 대댓글 달기 위해서 제 블로그를 새창에서 한번 열어주고 리플라이 링크 활성화 시켜서 댓글 남깁니다 ㅎㅎ

      저도 노트랑 펜을 사놓고, 노트랑 펜 탓하다가 또 하나 사고 하다보미 한번도 사용 안한 펜이랑 노트만 쌓여가네요 ㅋㅋ

      iOS에서의 대댓글은 곧 저만의 방식으로 해결을 함 해 봐야겠네요 ㅎㅎ 생각하고 있는건 opacity 로 평상시에는 흐릿하거나 혹은 일부 요소가 안보이게 했다가 호버시 모든 요소가 보이게 하는걸로 해 보려고 구상만 하고 있습니다. ㅎㅎ
    • 저는 따로 아예 아이디어를 위한 페이지를 만들어놨어요.. pin.readiz.com
      여기에 글감이 떠오르면 저장해놨다가 나중에 꺼내쓰곤하죠.. ^^ 아이디랑 비번으로 간단히 로그인할 수 있게 해두었습니다. ㅎㅎ
  4. 답글보고 자기전에 웃고갑니다
    제가 한짓이지만요 ㅎㅎ
  5. 저도 이렇게 멋진 반응형 스킨 만들어 보고 싶네요~
    제가 쓸 것 만들기도 벅차 배포까지는;;
    • 멋지다고 표현하기엔.. 아직 더 가야할 길이 많습니다. ^^
      심미적인 부분이 아직 많이 부족한 스킨입니다.
  6. 리디즈님 질문이 있습니다!
    스킨 적용해두고 오늘에나 발견했네요;;;
    포스팅 보려 들어가면상단 Locator에 카테고리 경로가 잡히잖아요.?
    이게 좀 이상합니다..;;
    카테고리로 들어가서 목록이 쭉~~ 나올때는 상단 Locator에 경로가 정상적으로 잡히는데
    포스팅만 들어가면 카테고리 주소 앞에 공백이 엄청 들어갑니다. 화면에 나오는 카테고리명은 정상인데 주소값에 공백이 무지 많네요;;
    왜 이러는지 알수있을까요??
    아무리 봐도 모르겠어서 질문 남겨봅니다 ㅠㅠ
    • 지금 해결하셨나보네요? ㅎㅎ
      지금은 정상으로 보이는군요..
    • 아직 미해결 상태입니다 ㅠㅠ
      이게 os랑 관련이 있을까요???
      제가 집에 있는게 죄다 애플이라 윈도우에서 확인은 못해봤는데..
      제 맥, 아이패드, 아이폰 에서는 아직까지도 제대로 안되고 있네요 ㅠㅠ
    • 혹시 문제가 되는 부분 스크린샷과 주소 알 수 있을까요.. 제 환경에서는 에러가 확인이 안돼서..
    • https://24.media.tumblr.com/a7bcbb990f731375992bb1326523ebcc/tumblr_n4dpjz1kk81sv1k7yo3_1280.jpg

      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로 깔끔하게 한줄로 넣으면 해결될 문제로 보입니다. 이상하게 특수문자가 들어가면 그런 현상이 있네요.
      $$는 ##로 바꿔주시구요..
    • 와우! 해결되었습니다!!^^
      빛보다 빠른 피드백 감사드려요~~~ㅎㅎ
      괜히 카테고리에 특수문자는 넣어놔서 고생했네요 ㅎㅎ;;
      다시 한번 감사드립니다~
    • ^^ 어쩌다보니 타이밍이 잘 맞았네요.. ㅎㅎ 수고하세요~
    • 2014.04.21 23:50
    비밀댓글입니다
    • 네비게이션:http://blog.readiz.com/145
      글쎄요.. 말씀하시는 문제는 커스텀중 발생하신 것 같은데 지금은 확인이 좀 힘드네요.. ㅠ
      동영상은 저도 넣어본적이 없어서 뭐라 말씀은 못드리겠습니다만 아마 동영상 배경 등으로 검색하시면 나오지 않을까 싶어요.
    • 2016.10.09 21:57
    비밀댓글입니다

티스토리 툴바