기본형 그누보드를 반응형으로 만들기 팁(1) 정보
기본형 그누보드를 반응형으로 만들기 팁(1)본문
1. 여러 테마를 사용할 기회가 있기 때문에 무조건 테마사용으로 합니다.
2. config.php
define('G5_USE_MOBILE', false);
3. theme/basic/head.sub.php
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
/*if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}
*/
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
?>
~~
웹폰트 아이콘을 사용하기 위해 추가해 줍니다.
<?php
if (defined('G5_IS_ADMIN')) {
if(!defined('_THEME_PREVIEW_'))
echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;
} else {
// echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;
echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/default.css">'.PHP_EOL;
}
echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">'.PHP_EOL;
?>
부트스트랩을 사용하기 위해 추가해 줍니다.
http://getbootstrap.com/getting-started/#download
에서 Source code 를 다운받아 사용합니다.
<!--[if lte IE 8]>
<script src="<?php echo G5_JS_URL ?>/html5.js"></script>
<![endif]-->
<?php if(!defined('G5_IS_ADMIN')) { ?>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="<?php echo G5_URL?>/bootstrap/3.3.6/dist/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo G5_THEME_CSS_URL?>/theme.css" rel="stylesheet">
<link href="<?php echo G5_THEME_CSS_URL?>/color.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="<?php echo G5_THEME_URL?>/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php } ?>
4.theme/basic/tail.sub.php
관리자페이지는 부트스트랩을 사용하지 않기위해 추가합니다.
<?php if(!defined('G5_IS_ADMIN')) { ?>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="<?php echo G5_JS_URL?>/showup.js"></script>
<?php } ?>
<?php if ($is_admin == 'super') { ?><!-- <div style='float:left; text-align:center;'>RUN TIME : <?php echo get_microtime()-$begin_time; ?><br></div> --><?php } ?>
2. config.php
define('G5_USE_MOBILE', false);
3. theme/basic/head.sub.php
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
/*if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}
*/
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
?>
~~
웹폰트 아이콘을 사용하기 위해 추가해 줍니다.
<?php
if (defined('G5_IS_ADMIN')) {
if(!defined('_THEME_PREVIEW_'))
echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;
} else {
// echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;
echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/default.css">'.PHP_EOL;
}
echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">'.PHP_EOL;
?>
부트스트랩을 사용하기 위해 추가해 줍니다.
http://getbootstrap.com/getting-started/#download
에서 Source code 를 다운받아 사용합니다.
<!--[if lte IE 8]>
<script src="<?php echo G5_JS_URL ?>/html5.js"></script>
<![endif]-->
<?php if(!defined('G5_IS_ADMIN')) { ?>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="<?php echo G5_URL?>/bootstrap/3.3.6/dist/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo G5_THEME_CSS_URL?>/theme.css" rel="stylesheet">
<link href="<?php echo G5_THEME_CSS_URL?>/color.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="<?php echo G5_THEME_URL?>/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php } ?>
4.theme/basic/tail.sub.php
관리자페이지는 부트스트랩을 사용하지 않기위해 추가합니다.
<?php if(!defined('G5_IS_ADMIN')) { ?>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="<?php echo G5_JS_URL?>/showup.js"></script>
<?php } ?>
<?php if ($is_admin == 'super') { ?><!-- <div style='float:left; text-align:center;'>RUN TIME : <?php echo get_microtime()-$begin_time; ?><br></div> --><?php } ?>
추천
6
6
댓글 22개
우앙 감사합니다~
해보고 싶네요,,,그런데 실력이 될까 모르겠어요...
메인디자인을 테마 비사용 상태에서 만들었는데...
이런 경우는 어떻게 해야 할까요?
해보고 싶네요,,,그런데 실력이 될까 모르겠어요...
메인디자인을 테마 비사용 상태에서 만들었는데...
이런 경우는 어떻게 해야 할까요?
사용으로 바꾸시고 테마에 스킨을 다 때려 넣으면 됩니다. ^^
감사합니다. 한번 해봐야겠네요. ^^
기본형 그누보드를 반응형으로 만들기 팁
감사합니다
빌더에 비해 테마는 변경이 쉬웠는데... 좋은 테마를 만드는 방법을 알려주셔서 감사합니다.
새삼 G5 반응형웹 테마를 만드신분들이 존경스럽습니다.
아래 검색어로 구글링하시면 적합한 반응형웹 무료 템플릿들이 많습니다.
Free Responsive Web Templates
새삼 G5 반응형웹 테마를 만드신분들이 존경스럽습니다.
아래 검색어로 구글링하시면 적합한 반응형웹 무료 템플릿들이 많습니다.
Free Responsive Web Templates
기본형 그누보드를 반응형으로 만들기 팁
좋은 팁이네요!!! 사용해봐야겠어요~
기본형 그누보드를 반응형으로 만들기 팁(1)
감사합니다.^^
감사합니다.^^
너무 감사합니다.~~~
감사합니다!
그런데 테스트 해보니까 해주신데로 하면 전부 다 동작하는데 쓰기 페이지만 반응형 기능이 잘 안먹는데 이유가 뭐가 있을까요??
답변 부탁드립니다. ㅠㅠ
다시 확인해보니 크롬에서는 되는데... 익스에서만 잘 안 먹습니다. ㅠㅠ
그런데 테스트 해보니까 해주신데로 하면 전부 다 동작하는데 쓰기 페이지만 반응형 기능이 잘 안먹는데 이유가 뭐가 있을까요??
답변 부탁드립니다. ㅠㅠ
다시 확인해보니 크롬에서는 되는데... 익스에서만 잘 안 먹습니다. ㅠㅠ
좋아요
그누 반응형
define('G5_SET_DEVICE', 'mobile');
요것도 바꿔야한다네요
요것도 바꿔야한다네요
감사합니다~
잜 감사합니다.
이번에 도전해봐야겠습니다!!
감사합니다!
기본형 그누보드를 반응형으로 만들기 팁!!
감사합니다.
도전해보려고요^^감솨!