기존 1.2 테마 또는 다른 테마에 비반응형 PC모드 적용방법
기존 1.2 버전 테마나 미소테마 등에서 비반응형 PC모드를 적용하는 방법입니다.
1. 먼저 APMS 최신버전을 받아서 테마 내 /assets/bs3 폴더를 사용 중인 테마에 그대로 덮어씌워 줍니다.
덮어씌우면 부트스트랩 3.1.1 버전에서 3.2.0 버전으로 업데이트하고, 비반응형 CSS를 추가해 줍니다.
2. 최신 버전의 /assets/js/switcher.js 파일을 열어서 53라인에 있는 아래 코드를 복사해서 사용 중인 테마에 그대로 넣어 줍니다.
$("#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라인의 아래 코드를 사용 중인 테마에 그대로 넣어 줍니다.
<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 불러오는 아래 코드를 사용 중인 테마에 그대로 넣어 줍니다.
$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라인의 아래 코드처럼 사용중인 컬러셋을 수정해 줍니다.
.wrapper { position:relative; overflow:hidden; margin:0 auto; }
기존 코드에서 비반응형시 사이트 가운데 정렬을 위해 margin:0 auto; 가 추가 되었습니다.
6. 최신 버전의 /colorset/basic/colorset.css 파일을 열어서 283라인의 아래 코드처럼 사용중인 컬러셋을 수정해 줍니다.
/* Site Size Responsive */
.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 클래스를 추가해 줍니다.