[이윰] 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기

페이지 정보

yadolee 루루아빠 2,792 2016.11.22 22:49:33

본문

반응형 테마 - PC에서 메인은 오른쪽, 사이드는 왼쪽에 위치하고 모바일에서는 메인이 위쪽, 사이드는 아래쪽에 위치
1. 사이드 레이아웃 설정은 이윰환경설정에서 오른쪽으로 설정한다.

2. 그누보드5/eyoom/theme/설치된 테마/layout/head_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:main-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 main-box"> 

3. 그누보드5/eyoom/theme/설치된 테마/layout/side_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:side-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 side-box"> 

4. 그누보드5/eyoom/theme/설치된 테마/css/custom.css 에 아래와 스타일 정의를 추가한다.

@media (min-width:992px){
    .main-box {float:right !important}
    .side-box {float:left !important}
} 
메인과 사이드 레이아웃(col-md-9, col-md-3) 각각의 클래스명에 flaot 속성 스타일을 줘서 디바이스 화면 넓이 992px 이상에세 메인 레이아웃은 오른쪽으로 사이드 레이아웃은 왼쪽으로 위치하게 만든다.
991px 이하에서는 콘텐츠의 위치에 따라 메인이 먼저 위에 위치하게 된다.
레이아웃 반대의 경우 float속성을 반대로 하면 되며 변경에 따라 스타일은 맞게 수정하면 된다.
추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,339,196
레벨 100
경험치 1,501,823

Progress Bar 56.08%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 24249 페이지

제목 글쓴이 날짜 조회 추천
이윰  🏆 최신글 추출 시 공지글을 제외하기 루루아빠 2017.08.19 3.2k 0
이윰  댓글+1🏆 비회원도 게시글 추천 및 비추천 허용하기 루루아빠 2017.06.07 3.1k 1
이윰  🏆 현재 주소를 변수에 미리 담아 에러 메세지 후 현재 주소로 이동시키기 루루아빠 2017.05.24 3.0k 0
이윰  🏆 게시판 관리자의 레벨이 글쓰기 권한보다 낮더라도 태그 작성하기 루루아빠 2017.05.03 2.7k 0
이윰  🏆 특정 Div 클래스 전체를 링크 걸기 루루아빠 2017.04.29 3.3k 0
이윰  🏆 이윰빌더에 태그 검색창 달기 루루아빠 2017.04.18 2.8k 0
이윰  🏆 해당 페이지에 적용된 템플릿언더바 전체 변수 확인하기 루루아빠 2017.02.24 3.1k 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 2.8k 0
이윰  🏆 이윰빌더 조건문 변수 루루아빠 2016.12.13 2.8k 0
이윰  🏆 🚩 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 2.8k 0
이윰  🏆 블로그 스킨(masonry)에서 Lazy Load(unveil) 사용시 목록 올바르게 보여 주기 루루아빠 2016.11.16 2.9k 0
이윰  🏆 INDEX 화면을 특정 게시판으로 변경하기 루루아빠 2016.11.06 4.1k 0
이윰  🏆 태그 클릭시 관련된 게시글 페이지당 노출 갯수 정하기 루루아빠 2016.10.09 3.0k 0
이윰  🏆 특정 게시판에 다른 헤더 파일 불러오기 루루아빠 2016.10.01 2.8k 0
이윰  🔒 쇼핑몰 테마 메인 화면을 쇼핑몰로 바꾸기 루루아빠 2016.09.24 4 0
이윰  🏆 그누 5.2.1 패치로 비회원 댓글 작성시 오류 메세지 띄우는 문제 루루아빠 2016.09.04 3.1k 0
이윰  🏆 Eyoom Builder 1.2.6 패치 루루아빠 2016.08.26 2.9k 0
이윰  🏆 태그 더보기시 페이지당 태그 노출 갯수 조정하기 루루아빠 2016.08.25 3.1k 0
이윰  🏆 Google Maps API Key를 발급받아 이윰 스킨에 적용하기 루루아빠 2016.08.24 5.7k 0
이윰  🏆 첫 번째 이미지 파일 첨부 후 본문에는 첫 번째 첨부 이미지 보이지 않게 루루아빠 2016.08.05 3.3k 0
이윰  🏆 메인주소를 쇼핑몰로 사용하기 루루아빠 2016.07.27 3.0k 0
이윰  🏆 Eyoom Builder 1.2.5 패치 루루아빠 2016.06.10 3.0k 0
이윰  🏆 익스 및 엣지 브라우저에서 모달(modal)창에 스크롤바가 하나 더 생기는 문제 루루아빠 2016.06.06 3.4k 0
이윰  🏆 이윰레벨을 사용치 않고 그누레벨만 사용하기 루루아빠 2016.05.17 3.1k 0
이윰  🏆 모달(modal) 슬라이드 다운 슬라이드 업 효과 없애기 루루아빠 2016.05.13 3.8k 0
이윰  🏆 📸 여분필드를 활용한 간단한 게시판 입력 서식 만들기 루루아빠 2016.05.13 3.7k 0
이윰  🏆 게시글 본문에 태그가 포함된 경우 검색시 그대로 노출되는 문제 해결 루루아빠 2016.05.13 2.7k 0
이윰  댓글+1🏆 SELF-HOSTED로 Jwplayer7.x 사용시 외부 링크(jwpcdn.com)에서 스킨 가져오는 문제 루루아빠 2016.05.11 4.3k 0
이윰  🏆 본문 내용 추출시 특정 태그 제거하기 루루아빠 2016.05.09 3.1k 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2.9k 0