square 스킨 모바일 토글 버튼 수정 하는 방법

IT/블로그 팁
2019. 5. 10. 07:00

안녕하세요, 오늘은 square 스킨 편집 방법에 대한 내용을 포스팅 해보려 합니다. square 스킨 반응형에서 카테고리를 보이게 하는 메뉴 버튼을 토글 버튼이라 합니다. 토글 버튼을 수정 하는 방법 입니다. 혹시 앵커광고를 하단에 고정하시는 분들은 토글 버튼이 안 보일 수도 있으므로 아래와 같은 방법으로 해결해 보시기 바랍니다. 그리고 추가적으로 토글 버튼에 색을 넣어 더 잘 보이게 만들어 보았습니다. 색상표를 참고 하여 원하는 색상을 입력 해보시기 바랍니다.

반응형 스킨 토글 버튼 이동 및 색상 변경 하는 방법

위의 사진은 반응형 스킨 모바일 환경에서의 기본 화면 입니다. 왼쪽 아래에 토글 버튼이 위치해 있는 것을 확인 할 수 있습니다. 이 토글 버튼을 수정 하면 아래와 같이 수정이 됩니다.

토글 버튼 수정 후의 모습입니다. 오른쪽 위로 이동 하였고 배경색도 변경 된 모습입니다. 앵커광고를 하단에 고정하여 사용하시는 분들은 위 사진처럼 토글 버튼을 옮겨 놓으면 가독성과 접근성이 상승하는 효과를 얻으실 수 있습니다.

수정 코드

[스킨 편집]으로 이동 하여 CSS 부분을 수정 하시면 됩니다. [Ctrl+F]를 누른 후 찾기 기능을 활성화하여 [sidebar-toggle]이란 단어를 검색 합니다. 검색 하면 두 개 정도가 찾을 수 있습니다. 그 중 위 사진과 같은 코드를 찾은 후 빨간색 네모박스의 부분을 아래의 사진과 같이 변경 하면 됩니다.