[티스토리 블로그 꾸미기] 검색 버튼 배경색 변경하기

이전 글인 블로그 헤더 배경색/글자색 변경하기에 이어, 이번에는 헤더에 있는 검색 버튼(돋보기)의 배경색을 변경하는 방법을 소개해드리겠습니다. 지난 글에서 배경색을 변경했지만, 검색 버튼(돋보기)의 배경색이 함께 변경되지 않아 어울리지 않는 느낌을 받으셨을 것입니다. (제가 그래요...) 그래서 이번에는 검색 버튼의 배경색도 함께 변경하여 통일감을 주도록 하겠습니다.

티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

스킨 편집 들어가는 순서

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집에서 CSS를 클릭

 

배경색 변경하기

 

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#header .util .search'를 입력합니다. 보통 183번째 줄에 있습니다.

CSS파일에서 검색창에 #header .util .search를 검색하고 현재 검색 버튼의 형태를 확인

아래의 코드를 복사하여 '#header .util .search' 부분에 넣습니다.

#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;
  border-radius: 15px; /* 각진 곳을 둥글게 하는 코드 */
}

 

미리보기로 확인 후 저장합니다.

검색한 #header .util .search를 둥굴게 하는 코드를 넣음.

 

다음 글 예고

 

다음 글에서는 모바일 전환 시 우상단 메뉴 버튼의 배경색 변경 방법에 대해 소개하겠습니다.