데스크탑 상단바 개선

Posted by Readiz
2014.05.07 19:58 반응형 티스토리/FastBoot


본 글은 FastBoot v1.6과 관련이 있습니다.



FastBoot v1.6.1 상단바 개선



  뭐하라님(http://nubiz.tistory.com/)의 의견으로 개선된 기능입니다. 현재 잠수패치.. 라고 하죠. 1.6.1에 수정해두었습니다. 새로 받으시면 업데이트 된 것으로 받으실 수도 있지만, 새로 받지 않으셔도 이 글을 보시면 적용가능하십니다.

  일단 동영상과 스크린샷을 준비했습니다.





평상시




고정(애니메이션과 함께)




 아예 데스크탑에서는 데스크탑 상단바가 고정되도록 개선하였습니다. 이 편이 더 깔끔한거 같기도 하고, 디자인이 좀 더 현실성있네요. 아래는 수정 방법입니다.



CSS 수정


  아래 부분을 찾아주세요. (style.css)


	
#desktopNav {
  height:130px;
  background-color:white;
}
#desktopNav.fixed {
  margin-bottom:47px;
}
#desktopNav p {
  margin:0;
}
#desktopNav .navMiddle {
  padding-top:40px;
}
#desktopNav .navMiddle form {
  margin-top:10px;
  width:60px;
}
#desktopNav .graylink a{
  font-size:9px;
  padding-left:10px;
  color:#aaa;
}
#desktopNav h3 {
  line-height:1;
}
#desktopNav p.rightMenus {
  margin-right:20px;
  margin-top:15px;
}
#desktopNav p.rightMenus a {
  font-size:17px;
  padding-left:15px;
}
#desktopNav .graylink a:hover{
  color:#000;
}
#desktopNav .text-muted {
  font-size:12px;
} 
	


  아래 부분으로 덮어씌워주세요.


#desktopNav { height:130px; background-color:white; } #desktopNav p { margin:0; } #desktopNav .navMiddle { padding-top:40px; } #desktopNav .navMiddle form { margin-top:10px; width:60px; } #desktopNav .graylink a{ font-size:9px; padding-left:10px; color:#aaa; } #desktopNav h3 { line-height:1; } #desktopNav p.rightMenus { margin-right:20px; margin-top:15px; } #desktopNav p.rightMenus a { font-size:17px; padding-left:15px; } #desktopNav .graylink a:hover{ color:#000; } #desktopNav .text-muted { font-size:12px; } body.navFixed { padding-top:177px; } @media screen and (max-width: 767px) { body.navFixed { padding-top:50px; } } #desktopNav.fixed { position: fixed; top: -40px; height: 90px; z-index: 100; width: 100%; } #desktopNav.fixed h3, #desktopNav.fixed a { -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } #desktopNav.fixed h3 { float: left; margin-top: 10px; } #desktopNav.fixed p.text-muted {display:none;} #desktopNav.fixed p.rightMenus a { font-size: 15px; padding-left: 8px; }


스크립트 업로드


  파일을 다운로드 받아서, 스킨 업로드에 가셔서 덮어씌워주세요.






  위처럼 들어가셔서 업로드 해주시면 됩니다.




스크립트 캐싱방지(skin.html 수정)


  사실 위까지만 해주셔도 됩니다만, 기존에 남아 있던 스크립트가 브라우저에 캐싱되어 있어서 바로 적용되는 것으로 보이시지 않을 겁니다. 그래서 skin.html 부분에서 다음 부분을 찾아주세요. (최하단에 있습니다)


<script src="./images/fastboot.min.js"></script>


  아래처럼 뒤에 ?와 임의의 숫자를 붙여주시면 브라우저가 새로운 스크립트로 인식해 다시 로딩합니다.


	
