기존 1.2 테마 또는 다른 테마에 비반응형 PC모드 적용방법
기존 1.2 버전 테마나 미소테마 등에서 비반응형 PC모드를 적용하는 방법입니다.
1. 먼저 APMS 최신버전을 받아서 테마 내 /assets/bs3 폴더를 사용 중인 테마에 그대로 덮어씌워 줍니다.
덮어씌우면 부트스트랩 3.1.1 버전에서 3.2.0 버전으로 업데이트하고, 비반응형 CSS를 추가해 줍니다.
2. 최신 버전의 /assets/js/switcher.js 파일을 열어서 53라인에 있는 아래 코드를 복사해서 사용 중인 테마에 그대로 넣어 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | $( "#pc-style" ).change( function (e){ var new_mode = $( this ).val(); if (new_mode) { $( ".thema-mode" ).attr( "href" , sw_url + "/assets/bs3/css/bootstrap-apms.min.css" ); $( "body" ).removeClass( "responsive" ); $( "body" ).addClass( "no-responsive" ); } else { $( ".thema-mode" ).attr( "href" , sw_url + "/assets/bs3/css/bootstrap.min.css" ); $( "body" ).removeClass( "no-responsive" ); $( "body" ).addClass( "responsive" ); } return false ; }); |
3. 최신 버전의 /assets/switcher.php 파일을 열어서 55라인의 아래 코드를 사용 중인 테마에 그대로 넣어 줍니다.
1 2 3 4 5 6 7 | < h3 >3. PC Mode Style</ h3 > < div class = "layout-style" > < select id = "pc-style" name = "at_set[pc]" > < option value = "" >반응형 PC모드</ option > < option value = "1" <?php echo ($at_set['pc'] == "1") ? ' selected' : '';?>>비반응형 PC모드</ option > </ select > </ div > |
4. 최신 버전의 /assets/thema.php 파일을 열어서 37라인의 부트스트랩 CSS 불러오는 아래 코드를 사용 중인 테마에 그대로 넣어 줍니다.
1 2 | $bootstrap_css = (_RESPONSIVE_) ? 'bootstrap.min.css' : 'bootstrap-apms.min.css' ; add_stylesheet( '<link rel="stylesheet" href="' .THEMA_URL. '/assets/bs3/css/' . $bootstrap_css . '" type="text/css" media="screen" class="thema-mode">' ,0); |
APMS 1.2 이전의 베이직테마나 미소테마의 경우 부트스트랩 위치가 테마 내 head.php 파일에 있을 수 있으나, 수정법은 동일합니다.
5. 최신 버전의 /colorset/basic/colorset.css 파일을 열어서 26라인의 아래 코드처럼 사용중인 컬러셋을 수정해 줍니다.
1 | .wrapper { position : relative ; overflow : hidden ; margin : 0 auto ; } |
기존 코드에서 비반응형시 사이트 가운데 정렬을 위해 margin:0 auto; 가 추가 되었습니다.
6. 최신 버전의 /colorset/basic/colorset.css 파일을 열어서 283라인의 아래 코드처럼 사용중인 컬러셋을 수정해 줍니다.
1 2 3 4 | .no-responsive .wrapper { min-width : 1200px ; } .no-responsive .boxed.wrapper { width : 1200px ; } .no-responsive .container { width : 1170px ; } .no-responsive .boxed .navbar- fixed .navbar { width : 1200px ; } |
비반응형시 사이트 너비를 잡아주는 부분입니다.
7. 마지막으로 사용 중인 컬러셋 내의 미디어쿼리(@media..) 내의 클래스에 전부 .responsive 를 추가해 주고, 사용 중인 위젯의 CSS 파일도 열어서 미디어쿼리가 있다면 .responsive 클래스를 추가해 줍니다.