그누보드 - 나리야 사이트 설정 레이아웃[레이아웃, 폰트셋, 컬러셋]확인용[수정]

나리야 사이트 설정 레이아웃[레이아웃, 폰트셋, 컬러셋]확인용[수정] > 그누보드5 팁자료실

그누보드5 팁자료실

나리야 사이트 설정 레이아웃[레이아웃, 폰트셋, 컬러셋]확인용[수정] 정보

나리야 사이트 설정 레이아웃[레이아웃, 폰트셋, 컬러셋]확인용[수정]

첨부파일

nariya_layout.jpg (150.8K) 3회 다운로드 2021-08-31 15:33:49

theme.zip (8.9K) 5회 다운로드 2021-09-01 17:09:52

본문

나리야 사이트설정시 레이아웃, 폰트셋, 컬러셋설정 확인용입니다.

수정파일 : /theme/BS4-Basic/adm/setup_form.php

레이아웃 : 셀렉트박스 theme_layout클래스명 추가


<tr>
<td class="text-center">
    레이아웃
</td>
<td class="text-center">
    <?php $pc['layout'] = isset($pc['layout']) ? $pc['layout'] : ''; ?>
    <select name="pc[layout]" class="custom-select theme_layout">
        <?php echo $sel_option ?>
        <option value="w"<?php echo get_selected('w', $pc['layout']) ?>>와이드</option>
        <option value="ac"<?php echo get_selected('ac', $pc['layout']) ?>>박스 A</option>
        <option value="bc"<?php echo get_selected('bc', $pc['layout']) ?>>박스 B</option>
    </select>
</td>
<td class="text-center">
    <?php $mo['layout'] = isset($mo['layout']) ? $mo['layout'] : ''; ?>
    <select name="mo[layout]" class="custom-select theme_layout">
        <?php echo $sel_option ?>
        <option value="w"<?php echo get_selected('w', $mo['layout']) ?>>와이드</option>
        <option value="ac"<?php echo get_selected('ac', $mo['layout']) ?>>박스 A</option>
        <option value="bc"<?php echo get_selected('bc', $mo['layout']) ?>>박스 B</option>
    </select>
</td>
<td class="text-muted">
    사이트 기본 스타일
</td>
</tr>

폰트셋 : 셀렉트박스 font_scheme클래스명 추가


<tr>
<td class="text-center">
    폰트셋
</td>
<td>
    <select name="co[font]" class="custom-select font_scheme">
        <?php echo $sel_option ?>
        <?php
        $pc['font'] = isset($pc['font']) ? $pc['font'] : '';
        $skins = na_file_list(G5_THEME_PATH.'/css/font', 'css');
        for ($i=0; $i<count($skins); $i++) {
        ?>
            <option value="<?php echo $skins[$i] ?>"<?php echo get_selected($pc['font'], $skins[$i]) ?>><?php echo $skins[$i] ?></option>
        <?php } ?>
    </select>
</td>
<td>
    <select name="co[font_mo]" class="custom-select font_scheme">
        <?php echo $sel_option ?>
        <?php
        $pc['font_mo'] = isset($pc['font_mo']) ? $pc['font_mo'] : '';
        $skins = na_file_list(G5_THEME_PATH.'/css/font/mobile', 'css');
        for ($i=0; $i<count($skins); $i++) {
        ?>
            <option value="<?php echo $skins[$i] ?>"<?php echo get_selected($pc['font_mo'], $skins[$i]) ?>><?php echo $skins[$i] ?></option>
        <?php } ?>
    </select>
</td>
<td class="text-muted">
    테마 내 /css/font 폴더 내 CSS 파일
</td>
</tr>

컬러셋 : 셀렉트박스 color_scheme클래스명 추가


<tr>
<td class="text-center">
    컬러셋
</td>
<td>
    <select name="pc[color]" class="custom-select color_scheme">
        <?php echo $sel_option ?>
        <?php
        $pc['color'] = isset($pc['color']) ? $pc['color'] : '';
        $skins = na_file_list(G5_THEME_PATH.'/css/color', 'css');
        for ($i=0; $i<count($skins); $i++) {
        ?>
            <option value="<?php echo $skins[$i] ?>"<?php echo get_selected($pc['color'], $skins[$i]) ?>><?php echo $skins[$i] ?></option>
        <?php } ?>
    </select>
</td>
<td>
    <select name="mo[color]" class="custom-select color_scheme">
        <?php echo $sel_option ?>
        <?php
        $mo['color'] = isset($mo['color']) ? $mo['color'] : '';
        for ($i=0; $i<count($skins); $i++) { // $skins PC랑 같은 배열임
        ?>
            <option value="<?php echo $skins[$i] ?>"<?php echo get_selected($mo['color'], $skins[$i]) ?>><?php echo $skins[$i] ?></option>
        <?php } ?>
    </select>
</td>
<td class="text-muted">
    테마 내 /css/color 폴더 내 CSS 파일
</td>
</tr>

스크립트 추가


<script>
$(document).ready(function() {
    /* 레이아웃 */
    $("select.theme_layout").on("change", function() {
        var theme_layout = jQuery(this).val();
        if(theme_layout == 'ac') {
            $('.wrapper').removeClass('boxed boxed-a m-lg-auto');
            $('.wrapper').addClass('boxed boxed-a m-lg-auto');
        } else if(theme_layout == 'bc') {
            $('.wrapper').removeClass('boxed boxed-b m-lg-auto');
            $('.wrapper').addClass('boxed boxed-b m-lg-auto');
        } else {
            $('.wrapper').removeClass('boxed boxed-a m-lg-auto');
            $('.wrapper').removeClass('boxed boxed-b m-lg-auto');
            $('.wrapper').addClass('wided');
        }
    });
    /* 폰트셋 */
    $("select.font_scheme").on("change", function() {
        var font_scheme = jQuery(this).val();
        jQuery("#font_scheme").attr('href', '<?php echo G5_THEME_URL;?>/css/font/' + font_scheme + '.css');
    });
    /* 컬러셋 */
    $("select.color_scheme").on("change", function() {
        var color_scheme = jQuery(this).val();
        jQuery("#color_scheme").attr('href', '<?php echo G5_THEME_URL;?>/css/color/' + color_scheme + '.css');
    });
});
</script>

폰트셋, 컬러셋 적용
/theme/BS4-Basic/head.sub.php 45line 수정
수정전


// CSS
add_stylesheet('<link rel="stylesheet" href="'.NA_URL.'/css/nariya.css" type="text/css">', -1);
$df_stylesheet = '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/theme.css" type="text/css">'.PHP_EOL;
$df_stylesheet .= '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/font/'.$tset['font'].'.css" type="text/css">'.PHP_EOL;;
$df_stylesheet .= '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/color/'.$tset['color'].'.css" type="text/css">';
add_stylesheet($df_stylesheet, 0);
unset($df_stylesheet);

수정후


// CSS
add_stylesheet('<link rel="stylesheet" href="'.NA_URL.'/css/nariya.css" type="text/css">', -1);
$df_stylesheet = '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/theme.css" type="text/css">'.PHP_EOL;
$df_stylesheet .= '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/font/'.$tset['font'].'.css" type="text/css" id="font_scheme">'.PHP_EOL;;
$df_stylesheet .= '<link rel="stylesheet" href="'.G5_THEME_URL.'/css/color/'.$tset['color'].'.css" type="text/css" id="color_scheme">';
add_stylesheet($df_stylesheet, 0);
unset($df_stylesheet);

-- 2021.09.01 17:06 내용 수정 --