<script src="./images/fastboot.min.js?0507"></script> 
	



  스크립트를 수정해야해서 조금 과정이 복잡해졌지만, 여기까지 하시면 이제 수정 완료입니다.

  좋은의견 내주시고 코드까지 제공해주신 뭐하라님(http://nubiz.tistory.com/)님께 다시한번 감사의 말씀 드립니다 :)


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 1.6.1이 이전버전에비해 매우 깔끔해졌네요
    소스에도 주석이 꼼꼼하게 붙어있어 수정하기에도 좋더라구요..
    항상 수고해주시는 모습에 응원해드리고 갑니다~
  2. 스킨에 가끔 아이콘이
    http://fontawesome.io/ 여기로 연결한 아이콘 맞져?
    아이콘이안보일때가 잇어요 '';;
    • 브라우저랑 운영체제 부탁드릴게요~
      저는 잘 못겪어본 현상이긴 한데 있을 수 있는 문제입니다.
    • 크롬이랑 윈도우7이고요
      한번씩 그러더구요
    • 글쎄요.. CDN서버가 이상이 있는건지..
      어쨌거나 제가 어찌 할 문제는 아닌것 같네요. 그쪽 서버 문제니..;
      fontawesome을 버려야되나.. 요즘은 이생각입니다.
    • 저도 그생각은했엇는데
      혹시나 말해드리면 도움이될까싶어서 '';;
      오늘이야 댓글로 알려드렷네요
      처음에는 일부로 그렇게하는지알고 대수롭게생각했엇거든요 ;;
  3. 뿌듯하네요^^ 완전 초보였는데, 도와주신 리드이지님덕분입니다!
  4. 점점 더 개선되는 모습에 제가 다 기분이 좋네요~
    앞으로가 더 기대되는 리디즈님 스킨입니다!ㅎㅎ
  5. 적용 했습니다. 설명해주신대로 하니, 넘 쉽고 빠르게 적용되었네요 ㅎㅎ 이제 상단 메뉴바의 하얀 배경만.. 개성있는 BG 로 변경하는 일만 남았네요... 그라디언트로 적용하려고 하는데... 다뤄보지 않았던 부분이라.. 시간좀 걸리겠네요.

    매번 감사합니다.
    • 뭔가 도화지 같은 느낌이지 않나요.. ㅎㅎ
      꾸밀 수 있는 방법은 무궁무진 할것 같습니다. 커스텀하는 입장이면..
    • 네 ... 비슷한 느낌을 받았네요. 그냥 이 자체로도 깔끔하고 좋은데,,, 커스터마이징 하게 만드는 욕구를 불러일으키는 거 같아요 ㅋ 의도하신게 아닌가?? 라는 생각도 잠시 해봤네요 ㅋ

      그리고 지금 변경된 상단 메뉴 구성은... 저도 지금과 비슷하게 커스터마이징 하려고 생각했던건데,,, 뭐하라님이 의견 주셔서... 저의 커스터마이징 수고를 덜어주신거 같네요 ... 전 13인치 노트북으로 주로 블로깅을 하다보니, 화면이 넘 좁거든요. 그런 상태에서 Fixed 되는 영역의 높이가 걸리적 거려서 줄이려고 했었거든요.ㅋ

      지금도 저한테는 약간은 부담스러운 높이이긴 한데... 이전보다는 확실히 나아진거 같아요.
  6. 안녕하세요. 좋은 스킨 만들어 주셔서 감사합니다. ^^
    현재 1.61버전으로 넘어가보고 싶은데 카테고리가 많고 제목이 길다보니 메뉴가 두 줄로 나와버리네요.^^;;
    카테고리명을 수정하는 간단한 방법이 있지만
    카테고리명으로 링크를 걸어놓은 글이 많아서 이러지도 저러지도 못하고 있습니다.

    제가 궁금한 것은 3가지 입니다.

    1. 카테고리명 글자수를 제한하는것이 가능한가요?
    2. 원하는 메뉴만 가능한가요?
    3. 1번과 2번이 동시에 가능한가요?

    현재 1.51버젼 잘 사용하고 있으니 천천히 알려주세요.^^

    감사합니다.
    • 1번의 경우는 티스토리에서 지원하고 있지 않나요? ^^;
      카테고리 글자수 제한이라는 옵션이 아마 있는 것으로 알고 있습니다. 이것을 사용하시면 될 것 같은데요..
      2번의 경우는 지원을 안하는 것 같구요.
      카테고리명을 링크를 걸어놓으셨다니.. 난감하시겠어요. 임시 해결책으로는 왼쪽의 Locator를 아예 안보이게 하는 방법이 있습니다. 그렇게하면 좀 더 많은 카테고리가 있어도 두줄로 되는 현상이 없겠죠.
      #bread_nav { display:none; }
  7. 엌 패치버전이 나왓군요 항상 응원하고있습니다
    한가지 질문 드릴게 있어 왔습니다.
    새로운 글을 포스팅했는데 메인 화면에서는 뜨지 않네요
    어떻게 하면 해결할수있는지 질문드립니다
    답변 주시면 감사하겠습니다-
    • 실제로는 뜨는데, 브라우저의 캐싱 문제이니 걱정하지는 않으셔도 됩니다.
      브라우저가 RSS를 기억하고 있다가 페이지를 재 로딩할 때는 이미 불러와 저장하고 있는 것을 쓰거든요.. 시간 지나면 자동으로 뜰거에요. 지금은 뜨시죠? ^^
  8. iframe(유튜브)와 z-index조절이 잘 안되었는지 상단 검은바가 가려져 버리네요..
    혹시 스킨상의 문제라면 수정해야 할 듯 합니다.
    • 브라우저마다 다르군요.. z-index는 충분히 높게 설정되어 있습니다만, 이 문제는 그냥 youtube 문제인듯 합니다.. ㅠㅠ
      제보 감사합니다.. 근데 어쩔 수 없는 듯 해요....
  9. 위쪽 상단바를 아예 없애고 아래쪽 상단바만 고정으로 하되, 마우스로 스크롤해도 애니메이션 없이 그냥 항상 똑같이 보이게 하려면 어떻게 해야 될까요?

    위쪽 상단바 없애기 - 성공
    아래쪽 상단바를 맨 위로 붙여 고정시키기 - 성공
    마우스로 스크롤해도 변화 없음 - 실패

    마우스 휠로 스크롤하면 상단바가 움직임 없이 원하는 그대로 있지만, 마우스 왼쪽 버튼으로 스크롤바를 직접 내리면 상단바가 잠시 위쪽으로 스크롤되어 사라졌다가 다시 나타납니다. 이 부분이 거슬려서 그냥 처음부터 쭉 고정시키고 싶습니다.

    그리고 상단바 항목들에서 왼쪽 네비게이션 바는 마우스를 올려도 위치가 그대로 있는데, 오른쪽 카테고리 항목들은 마우스를 올리면 오른쪽으로 6픽셀씩 이동하고, 페이지가 로딩될 때마다 메뉴가 좌우로 왔다갔다 하는 것이 번잡해 보입니다. 이걸 수정하려면 어디를 만져줘야 될까요? hover나 padding margin 속성을 아무리 뒤져도 이부분 해결이 안되네요.
    • 2014.09.16 15:59
    비밀댓글입니다

티스토리 툴바