모바일 상단바 / 데스크탑 네비게이션바 색상 변경하기

Posted by Readiz
2014.05.23 07:05 반응형 티스토리/FastBoot

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



  상단바 색상 변경은 많은 분들께서 질문하시는 사항인데, 이것과 관련하여 1.6버전의 공식적인 커스텀 관련 문서가 아직 없어서 CSS에 관련해 잘 모르시는 경우에는 수정하기 어려운 부분인 것이 사실입니다. 우선 모바일 상단바 색상 변경에 대해 알아봅시다.



모바일 상단바 색상 변경


  FastBoot의 모바일 상단바 모습은 아래와 같습니다.




크롬 개발자도구(F12)에서 확인하면 쉽게 어디를 바꿔야하는지 위치를 찾을 수 있으니 도전해보세요.



  기본 색상은 #333333입니다. navbar-inverse로 overriding하여 색상을 넣어두고 있기 때문에 style.css에서 아래와 같이 넣어주시면 됩니다. 추가적으로 넣어주시는 것입니다.


	
.navbar-inverse {
  background-color: #aaabbb;
  border-color: #aaabbb;
} 
	


  여기에 들어가는 색상은 플랫한 색상이 어울립니다. 아래 포스팅을 참고하시면 도움이 될겁니다.





  그럼 아래처럼 색상이 변합니다.






데스크탑 네비게이션바(하단) 색상 변경




  v1.6부터 데스크탑의 경우 상단바가 두개가 되었는데요, 하나는 블로그 제목과 검색창이 있는 상단바이고, 다른 하나는 엑수시아님의 Locator와 카테고리가 있는 상단바입니다. 이것의 색상변경은 style.css의 아래 부분을 참고하시면 됩니다. style.css에서의 위치는 거의 최하단에 있습니다.


	
#secondNavWrap{background-color:#434A54;height:31.5px;margin-bottom:15px;}
#secondNavWrap.fixed {
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 50px;
}
#secondNav{padding:0 10px;}
#secondNav>ul {float:right; height:32px;}
#secondNav>ul>li {height:32px;color:transparent;background-color:transparent;}
#secondNav>ul>li>ul>li>a>span.c_cnt{display:none;}
#secondNav .c_cnt{font-size:8px;}
#secondNav>ul>li>a{display:none}
#secondNav>ul ul,#secondNav>ul ul ul{margin:0;list-style:none;padding:0;background-color:none;}
#secondNav>ul ul ul{visibility:hidden;position:absolute;left:0;top:100%;background-color:#434A54;padding:0;}
#secondNav>ul ul li:hover>ul{visibility:visible}
#secondNav>ul ul li{position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
#secondNav>ul ul li:hover{z-index:1;}
#secondNav>ul ul ul ul{position:absolute;left:100%;top:0;-moz-box-shadow:#585858 0px 0px 1px;-webkit-box-shadow:#585858 0px 0px 1px;box-shadow:#585858 0px 0px 1px;}
#secondNav>ul ul{font-size:0;z-index:999;position:relative;display:inline-block;padding:0;*display:inline;}
#secondNav>ul>li>ul>li>a{margin-right:5px;}
#secondNav>ul>li>ul>li>a:before{font-size:13px;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height: 1;padding-right: 5px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;content: "\f07b";} /* Don't Change Font-Family (icon) */
#secondNav>ul ul li a{display:inline-block;}
#secondNav>ul ul>li{margin:0;}
#secondNav>ul ul a:active,#secondNav>ul ul a:focus{outline-style:none;}
#secondNav>ul ul a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#FFF;cursor:pointer;padding:8px 5px;height:32px;}
#secondNav>ul ul ul li{float:none;margin:0;}
#secondNav>ul ul ul a{width:100%;text-align:left;padding:8px 15px;background-color:#434A54;font:12px Arial,sans-serif;color:#FFF;text-decoration:none;}
#secondNav>ul ul li:hover>a{color:#000;text-decoration:none;}
#secondNav>ul ul ul li:hover>a{background-color:#F5F7FA;color:#000;text-decoration:none;}
#secondNav>ul ul li:hover>a{background-color:#F5F7FA;z-index:1;} 
	


  위 부분을 찾으신 다음에, 배경 색상으로 되어 있는 #434A54부분을 찾으셔야 합니다. 이것을 변경해주시면 됩니다(Ctrl+F 단축키로 검색하시면 편합니다). 한 곳이 아니라 여러곳이 있습니다. 같이 변경해주셔야 색상이 어울릴 것입니다. 마찬가지로 색상은 위에 첨부한 링크를 참고하셔서 플랫한 색상으로 하시는 것이 어울립니다.



