아바다 테마에서 컨텐츠 영역과 사이드바 사이의 간격 조정하는 방법

//워드프레스/아바다 테마/아바다 테마에서 컨텐츠 영역과 사이드바 사이의 간격 조정하는 방법

20160717-아바다테마 컨텐츠영역과 사이드바 사이간격조정_01

아바다 테마에서 사이드바를 사용할 경우(가장 보편적인 사이드바 1개를 이용하는 경우) 사이드 바와 컨텐츠 영역 사이의 간격은 이미 설정된 값(80px)을 사용합니다.(왜 옵션이 많기로 유명한 아바다가 이 설정을 옵션에 넣지 않는지 모르겠지만… 조만간에 옵션에 추가 될 수도 있을것 같습니다.)

이 간격을 조정하는 방법을 알아보겠습니다.

현재는 CSS를 조정하는 방법뿐인데, CSS를 조정하기 전에 현재 사용중인 사이드바의 넓이를 알아야 합니다.

“테마옵션-레이아웃-사이드바 한개를 사용하는 레이아웃” 에 설정된 값을 메모하면 됩니다.
아래의 그림에서는 28% 입니다.

20160717-아바다테마 컨텐츠영역과 사이드바 사이간격조정_02

이때 사용되는 아바다 테마의 기본 CSS는 다음과 같습니다. (위에서 언급했듯이 기본 간격이 80px 입니다.)

body.has-sidebar #content {
    width: calc(100% - 28% - 80px);
}

이 CSS를 임의의 값으로 변경해야 하므로, 차일드 테마의 style.css 파일이나, “테마옵션-Custom CSS-CSS Code” 입력란에 다음과 같이 적어넣으면 됩니다.

body.has-sidebar #main #content {
    width: calc(100% - 28% - 40px);
}

이 CSS 값은 40px로 간격을 조정한 것입니다. 이 값은 각자 원하는 값을 입력하면 됩니다.
중간의 28%는 테마옵션에서 설정한 내 사이트바의 넓이 이므로, 이 값도 각자의 테마에 적용한 값을 입력하면 됩니다.

글쓴이 :

댓글 1개

  1. 박민 2016/07/23 - 01:43 - 답글쓰기

    좋은 정보 늘 감사합니다!

댓글 쓰기