지식 누리/블로그/인터넷

화이트보드(whiteBoard) 스킨 수정하기

nuon 2010. 3. 23. 23:35
반응형
화이트보드 스킨을 제 블로그에 맞게 일부 수정하는 과정에서 알게 된 것들을 몇 가지 적습니다.

1.링크에 마우스 오버 시 생기는 점선 없애기

링크 점선 없애기

화이트보드 스킨은 링크에 마우스를 올리면 스크린샷과 같이 아래에 점선이 생기고, 배경색이 바뀝니다.

링크 아래에 나타나는 점선을 없애고 싶다면 basic.css파일의 16번째 줄에서

a:hover   { color: #963; background-color: #eee; border-bottom:1px dotted #963;}

밑줄 그은 부분을 삭제하면 됩니다.




2. 이미지 테두리 & 마우스 오버 시 검은 테두리 없애기

이미지 기본 테두리
<이미지 기본 테두리>

마우스 오버 시 검은 테두리
<마우스 오버 시 검은 테두리>
화이트보드 스킨은 기본적으로 이미지를 올리면 주위에 테두리가 생기고, 이미지 위에 마우스를 오버시키면, 이미지 주위에 두꺼운 검은 테두리가 나타납니다.

화이트보드의 독특한 기능이지만 더 깔끔한 본문 스타일을 원한다면 이미지 테두리 및 마우스 오버 시에 나타나는 검은 테두리를 없앨 수 있습니다.

article.css의 52번째 줄에서

.article table img,                                     
.article .imageblock img {                         
 padding: 6px;                                          
 background-color: #f6f6f6;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 margin: 5px 0;
}

.article table img:hover,
.article .imageblock img:hover {
 background-color: #212121;
 border-right: 1px solid #aaa;
 border-bottom: 1px solid #aaa;
}

상자 안의 부분을 모두 삭제하면 됩니다.
만약 기본 테두리만 없애고 싶다면 윗부분을, 검은 테두리만 없애고 싶다면 아랫부분을 지우면 됩니다.



3. 본문 제목 크기 수정하기

화이트보드 스킨은 본문 제목이 상당히 큰 편입니다.

덕분에 화면 자체가 시원시원한 느낌을 주지만, 혹시 큰 제목이 부담스러운 분들은 main.css를 수정해서 글자 크기를 조절할 수 있습니다.

main.css의 288번째 줄에서

.titleBox h2 {
 margin-top: 18px;
 color: #666;
 font: 400 39px "NanumGothic bold","나눔고딕 bold", NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Arial, Sans-serif;
 letter-spacing: -3px;
}

39px을 원하는 크기로 줄여 주면 됩니다.




4. 상단 네비게이션 메뉴 없애기

네비게이션 메뉴

화이트보드 스킨은 최상단에 네비게이션 메뉴가 있습니다.


네비게이션 메뉴 없애기

저의 경우에는 사이드바에 따로 플래시 네비게이션을 사용하기 때문에 상단의 네비게이션 메뉴는 없애고 사용 중인데요, 네비게이션 메뉴를 삭제하려면

skin.html의 32번째 줄에서

<div id="mainNav">
  <ul>
   <li id="navMeta"><a href="https://nuon.tistory.com/" title="처음">home</a></li>
   <li id="navTaglog"><a href="https://nuon.tistory.com/tag" title="태그모음">tag</a></li>
   <li id="navLocalog"><a href="https://nuon.tistory.com/location" title="위치로그">location</a></li>
   <li id="navMedia"><a href="https://nuon.tistory.com/media" title="미디어로그">media</a></li>
   <li id="navGuestbook"><a href="https://nuon.tistory.com/guestbook" title="방명록">guestbook</a></li>
  </ul>
 </div>

상자 안의 부분을 모두 지우면 됩니다.

다른 방법으로는 style.css에 아래 내용을 추가해도 네비게이션 메뉴가 나타나지 않습니다.

#mainNav {display:none;}



반응형