[이윰] 스타일박스 패치, ios 관련 패치

페이지 정보

루루아빠 3,120 1 2015.07.09 22:49

평점

  • - 평점 : 0점 (0명 참여)

본문

스타일 박스로 인해 페이지 이동이나 새로고침시 깜빡이거나 색상이 변경되는 현상을 수정하기 위해 스타일 박스의 색상과 레이아웃을 삭제하고 에디터를 통해 색상과 레이아웃을 간단히 설정하도록 수정.
색상변경과 레이아웃 설정은 /layout/head_bs.html 파일 주석을 참고.
패치파일 
/layout/head_bs.html
수정전

add_stylesheet('<link rel="stylesheet" href="../css/basic_bs.css" type="text/css" media="screen">',0);
add_stylesheet('<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen">',0);
if(!(defined('_WMODE_') && _WMODE_)) {
    add_stylesheet('<link rel="stylesheet" href="../css/colors/loading.css" type="text/css" media="screen" id="eb_theme_color">',0);
}
 
?>
 
<!--[if lt IE 9]>
    <link rel="stylesheet" href="../plugins/sky-forms/version-2.0.1/css/sky-forms-ie8.css">
<![endif]-->
 
<!--{? !_wmode }-->
 
<div id="eb-loading"></div>
 
<!--{* Start Style Switcher *}-->
<!--{? (_is_member && eyoom.use_switcher=='on') || _is_admin}-->
{# switcher}
<!--{/}-->
<!--{* End Style Switcher *}-->
 
<div class="wrapper header-fixed">
    <!--{* Header *}-->

수정 후

add_stylesheet('<link rel="stylesheet" href="../css/basic_bs.css" type="text/css" media="screen">',0);
/* 
컬러셋 변경 안내: 최소 dark.css 가 설정되어 있으며, 아래 색상 중 원하는 컬러로 변경을 해 주시면 됩니다. 
색상의 종류 : blue, brown, dark, default, green, purple, red, yellow
예) add_stylesheet('<link rel="stylesheet" href="../css/colors/red.css" type="text/css" media="screen">',0);
*/
 
if(!(defined('_WMODE_') && _WMODE_)) {
    add_stylesheet('<link rel="stylesheet" href="../css/colors/dark.css" type="text/css" media="screen">',0);
}
add_stylesheet('<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen">',0);
 
?>
 
<!--[if lt IE 9]>
    <link rel="stylesheet" href="../plugins/sky-forms/version-2.0.1/css/sky-forms-ie8.css">
<![endif]-->
 
<!--{? !_wmode }-->
 
<!--{* Start Style Switcher *}-->
<!--{? (_is_member && eyoom.use_switcher=='on') || _is_admin}-->
{# switcher}
<!--{/}-->
<!--{* End Style Switcher *}-->
 
<div class="wrapper header-fixed"><!--{* 박스형식의 레이아웃을 원하시면 <div class="wrapper header-fixed boxed-layout container"> 변경 *}-->
    <!--{* Header *}-->

/layout/switcher.html
해당 부분 삭제

<!--{* Theme Colors *}-->
        <div class="eb-switcher-heading">테마색상</div>
        <ul class="list-unstyled">
            <li class="theme-default {? switcher.sw_color == 'default' || !switcher.sw_color}theme-active{/}" data-style="default" data-header="light"></li>
            <li class="theme-red {? switcher.sw_color == 'red'}theme-active{/}" data-style="red" data-header="light"></li>
            <li class="theme-blue {? switcher.sw_color == 'blue'}theme-active{/}" data-style="blue" data-header="light"></li>
            <li class="theme-yellow {? switcher.sw_color == 'yellow'}theme-active{/}" data-style="yellow" data-header="light"></li>
            <li class="theme-green {? switcher.sw_color == 'green'}theme-active{/}" data-style="green" data-header="light"></li>
            <li class="theme-purple {? switcher.sw_color == 'purple'}theme-active{/}" data-style="purple" data-header="light"></li>
            <li class="theme-brown {? switcher.sw_color == 'brown'}theme-active{/}" data-style="brown" data-header="light"></li>
            <li class="theme-dark {? switcher.sw_color == 'dark'}theme-active{/}" data-style="dark" data-header="light"></li>
        </ul>
        <input type="hidden" name="sw_color" id="sw_color" value="{? !switcher.sw_color}default{:}{switcher.sw_color}{/}">
 
  
 
<!--{* Layout Styles *}-->
        <div class="eb-switcher-heading">레이아웃</div>
        <div class="margin-bottom-25 text-center">
            <div class="margin-bottom-15">
                <a href="javascript:void(0);" class="btn-e btn-e-dark btn-block {? switcher.sw_boxed == 'off' || !switcher.sw_boxed}active-switcher-btn{/} wide-layout-btn" data-style="off">와이드형</a>
            </div>
            <div>
                <a href="javascript:void(0);" class="btn-e btn-e-dark btn-block {? switcher.sw_boxed == 'on'}active-switcher-btn{/} boxed-layout-btn" data-style="on">박스형</a>
            </div>
        </div>
        <input type="hidden" name="sw_boxed" id="sw_boxed" value="{? !switcher.sw_boxed}off{:}{switcher.sw_boxed}{/}">

/layout/tail_bs.html
해당 부분 삭제

var boxed = '{switcher.sw_boxed}';
        if(boxed == 'on') {
            jQuery("body").addClass("boxed-layout container");
        }
        if(boxed == 'off') {
            jQuery("body").removeClass("boxed-layout container");
        }
 
  
 
  
 
jQuery('li', panel).click(function () {
            var color = jQuery(this).attr("data-style");
            var data_header = jQuery(this).attr("data-header");
            jQuery('#sw_color').val(color);
            setColor(color, data_header);
            jQuery('.list-unstyled li', panel).removeClass("theme-active");
            jQuery(this).addClass("theme-active");
        });
 
        var setColor = function (color, data_header) {
            jQuery('#eb_theme_color').attr("href", "../../../../../..{C.G5_ROOT}/eyoom/theme/{_theme}/css/colors/" + color + ".css");
        }
 
        if(!sw_color) sw_color = 'loading';
        var data_header = jQuery(this).attr("data-header");
        setColor(sw_color, data_header);

/js/app.js
해당 부분 삭제

function handleBoxed() {
        jQuery('.boxed-layout-btn').click(function(){
            var boxed = jQuery(this).attr("data-style");
            jQuery('#sw_boxed').val(boxed);
            jQuery(this).addClass("active-switcher-btn");
            jQuery(".wide-layout-btn").removeClass("active-switcher-btn");
            jQuery("body").addClass("boxed-layout container");
        });
        jQuery('.wide-layout-btn').click(function(){
            var boxed = jQuery(this).attr("data-style");
            jQuery('#sw_boxed').val(boxed);
            jQuery(this).addClass("active-switcher-btn");
            jQuery(".boxed-layout-btn").removeClass("active-switcher-btn");
            jQuery("body").removeClass("boxed-layout container");
        });
    }
 
  
 
// 수정전 117줄 
 
handleBoxed();

/css/style.css
수정 후

.boxed-layout {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;
    overflow: hidden;    
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}

EB Shop Community는 아래 댓글을 참조한다.
/css/color/색상명.css (예 green)
수정 전

.boxed-layout {
    background: url('../../image/colors-green-bg.png');
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
 
  
 
  
 
    /*스타일 고정, 박스 관련 배경색 추가 부분*/
    .header-fixed .navbar-collapse.header-fixed-bar > .container {
        background: none;
    }
    .boxed-layout .header-fixed .navbar-collapse.header-fixed-bar {
        background: none; 
        border-top: 0 none;
    }
    .boxed-layout .header-fixed .navbar-collapse.header-fixed-bar > .container {
        background: rgba(135, 184, 34, 0.95); 
    }
    /*스타일 고정, 박스 관련 추가 배경색 부분 끝*/

수정 후

body {
    background: url('../../image/colors-green-bg.png');
}
 
  
 
  
 
    /*스타일 고정, 박스 관련 배경색 추가 부분*/
    .header-fixed .navbar-collapse.header-fixed-bar > .container {
        background: none;
    }
    .boxed-layout.header-fixed .navbar-collapse.header-fixed-bar {
        background: none; 
        border-top: 0 none;
    }
    .boxed-layout.header-fixed .navbar-collapse.header-fixed-bar > .container {
        background: rgba(135, 184, 34, 0.95); 
    }
    /*스타일 고정, 박스 관련 추가 배경색 부분 끝*/

/css/color/loading.css - 삭제
 
ios에서는 모달 창을 새창으로 띄우게 변경
패치파일
/eyoom/core/mypage/timeline.php
/eyoom/core/mypage/favorite.php
/eyoom/core/mypage/followinggul.php
/eyoom/core/mypage/myhome_myposts.php
 
/eyoom/theme/테마명/skin_bs/mypage/basic/timeline.skin.html
/eyoom/theme/테마명/skin_bs/mypage/basic/favorite.skin.html
/eyoom/theme/테마명/skin_bs/mypage/basic/followinggul.skin.html
/eyoom/theme/테마명/skin_bs/mypage/basic/myhome_myposts.skin.html
예로 아래와 같이 변경되었으며 각 테마 패치 내용을 참고.

수정 전

<a href="{.href}" onclick="eb_modal(this.href); return false;" target="_blank"><img class="img-responsive" src="{..value_}" alt="스타일박스 패치, ios 관련 패치"/></a>

수정 후

<!--{? eb->user_agent() == 'ios'}-->
 <a href="{.href}" target="_blank">
 <!--{:}-->
 <a href="{.href}" onclick="eb_modal(this.href); return false;">
 <!--{/}-->
<img class="img-responsive" src="{..value_}" alt="스타일박스 패치, ios 관련 패치"/>
 </a>

 
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,286,500
레벨 96
경험치 1,379,121

Progress Bar 39%

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

댓글1

루루아빠님의 댓글

루루아빠 글쓴이 2015.07.10 08:18

EB Shop Community 테마는 거의 동일하나 다음 값이 다르다. /css/style.css 수정후


.boxed-layout {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;
}
 
.basic-bs-wrap {
    border: 0 none;
    overflow: hidden;
}

Total 7432838 페이지
제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.0.41 패치 루루아빠 2015.07.20 3,089 0
HTML5  🏆 HTML5 Video 반응형으로 만들기 루루아빠 2015.07.19 2,755 0
HTML5  댓글+1🏆 HTML5 Video 볼륨 조정하기 루루아빠 2015.07.19 3,490 0
이윰  🏆 modal 오픈시 modal-dialog 아래 background body 스크롤 안되게 하기 루루아빠 2015.07.16 6,523 0
그누•영카트  🏆 최고관리자의 레벨이 올바르지 않을때 루루아빠 2015.07.15 2,941 0
그누•영카트  🏆 영카트 5.0.41 패치 루루아빠 2015.07.13 6,147 0
그누•영카트  🏆 그누보드 5.0.40 패치 루루아빠 2015.07.13 2,916 0
이윰  댓글+1🏆 🚩 스타일박스 패치, ios 관련 패치 루루아빠 2015.07.09 3,121 0
서버  댓글+1🏆 PHP 파일 업로드 갯수 수정하기 루루아빠 2015.07.09 3,539 0
이윰  🏆 로그인을 메인으로 - 회원제 사이트 - 폐쇄형 사이트용 루루아빠 2015.07.08 3,170 0
그누•영카트  🏆 영카트 5.0.40 패치 루루아빠 2015.07.07 2,956 0
그누•영카트  🏆 그누보드 5.0.39 패치 루루아빠 2015.07.07 2,846 0
이윰  🏆 Eyoom Builder 1.1.7 패치 루루아빠 2015.07.06 2,888 0
그누•영카트  🏆 영카트 5.0.39 패치 루루아빠 2015.06.30 3,510 0
그누•영카트  🏆 그누보드 5.0.38 패치 루루아빠 2015.06.30 3,313 0
이윰  댓글+1🏆 최신글 랜덤으로 뽑기 루루아빠 2015.06.29 3,114 0
이윰  🏆 사운드클라우드와 게시글 정보와의 간격 조정 루루아빠 2015.06.28 3,474 0
jQuery  댓글+2🏆 jQuery를 이용한 링크 자동 클릭(auto click) 루루아빠 2015.06.26 8,269 0
이윰  🏆 스크린 사이즈에 따른 미디어 쿼리(container 크기 변화) 루루아빠 2015.06.25 3,199 0
이윰  🏆 샵커뮤니티 테마 스위쳐 패치 루루아빠 2015.06.25 2,771 0