북클럽 스킨 "포인트 컬러(point-color)" 변경

category > IT/티스토리

무찌마 / 2022. 8. 30. / 댓글

북클럽 스킨의 "skin.html" 파일의 상단에는 1개의 링크와 2개의 헤더 숫자의 색을 지정하는 CSS 스타일 설정 구문이 있습니다.

 

1. 글 본문 텍스트 링크(".entry-content a")

 

 

2. 글 리스트 제목의 개수(".post-header h2 em")

 

 

3. 댓글 제목의 개수(".comments h2 .count")

 

 

모두 동일한 색으로 지정하는 것입니다. 위의 이미지에서 사용한 파란색은 "#0150FE"입니다.


북클럽 스킨 skin.html의 색 설정 코드

 

<s_if_var_point-color>
.entry-content a, .post-header h2 em, .comments h2 .count {color:}
.comment-form .submit button:hover, .comment-form .submit button:focus {background-color:}
</s_if_var_point-color>

 

skin.html 상단의 구문을 발췌해 왔습니다.

"color:"가 미리 지정한 사용자 색을 블로그 전체 해당 텍스트에 설정합니다.

이 구문을 무단 삭제하면 색 설정 기능을 상실합니다. 그럴 경우 CSS 파일(style.css)에 따로 지정해 주어야 합니다.

 

색 선택 주의

 

위의 구문 둘째 줄은 방명록(guest-book)글 본문의 댓글 등록 버튼의 ":hover"와 ":focus" 조건에서의 색을 지정합니다. 첫 줄에서 텍스트와 개수에 설정한 색이 등록 버튼의 hover와 focus 조건의 배경색으로 동시에 설정된다는 뜻입니다.

 

그래서 글자의 색을 선택할 때 등록 버튼의 hover와 focus 배경색으로 무리가 없는지 살펴보아야 합니다. 글자의 색과 등록 버튼의 배경 색을 동시에 만족시키는 것을 찾기 힘들면 CSS 파일(style.css)에서 별도로 설정합니다.


 

이 블로그 등록 버튼의 hover와 focus 배경색을 CSS 파일에 추가 지정하여 사용하고 있습니다. 

이미지의 윗부분이 skin.html에 지정한 var_point-color이고, 아래 부분이 CSS 파일에 추가한  버튼용 배경색입니다. 강제로 지정해야 하기 때문에 !important를 덧붙였습니다.


색 지정 방법

 

"블로그 관리 홈" > "꾸미기" > "스킨 편집" 

페이지 오른쪽 "스킨 편집" 창 하단으로 내려가면 "추가 설정" > "포인트 컬러" 있습니다.

 

 

동그란 (파란색) 버튼을 누르면 색을 지정할 수 있는 팝업창이 뜹니다.

 

마우스로 원하는 색을 클릭하여 선택하거나 위 텍스트 박스에 HTML 색 코드를 입력합니다.

 

적용 버튼을 눌러 저장하고 나오면 색 지정 작업이 끝납니다.

 

댓글