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

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

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

모바일 상단바 색상 변경

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

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

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

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

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

2013/12/23 - [Creation/Design] - 플랫 디자인 색상 예제 / 색상코드(색상표)

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

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

  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 단축키로 검색하시면 편합니다). 한 곳이 아니라 여러곳이 있습니다. 같이 변경해주셔야 색상이 어울릴 것입니다. 마찬가지로 색상은 위에 첨부한 링크를 참고하셔서 플랫한 색상으로 하시는 것이 어울립니다.