본문 바로가기
웹 코딩/티스토리

북클럽 스킨 - 포인트컬러 활용 '더' 하기

by 알릭2 2020. 9. 6.

기본값은 #04BEB8

 

관리 > 스킨편집에 들어가서 우측의 스킨 설정 영역을 바닥으로 내려보면 포인트컬로 설정이 가능한 걸 볼 수 있습니다.

 

근데, 실제 이 포인트컬러가 적용된 곳을 찾아보면 몇군데 없네요.

(댓글 등록 버튼, 글 내용중 링크 색상, 댓글 수 외 몇몇)

 

물론 북클럽 스킨이 기본적으로 워낙 모노톤이고 단정하기 때문에 이런 최소한의 사용이 더 마음에 들 수도 있습니다.

 

절대적으로 개인적인 취향에 따라 호불호가 갈릴 수 있는 부분이겠지만 저는 이 포인트컬러의 적용 폭을 조금 더 넓히고 싶었습니다.

 

이렇게 하면, 기분이나 시즌에 따라 스킨설정에서 간단하게 이 컬러만 한번 바꿔주면 내가 지정한 부분들의 색상도 한꺼번에 바뀌는 장점이 있다고 본거죠.

 

따라서, 필요하신 분만 적용하시면 되겠습니다. 아니면, 필요한 부분만 추려서 적용해도 되겠고요.

 

적용 방법은, 스킨의 html 의 하단 </body> 끝나기 전에 아래 내용을 <style>...</style> 로 잘 감싸서 넣어주면 됩니다.
(참고로, 스킨 css 에 넣으시면 안됩니다. 포인트컬러 변수의 치환자인 를 이용하기 때문에 꼭 html 에 넣어야 합니다.)

a:hover, a:focus, #header h1 a, #gnb ul li a:hover, #gnb ul li.current a, #gnb ul li a:hover, .sidebar ul li a:hover, .sidebar .category ul li a:hover, .sidebar .tab-ui h2 a:hover, .pagination .selected, .related-articles ul li a:hover, .another_category th a:hover, .another_category h4 a:hover {color:  !important;}

#gnb ul li.current a::after, #gnb ul li a:hover::after, #gnb ul li a:focus::after, .comment-form .submit button { background-color:  !important; }

이때 예를 들어, 

  • 블로그 제목은 건드리고 싶지 않다면 위 소스에서 #header h1 a 를 지웁니다.
  • 상단 메뉴의 현 페이지 강조색은 건드리고 싶지 않다면 위 소스에서 #gnb ul li.current a::after, #gnb ul li a:hover::after, #gnb ul li a:focus::after 를 지웁니다.
  • 물론 필요한 부분의 선택자를 더 추가해도 되겠고요.

 

이런식으로 각기 선택 적용하실 수 있겠습니다.

댓글