북클럽(Book Club) 스킨의 검색창이 모바일 환경에서 블로그 제목과 겹쳐지는 오류가 있음을 확인했고, 그것을 해결하는 과정을 정리했다.
티스토리 북클럽 스킨 검색창 오류 확인
본 블로그를 모바일 환경에서 테스트해 보다가 어이없는 상황을 발견했다.
위와 같이 검색창을 사용할 때 확장된 검색창 영역이 블로그 타이틀을 제대로 가리지 못하고, 겹쳐지는 상황을 연출한 것이다. 이대로라면 입력된 글자를 제대로 식별할 수 없어서 사용자에게 혼란을 주게 된다.
티스토리 북클럽 스킨 검색창 오류 해결의 위한 CSS 수정
다음 과정과 같이 CSS 편집을 통해 해결할 수 있었다. 먼저 티스토리 블로그 관리 페이지로 들어가서 [스킨 편집] 메뉴 선택하고,
[html 편집]을 클릭해 HTML 편집 페이지로 들어간다.
[CSS] 탭을 클릭, [Ctrl + F] 또는 [Command + F]를 눌러 찾기 기능을 활성화한 뒤 [#header .util .search input]을 검색. 그러면 위 스샷에서 보이는 코드 블럭을 찾을 수 있는데, 여기서 빨간색으로 밑줄 친 [background-color] 값을 [transparent]에서
블로그 타이틀 배경색과 동일한 색상 값으로 수정해 준다. 내 경우는 진한 회색인 #333 값으로 수정. 이후 [적용] 버튼 눌러 저장해 주면 검색창 오류가 해결된다.
북클럽 스킨 CSS 수정 결과
깔끔하게 해결 완료.