[티스토리] 북클럽 스킨 - 헤더 배경색, 글자색 변경

 

밋밋해보이는 북클럽의 헤더를 내가 좋아하는 색으로 바꿔보자.
요즘 좋아하는 보라색으로 바꿨다.

 

[블로그 관리] - [꾸미기] - [스킨 편집] - [html 편집] - [CSS]

라인의 숫자는 블로그마다 다를 수 있으니 Ctrl + F로 찾는 게 정확합니다.

 

---

[CSS] 117라인 : 헤더 배경색

• Ctrl + F : #header {
• 추가 : background-color: #원하는색상;

 

 

▼ 변경 전

/* Layout Selector */
#header {
	border-bottom: 1px solid #eee;
}

 

▼ 변경 후

/* Layout Selector */
#header {
	border-bottom: 1px solid #eee;
	background-color: #6a4991;
}

 

헤더 배경색은 바뀌었는데 오른쪽의 검색 버튼 배경이 네모로 보인다.
검색 버튼의 배경색도 바꿔주자.

 

 

 

---

[CSS] 153라인 : 헤더 검색 버튼 배경색

• Ctrl + F : #header .util .search {
• 변경 : background-color: #fff; ▶ background-color: #헤더 배경색과 같은 색;

 

▼ 변경 전

#header .util .search {
	position: relative;
	float: left;
	overflow: hidden;
	width: 32px;
	background-color: #fff;
	box-sizing: border-box;
	transition: width 0.5s;
	-webkit-transition: width 0.5s;
}

 

▼ 변경 후

#header .util .search {
	position: relative;
	float: left;
	overflow: hidden;
	width: 32px;
	background-color: #6a4991;
	box-sizing: border-box;
	transition: width 0.5s;
	-webkit-transition: width 0.5s;
}

 

헤더 색이 어두우니 글씨가 잘 안 보인다.
글씨를 하얀색으로 바꿔보자.

 

 

 

---

[CSS] 136라인 : 헤더 글자색

• Ctrl + F : #header h1 a {
• 변경 : color : #333 ▶ color : #fff

 

▼ 변경 전

#header h1 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: #333;
	vertical-align: top;
}

 

▼ 변경 후

#header h1 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: #fff;
	vertical-align: top;
}

 

헤더는 잘 바뀐 것 같다.
헤더 아래에 붙어있는 메뉴바(gnb)도 다음에 수정하고 싶다.