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

페이지 정보

루루아빠 3,168 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,290,698
레벨 96
경험치 1,388,890

Progress Bar 73%

- 가입일 : 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 242913 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 포인트를 걸고 자료 배포시 포인트 수수료율(%) 변경하기 루루아빠 2015.08.23 2,969 0
이윰  🏆 무한스크롤을 사용하는 게시판에서 검색시 나타나는 버그 수정하기 루루아빠 2015.08.17 2,877 0
이윰  🏆 무한스크롤 사용시 한글로된 분류명을 선택했을때 "IE11"에서 문제점 루루아빠 2015.08.13 2,908 0
이윰  🏆 댓글에 이미지가 추가된 댓글을 수정할 경우 이미지가 삭제되는 버그 패치 루루아빠 2015.08.07 2,842 0
이윰  댓글+1🏆 카테고리를 사용하는 게시판에서 무한스크롤 사용시 루루아빠 2015.08.07 2,886 0
이윰  댓글+1🏆 게시판 본문 보기시 제목 글자 수 늘리기 루루아빠 2015.08.06 2,952 0
이윰  🏆 Eyoom Builder 1.1.9 - 그누보드 5.1.0 테마버전 지원 루루아빠 2015.08.05 3,105 0
이윰  🏆 갤러리 및 최신 갤러리에서 새로운 글 이미지 내에 표현하기 루루아빠 2015.08.04 2,685 0
이윰  🏆 modal 창 크기 변경하기 루루아빠 2015.07.30 3,322 0
이윰  댓글+1🏆 style.css를 유지하면서 venobox 플러그인 사용하기 루루아빠 2015.07.30 3,439 0
이윰  🏆 Eyoom Builder 1.1.8 추가 수정사항 루루아빠 2015.07.30 2,647 0
이윰  🏆 new 이미지를 출력하는 시간을 늘리기 루루아빠 2015.07.28 2,887 0
이윰  댓글+1🏆 dropdown menu 펼쳐지는 위치 조정하기 루루아빠 2015.07.24 4,067 0
이윰  🏆 Eyoom Builder 1.1.8 패치 루루아빠 2015.07.24 2,839 0
이윰  🏆 이모티콘을 이윰빌더에 적용하기 위한 규칙 루루아빠 2015.07.23 2,643 0
이윰  댓글+1🏆 이모티콘 크기 바꾸기 루루아빠 2015.07.23 2,792 0
이윰  🏆 modal 오픈시 modal-dialog 아래 background body 스크롤 안되게 하기 루루아빠 2015.07.16 6,571 0
이윰  댓글+1🏆 🚩 스타일박스 패치, ios 관련 패치 루루아빠 2015.07.09 3,169 0
이윰  🏆 로그인을 메인으로 - 회원제 사이트 - 폐쇄형 사이트용 루루아빠 2015.07.08 3,238 0
이윰  🏆 Eyoom Builder 1.1.7 패치 루루아빠 2015.07.06 2,919 0