반응형 스킨 네비게이션 바 색상 변경하는 방법

Posted by Readiz
2014.03.04 22:36 반응형 티스토리/Tistory

 

Tistory Blog 반응형 스킨에서 상단바 색상 변경하는 방법


 

  세리카님이 질문하신 내용입니다. 별로 어려운 내용은 아닙니다만 CSS를 손대지 못하신다면 어디를 고쳐야 하는지 혼란스러울 수밖에 없겠죠. 여기서 소개할 변경법은 FastBoot 스킨 뿐만 아니라 스켈레톤 스킨이라던지, 상단에 네비게이션 바가 위치한 반응형 스킨(혹은 Bootstrap을 사용한 스킨) 등에서 모두 사용 가능한 방법입니다. 부트스트랩 네이게이션(Nav)를 커스터마이징 하는 방법이 될 수 있겠네요. 역시 이것이 가능한 이유는 티스토리 블로그의 확장성 때문일텐데요. 방법을 알아봅시다.

 


 

  기본 FastBoot 블로그 스킨입니다. 크롬 개발자도구 (F12)를 활용하여 어디를 수정해야 색이 바뀌는지 알아봅시다.

  상단 네비게이션 바(nav)에서 오른쪽 클릭을 하고 속성을 보면 다음처럼 배경색이 지정되어 있는 것을 볼 수 있습니다.

 

 

 

  그림처럼 체크된 부분을 보시면 #3da8e3으로 배경색이 지정되어 있습니다. 이를 수정해주면 되는데요, 적당한 색상을 찾아야 합니다. 부트스트랩은 기본적으로 플랫한 디자인이 잘 먹히므로 플랫한 색상(채도가 좀 높은)이 어울리겠는데요, 제가 이전에 포스팅 해 둔 색상들이 있는데 이걸 참조할 겁니다.

 

 

 

#e74c3c

 

저는 이 색상이 맘에 드는군요. 이를 적용하려면 아래와 같이 CSS Overriding을 해주면 됩니다.

 

