[이윰] 스타일박스 패치, ios 관련 패치
페이지 정보

짧은주소
-
https://yadolee.com/tip/239 주소복사
본문
스타일 박스로 인해 페이지 이동이나 새로고침시 깜빡이거나 색상이 변경되는 현상을 수정하기 위해 스타일 박스의 색상과 레이아웃을 삭제하고 에디터를 통해 색상과 레이아웃을 간단히 설정하도록 수정.
색상변경과 레이아웃 설정은 /layout/head_bs.html 파일 주석을 참고.
패치파일
/layout/head_bs.html
수정전
수정 후
/layout/switcher.html
해당 부분 삭제
/layout/tail_bs.html
해당 부분 삭제
/js/app.js
해당 부분 삭제
/css/style.css
수정 후
EB Shop Community는 아래 댓글을 참조한다.
/css/color/색상명.css (예 green)
수정 전
수정 후
/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
예로 아래와 같이 변경되었으며 각 테마 패치 내용을 참고.
수정 전
수정 후
색상변경과 레이아웃 설정은 /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);
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>
추천인

레벨 100
경험치 1,501,823
Progress Bar 56.08%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
-
[배경 화면] Sand Dunes Death Valley National Park2025-09-06
-
[배경 화면] Autumn Walchensee2025-09-05
-
1 [배경 화면] Sunrise Morning2025-09-03
-
[배경 화면] Maldives Beach Aerial View2025-09-02
-
[배경 화면] Sunset Countryside Road2025-09-01
-
[배경 화면] Trüebsee2025-08-31
-
[배경 화면] Autumn France Field2025-08-30
-
[배경 화면] Plane Flight2025-08-29
-
[일일 메모장] 편한 잠자리 되시고 활기찬 하루 맞이하세요2025-07-22
-
[배경 화면] 프랑스의 에귀으 듀 샤흐도네(Aiguille du Chardonnet)산으로 스위스와 접경지에 위치해 있습니다. /*0) generatedType=2; if (generatedType==2) { dMap.style.cursor = "pointer"; dMap.onclick = function(e) {initGmapsLoader(e||event)}; var t = document.createTextNode("로딩하려면 클릭하세요"), d = document.createElement("div"); d.appendChild(t); d.style.cssText="background-color:#e5e5e5; filter:alpha(opacity=80); opacity:0.8; padding:1em; font-weight:bold; text-align:center; position:absolute; left:0; box-sizing:border-box; width:100%; max-width:500px; top:0"; dMap.appendChild(d); } function CreateGMapgmap202421141257() { var dMap = document.getElementById("gmap202421141257"); if (dMap) dMap = dMap.parentNode; else dMap = document.getElementById("wgmap202421141257"); if (!dMap) return; if (dMap.ckemap) { var map = dMap.ckemap.map, center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); return; } dMap.onclick = null; var mapOptions = { zoom: 11, center: [45.96864,7.00157], mapType: 0, zoomControl: "Default", mapsControl: "Default", heading: 0, tilt: 0, overviewMapControlOptions: {opened:true}, pathType: "Default", googleBar: false }; var myMap = new CKEMap(dMap, mapOptions); dMap.ckemap=myMap; } if (!window.gmapsLoaders) window.gmapsLoaders = []; window.gmapsLoaders.push(CreateGMapgmap202421141257); if (generatedType==3) window.gmapsAutoload=true; window.gmapsKey="AIzaSyApiu_e4Br_dRpB-RNC3XgioygMilKhadA"; /*]]>*/ /* CK googlemapsEnd v3.6 */2024-03-05
-
[공지사항] 특별한 버그가 발견되지 않으면 공개하도록 하겠습니다.2024-01-23
-
[공지사항] 한가지를 빼먹었습니다 사운드클라우드도 썸네일을 생성합니다 사운드클라우드는 meta tag > og:image > content의 url를 통해 이미지를 추출2023-05-05
-
[공지사항] 제법 추가해야 할 소스가 많습니다 또한 외부 프로그램(php exec 함수 이용)도 필요해요 ffmpeg, youtube-dl, twitter-media-downloader 간략하게 설명을 드려 볼게요 twitter-media-downloader은 트위터 트윗 이미지를 추출하는 용도 youtube-dl은 트위터 트윗 이미지 및 동영상 url, 페이스북 watch 동영상 url를 추출하는 용도 ffmpeg는 페이스북 watch의 동영상 url를 이용해 포스터 이미지를 추출하는 용도 인스타그램은 meta tag > og:image > content의 url를 통해 이미지를 추출 그 이미지를 게시판 설정 크기로 썸네일화하기2023-05-04
-
[공지사항] 네 맞습니다. Tagify 기능이 훌륭해 변경해 놓았습니다. 한번 적용해 보세요.2022-12-25
-
[영어 문법] 7년 전 게시되었을 때에는 재생에 문제가 없었던 것으로 기억하고 있었으나 현재에는 재생 목록 파라미터가 변경된 걸로 확인했습니다. 수정완료하였으며 3000점의 경험치를 제공해 드렸습니다. 오류 제보 감사드립니다.2022-12-04
-
[공지사항] 공지와 연관되지 않는 댓글은 자제 부탁드립니다.2022-12-03
댓글1
루루아빠님의 댓글