이 댓글을 비밀 댓글로
  1. class랑 id도 배포용으로 되어 있네요~ 실험블로그에 적용해봐야겠어요.
    들어오는데 메인화면이 텅 비어있어 깜짝 놀랐습니다 ㅎㅎ;;
    • 음? 어떤 말씀이시죠;;
      이해가 잘 안되네요 ㅋㅋ
    • 아.. 제 컴퓨터가 이상했었네요. 죄송합니다 ^^;
  2. 잘보고갑니다
    개인적으로는 어두운계열이좋아서 월래있던게 더좋아요 ^^
    • 바꾸기를 원하는 분들이 계셔서요~
  3. 블로그 접속하자마자 뜨는 첫메인 화면에 있는 글씨체가 하늘색(게시물을 소개하는 타이틀 제목색깔)인데 다른 색으로 변경하는 방법 좀 여쭤봐도 될까요.
    • #coverDiv a { color: #xxxxx !important; };
      style.css에 적용해보세요.
  4. 저 사이바의 Recommended 글은 어떻게 구현하나요?
    • 질문이 많이 들어와서 아예 포스팅 하였으니 참고 바랍니다.
      http://blog.readiz.com/228
  5. 모바일 상단 색상 변경을 했는데.. 아쉬운게 하나있습니다.. 좌측 슬라이딩 메뉴라고 해야되나요? 그 부분은 색상이 그대로라서 좀 언발란스 한 색상 마치가 되더라구요... 어떤색을 하더라도..^^ 그부분도 색상을 바꿀수 있다면 좋을 듯합니다.
    그럼 수고하세요.
    • 나중에 오프캔버스 수정관련해서 포스팅 하도록 하겠습니다.
    • 2014.06.04 15:30
    비밀댓글입니다
    • 저도 처음에 스킨 제작하게 된 이유가 그 이유도 좀 있었습니다만 그 사이즈의 광고는 상단이 얼마나 작느냐에 관계없이 정책상 불가합니다. ㅎㅎ

      세상에 세로높이 200도 안되는 스마트폰 있겠냐 싶겠지만 정책이 그렇더군요.. 진짜 아무것도 없이 광고뒤 본문이 나와도 경고메일 옵니다.
  6. 네비게이션바에 이상한 점이 하나 뜨는데... 어떻게 고치나요?
  7. ....데스크탑 색상 바꾸기 좀...많이...불편할듯 하네요....
    하핳
  8. 전체적인 블로그 색깔을 배경은 파랑 그리고 텍스트는 하얀색으로 하고싶은데 .. 좀 도와주실수있으신가요?
  9. 고생이 많으십니다..
    하단의 색상은 어디서 바꿔야하나요?
    한참을 찾아봐도 찾기가 힘드네요 ㅠㅠ
    • CSS 부분에서

      #footer {
      color:#fff;
      min-height: 250px;
      padding-bottom:30px;
      padding-top:10px;
      background-color:#34495e;
      }

      백그라운드 컬러 부분 코드 바꿔주시면 되요.
  10. 안녕하세요~질문 하나 드려도 될까요? pc랑 모바일이랑 상단바 색상이 다른 이유가 뭘까요??ㅠㅠ..아무리 시도해봐도 이유를 도통 모르겠어요..도와주실 수 있으신가요?

티스토리 툴바