/* Bootstrap Navigation Overriding by Readiz */ .navbar-default { background-color: #e74c3c; }


자 이제 이렇게 CSS에 추가를 해 주고 나면 아래처럼 화면에 원하는 색상으로 네비게이션 바 색상이 적용이 됩니다.

 

 

 

  바꾸고 보니 이 색상도 검색버튼 색상만 좀 매칭되게 바꾸면 잘 어울리는 것 같네요. 아무튼 크롬 개발자도구 덕분에 무언가 스킨이나 부분부분의 CSS를 변경할 때 참 편리합니다. 위와 같은 요령으로 수정하고 싶은 Object 위에서 오른쪽 버튼->요소검사(N)을 누른 뒤 해당하는 속성 값을 변경시켜주면 되니까요. 같은 요령으로 네비게이션 뿐만 아니라 부트스트랩의 모든 요소들을 Overriding하여 변경시킬 수 있습니다.

 

이 댓글을 비밀 댓글로
  1. 궁굼한게 하나 있는데요... 리드이즈님이 배포하신 스킨에서는 사이드바가 좌측에 있는데, 지금 리드이즈님의 블로그처럼 우측으로 옮기려면 어떤 CSS를 수정 해 줘야 할까요?
    • ^^; 이것도 글을 따로 올려야 할까봐요. 간단하게 설명드리면 col-pull-xxx 부분과 col-push-xxx부분이 있는데 이 두 부분을 삭제해주시면 제 블로그처럼 위치가 옮겨질겁니다. 따로 한번 포스팅 하겠습니다.
    • 감사합니다.... 그냥 배포해주신대로 쓰면 좋은데, 욕심만 많아져서... 이것저것 꾸며보고 싶어서 자꾸 수정만 하게 되네요 ㅋ
    • 생각나는대로 한번 적어보았습니다.
      http://blog.readiz.com/146
  2. 내용 감사합니다.
    잘 적용하여 쓰겠습니다. ^^;
    • 네 수고하세요~
      그리고 상단바 검색바가 아마 두줄이 되는 문제는 메뉴가 늘어나서가 아닐까.. 싶습니다. 검색창 크기를 아마 줄이시면 해결될거에요. 근본적으로는 메뉴 숨기는 기준이 되는 px를 수정하면 되긴 한데..
    • 아, 그러면 되는군요. 한번 찾아서 시도해 보겠습니다.
      그리고 뭔가 특이점을 찾았는데요, 공지사항을 등록하니 Posted by Readiz 라고 표시가 됩니다. 요것은 수정을 어떻게 해야할까요? ^^;
    • 아 그 부분 보셨군요;; 저도 발견해서 지금 수정을 해 둔 상태인데 이미 배포를 해 버려서 다음 버전 때 같이 fix한 것을 배포하려고 했습니다. skin.html에서 Posted by로 검색하셔서 Readiz부분을

      <span class="text">Posted by</span> [__##_blogger_##__]
      이렇게 해주시면 됩니다.

      댓글에서 저 부분이 안들어가네요. __##와 ##__는 ##로 수정해주시기 바랍니다.
    • 빠른 피드백 감사합니다. ^^
  3. 바로 적용해봐야겠네요 ㅋㅋㅋ
    • soeun
    • 2014.03.06 19:42 신고
    와 정말 좋은 정보감사합니다.
  4. 네비게이션 바 요소 검사에서 색상 코드값을 바꾸면 현재의 페이지에서는 적용이 되는데...
    css에 알려 주신 코드
    /* Bootstrap Navigation Overriding by Readiz */
    .navbar-default {
    background-color: #e74c3c;
    }
    를 추가해도 적용이 안 되는데요?
    • 뒤에 !important 붙여보시길
      background-color: #123456 !important;
    • 아~!
      적용되는군요.
      감사합니다.
      좋은일 많이 하셔서 분명 福 많이 받으실 겁니다~^^
  5. 개발자님 질문있어요.
    카테고리 선택시 웹반응형으로 (갤러리) 글들이 자동으로 움직이면서 됐었는데
    지금은 그렇지가 않아요. 막 사진이 겹치고 사진이 안뜨고
    이상합니다..
    지금 벌써 3번째 스킨을 새로 깔아봤는데도
    계속 이런 현상이 지속됩니다. 뭐가 잘못된건지; 궁금합니다.
    • 무슨 플러그인을 까신건지는 모르겠는데, 한번 하나씩 꺼보셔야 할 것 같습니다. min0988님 블로그에 보니
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
      라고 jQuery의 예전 버전을 불러오는 코드가 head부분에 있습니다. Bootstrap과 호환되지 않는 jQuery버전입니다. 아마 사용하시는 플러그인 중에 어떤 것이 예전버전의 jQuery를 불러오는 듯하니 한번 꺼보시길.. 저는 무슨 플러그인을 사용하고 계신지 알 수가 없으므로 직접적인 조언은 못드리고 원인 알려드립니다.
  6. 질문좀 드릴게요~ 상단바 두께를 조금 줄이고 싶은데 어떻게 하면 될까요?
    아무리 찾아봐도 모르겠어서요ㅜㅜ 상대적인 수치로 되어있는 것 같은데, 검색창 크기를 줄이는 방법을 모르겠네요.

    검색창과 상단바 메뉴를 오른쪽으로 붙이는 방법은 어떻게 하는지도 부탁드릴게요 ㅜㅜ float:right를 어느 태그 사이에 넣어야 하는 건가요?

    제가 실력이 너무 부족해 질문도 제대로 못 하네요. 리드이즈님 스킨 정말 잘 쓰고 있습니다!
  7. 무슨말인지 하나도 모르겠네요..ㅠㅠㅠㅠㅠ 네비게이션 바 색상도 바꾸고싶고, 폰트도 바꾸고 싶은데... 다 맘처럼 안되네요. 답답합니다.ㅠㅠ 제가 이다지도 지독한 컴맹... 태그맹이였나봐요.
    • 크롬부터 까시고 F12 눌러서 element들 속성 하나씩 바꿔보면서 배워보세요.
    • 안녕하세요. 답변 주실줄 모르고 푸념 식으로 글 달은거였는데.. 답변 주셔서 감사해요. 제가 색상이랑 폰트 바꾸려고 컴퓨터 킬때마다 해보려곤 하는데 매번 실패하네요... 제가 이 글을 보고 이 글대로 크롬으로 F12번을 누르고 해봤는데요...저기서 말하는 수정 코드를 스타일시트 CSS란 어디에 넣어야하는지를 모르겠네요. html 태그란에 넣는걸까요? 제 컴퓨터가 이상한건지 저희집 크롬에서는 f12번 누르고 코드를 찾아봐도 저 화면처럼 색상코드표? 가 있는 소스가 없어요... 코드 찾는건 F12에서 찾는거고, 코드 수정은 스타일시트에서 바꾸는게 맞는거죠? 맞다면 어디쪽에 저 오렌지컬러 색상네비바 예시 코드를 삽입해야하는건지요?ㅠ
    • 설정->HTML/CSS 편집에서 넣으시면 되구요
      해당하는 구성요소에서 우클릭하셔서 요소보기 누르시면 뜰겁니다

티스토리 툴바