안녕하세요...즐거운 추석 되셨는지요...

비반응형 pc커뮤니티 테마의 좌측 슬라이드 메뉴, 우측 슬라이드 그리고 페이지 로딩소스를 반응형 커뮤니티 테마에서 사용하는 방법을 적어볼께요...

수정하지 않은 반응형 커뮤니티 테마기준으로 작성되었습니다.

custom.css의 아래 소스를 추가합니다.

/*전체로딩....*/
.t-center {text-align:center}
#preloader {position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:99999}
#status {position:fixed;z-index:99999;width:250px;height:250px;position:absolute;left:50%; top:50%; margin:-125px 0 0 -125px}
#status p {top:60%}

/*----- Sidebar (Left) -----*/
.ebm-sidebar {background-color:#fff;width:266px;display:block;position:absolute;top:0px;left:0px;bottom:0px;overflow:hidden;position:fixed;}
.ebm-sidebar-scroll {width:266px;overflow:scroll;overflow-x:hidden;height:100%}
.ebm-sidebar .sidebar-nav {padding-right:0px}
.ebm-sidebar .list-group {margin-bottom:0}
.ebm-sidebar .list-group-item {border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.ebm-sidebar .list-group-item:first-child {border-top:0}
.ebm-sidebar .list-group-item:last-child {border-bottom:0}
.ebm-sidebar .sidebar-search {background-color:#fff;padding:15px 10px 5px;border-bottom:1px solid #bf1143}
.ebm-sidebar .sidebar-section {background-color:#bf1143;height:50px}
.ebm-sidebar .sidebar-section p {font-size:12px;color:#fff;font-weight:700;padding-top:15px;padding-left:10px}
.ebm-sidebar .sidebar-section a {width:50px;height:38px;position:absolute;left:195px;top:0px;text-align:right;padding-top:12px;color:#fff;font-size:16px}
.ebm-sidebar .sidebar-copyright {background-color:#000;height:50px}
.ebm-sidebar .sidebar-copyright p {font-size:11px;color:#fff;font-weight:300;padding-top:17px;padding-left:10px}

/*----- Sidebar (Right) -----*/
.ebm-sidebar-open,.ebm-sidebar-close {cursor:pointer}
.ebm-sidebar-mb {position:fixed;top:0px;right:0;width:300px;background:#f4f4f4;-ms-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%);
transition:all 0.2s;z-index:9999;border-left:0px solid #ccc;margin-right:-301px;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.25);-moz-box-shadow:0 0 8px rgba(0,0,0,0.25);box-shadow:0 0 8px rgba(0,0,0,0.25)}
.ebm-sidebar-mb-scroll {z-index:2;overflow:auto;overflow-x:hidden;height:100%}
.ebm-sidebar-mb.sidebar-mb-open {margin-right:0;-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}
.ebm-sidebar-mb-title {position:absolute;top:0;width:280px;height:50px;padding:0 10px;line-height:50px;z-index:3;background:#fff;border-bottom:1px solid #e5e5e5}
.ebm-sidebar-mb-in {padding:10px}
.ebm-toggle-btn a {position:absolute;top:0;right:10px;width:40px;height:49px;text-align:center;font-size:16px}

/*----- Content -----*/
#content {backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}
.ebm-content {background-color:#fff;display:block;position:relative;min-height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.35);-moz-box-shadow:0 0 8px rgba(0,0,0,0.35);box-shadow:0 0 8px rgba(0,0,0,0.35)}
.ebm-header {background-color:#eaeaea;border-bottom:solid 1px #d5d5d5;height:50px;width:100%;z-index:1;display:block;overflow:hidden;position:relative}
.ebm-header .sidebar-btn {position:absolute;top:0;left:0;z-index:999;width:50px;height:37px;display:block;font-size:16px;padding-top:13px;text-align:center}
.ebm-header .sidebar-btn i {color:#000;text-shadow:0 1px 0 #fff}
.ebm-header .ebm-logo {position:relative;z-index:99;display:block;font-size:18px;padding-top:10px;text-align:center;font-weight:700}
.ebm-header .ebm-logo a {color:#000;text-shadow:0 1px 0 #fff}
.ebm-header .ebm-login {position:absolute;right:0px;top:0px;z-index:999;width:60px;height:33px;display:block;font-size:11px;padding-top:17px;padding-right:15px;text-align:right}
.ebm-header a.ebm-login {color:#bf1143;text-shadow:0 1px 0 #fff}
.ebm-member-bar {padding:8px 10px;background:#fff;border-bottom:1px solid #e5e5e5}
.ebm-member-bar li.dropdown-extended li {border-left:0;padding:5px 10px}
.ebm-member-bar li.dropdown-extended .dropdown-menu {margin-top:8px;margin-right:-190px;min-width:160px;max-width:250px;width:250px}
.ebm-member-bar li.dropdown-extended .dropdown-menu:before {right:197px}
.ebm-member-bar li.dropdown-extended .dropdown-menu:after {right:198px}
.ebm-member-bar li.dropdown-extended .badge-dark {background:#bf1143}
.ebm-title-wrap {position:relative;padding:20px 10px 0;background:#fff}
.ebm-title-wrap .ebm-title {padding:10px;background:#f8f8f8;border:1px solid #bbb;text-align:center}
.ebm-title-wrap .ebm-title .con-map>li+li:before {padding:0 5px 0 0;color:#ccc;content:"/\00a0"}
.ebm-notice-wrap {position:relative;padding:0px 10px 10px;background:#fff;margin-top:-1px}
.ebm-notice-wrap .ebm-notice-box {padding:7px 10px;border:1px solid #bbb}
.ebm-content-wrap {padding:10px;background:#fff;min-height:418px}
.ebm-footer {padding:10px;background:#fff;border-top:1px solid #e5e5e5}
.ebm-footer p {font-size:11px}
.ebm-footer p a {font-size:11px}

/* Sidebar Menu */
.sidebar-nav li {padding:0}
.sidebar-nav li a {display:block;padding:8px 30px 8px 10px}
.sidebar-nav li a:hover {text-decoration:none}
.sidebar-nav > li.active,.sidebar-nav > li.active:hover {background:#f6fee6;border-color:#87b822}
.sidebar-nav > li.active > a {color:#54545a;font-weight:bold}
.sidebar-nav li ul {padding:0;list-style:none}
.sidebar-nav li ul,.sidebar-nav li.active ul a {background:#fafafa}
.sidebar-nav li ul a {color:#555;font-size:12px;border-top:solid 1px #ddd;padding:6px 30px 6px 20px}
.sidebar-nav li a i {width:20px;text-align:center;color:#a5a5aa}
.sidebar-nav ul li:hover a,.sidebar-nav ul li.active a {color:#bf1143}
.sidebar-nav ul ul li:hover a,.sidebar-nav ul ul li.active a {color:#bf1143}
.list-group-item li > .badge {float:right}
.sidebar-nav span.badge {margin-top:8px;margin-right:10px}
.sidebar-nav .list-toggle > span.badge {margin-right:25px}
.sidebar-nav ul li span.badge {margin-top:8px;font-size:11px;padding:3px 5px;margin-right:10px}
.sidebar-nav a.subsub-style {padding-left:30px}
.list-toggle:after {top:7px;right:10px;color:#777;font-size:14px;content:"\f104";position:absolute;font-weight:normal;display:inline-block;font-family:FontAwesome}
.list-toggle.active:after {color:#87b822;content:"\f107"}
.list-group-item.active,
.list-group-item.active:focus {
  z-index: 0;
}

그리고 수정할 파일은  head_bs.html 파일에 28번째줄에

<!--{* ----- 로딩효과 시작 ----- *}-->
<div id="preloader">
 <div id="status">
     <p class="t-center">
  로딩로딩로딩로딩
        </p>
    </div>
</div>
<!--{* ----- 로딩효과 끝 ----- *}-->

<!--{* Start Style Switcher *}-->
<!--{? (_is_member && eyoom.use_switcher=='on') || _is_admin}-->
{# switcher}
<!--{/}-->
<!--{* End Style Switcher *}-->

<!--{* rgh-f 왼쪽사이드메뉴영역 *}-->
    <div id="sidebar" class="ebm-sidebar hidden-pc">
        <div class="ebm-sidebar-scroll">
         <div class="sidebar-section">
             <p>MENU</p>
                <a href="#" class="sidebar-close"><i class="fa fa-times"></i></a>
            </div>

            <ul class="list-group sidebar-nav" id="sidebar-nav">
                <!--{* Home *}-->
                <li class="list-group-item {? defined('_INDEX_')}active{/}">
                    <a href="{C.G5_URL}{? _is_member && eyoomer.main_index != 'index'}/?home{/}">Home</a>
                </li>
                <!--{* End Home *}-->

                <!--{* Menu *}-->
                <!--{@ menu}-->
                <li class="list-group-item {? menu.submenu}list-toggle{/} {? .active}active{/}">
                 <a {? menu.submenu}data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-{.key_}"{:}href="{.me_link}" target="_{.me_target}"{/}>
                        <!--{? .me_icon}--><i class="fa {.me_icon}"></i> <!--{/}-->{.me_name}
                    </a>
     <!--{@ submenu}-->
                 <!--{? ..index_ == 0}-->
                    <ul id="collapse-{.key_}" class="collapse {? .active}in{/}">
                    <!--{/}-->
                        <li class="{? ..active}active{/}">
                         <a href="{..me_link}" target="_{..me_target}">
                             <!--{? ..me_icon}--><i class="fa {..me_icon}"></i> <!--{/}-->{..me_name}<!--{? ..new}--> <i class="fa fa-circle color-red"></i><!--{/}-->
                         </a>
       <!--{@ subsub}-->
       <!--{? ...index_ == 0}-->
       <ul class="in">
       <!--{/}-->
        <li class="{? ...active}active{/}">
         <a href="{...me_link}" target="_{...me_target}" class="subsub-style">
          - <!--{? ...me_icon}--><i class="fa {...me_icon}"></i> <!--{/}-->{...me_name}<!--{? ...new}--> <i class="fa fa-circle nav-new2"></i><!--{/}-->
         </a>
        </li>
       <!--{? ...index_ == ...size_-1}-->
       </ul>
       <!--{/}-->
       <!--{/}-->
                        </li>
                    <!--{? ..index_ == ..size_-1}-->
                    </ul>
                    <!--{/}-->
     <!--{/}-->
                </li>
                <!--{/}-->
                <!--{* End Menu *}-->
            </ul>

         <div class="sidebar-section"><p>DEFAULT MENU</div>
            <ul class="list-group sidebar-nav">
    <!--{* START DEFAULT MENU //필요에 따라 사용하세요. 테마 page 폴더에 html파일을 생성 후 아래와 같은 형식으로 a태그에 링크를 연결합니다. *}-->
    <!--{? 1 //DEFAULT 메뉴 안보임:0, 보임:1}-->
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/faq.php"><i class="fa fa-question-circle"></i> FAQ</a>
    </li>
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/qalist.php"><i class="fa fa-lock"></i> 1:1 문의</a>
    </li>
    <li class="list-group-item">
     <a href="{C.G5_BBS_URL}/new.php"><i class="fa fa-file-text-o"></i> 새글</a>
    </li>
    <!--{/}-->
    <!--{* END DEFAULT MENU *}-->
            </ul>

         <div class="sidebar-section"><p>INFORMATION</p></div>
            <ul class="list-group sidebar-nav">
    <!--{* START INFO MENU //필요에 따라 사용하세요. 테마 page 폴더에 html파일을 생성 후 아래와 같은 형식으로 a태그에 링크를 연결합니다. *}-->
    <!--{? 1 //INFO 메뉴 안보임:0, 보임:1}-->
    <li class="list-group-item {? _pid == 'aboutus'}active{/}">
     <a href="{C.G5_URL}/page/?pid=aboutus"><i class="fa fa-building"></i> ABOUT US</a>
    </li>
    <li class="list-group-item {? _pid == 'provision'}active{/}">
     <a href="{C.G5_URL}/page/?pid=provision"><i class="fa fa-clipboard"></i> 이용약관</a>
    </li>
    <li class="list-group-item {? _pid == 'privacy'}active{/}">
     <a href="{C.G5_URL}/page/?pid=privacy"><i class="fa fa-male"></i> 개인정보 취급방침</a>
    </li>
    <li class="list-group-item {? _pid == 'noemail'}active{/}">
     <a href="{C.G5_URL}/page/?pid=noemail"><i class="fa fa-exclamation-triangle"></i> 이메일 무단수집거부</a>
    </li>
    <li class="list-group-item {? _pid == 'contactus'}active{/}">
     <a href="{C.G5_URL}/page/?pid=contactus"><i class="fa fa-map-marker"></i> CONTACT US</a>
    </li>
    <!--{/}-->
    <!--{* END INFO MENU *}-->
            </ul>

         <div class="sidebar-copyright">
             <p>&copy; {config.cf_title}. All Rights Reserved.</p>
            </div>
        </div>
    </div>

<div id="content" class=" ebm-content">

<a href="#" class="sidebar-btn btn-e btn-e-red"><i class="fa fa-reorder font-size-14"></i></a><!--{* 좌측 슬라이드 버튼 *}-->
   
<a href="#" class="ebm-sidebar-open btn-e btn-e-red"><strong class="username"><!--{? eyoomer.mb_nick}-->{eyoomer.mb_nick}<!--{:}-->{eyoomer.mb_name}<!--{/}--> <i class="fa fa-outdent"></i></strong></a><!--{* 우측슬라이드 버튼*}-->

<!--{* rgh-f 왼쪽사이드메뉴영역 *}-->

그리고 tail_bs.html 에서 95번째 줄에

 <!--{* ----- 우측 사이드 영역 시작 ----- *}-->
 <aside class="ebm-sidebar-mb">
  <div class="ebm-sidebar-mb-title">
   <div class="ebm-toggle-btn">
    <a class="ebm-sidebar-close"><i class="fa fa-close"></i></a>
   </div>
   <h5>MEMBER & SITE <span class="color-red">INFO</span></h5>
  </div>
  <div class="ebm-sidebar-mb-scroll scrollable">
   <div class="ebm-sidebar-mb-in">
 <div class="margin-bottom-30"></div>
 
 <div class="margin-bottom-20">
  <!--{* 아웃로그인 *}-->
  {=eb_outlogin(eyoom.outlogin_skin)}
 </div>
 <div class="margin-bottom-20">
  <!--{* 투표 *}-->
  <!--{? eyoom.use_gnu_poll == 'y'}-->{=poll('basic')}<!--{:}-->{=eb_poll(eyoom.poll_skin)}<!--{/}-->
 </div>
 <div class="margin-bottom-20">
  <!--{* 랭킹 *}-->
  {latest->latest_rankset('basic','10')}
 </div>
 <div  class="margin-bottom-20">
  <!--{* 인기검색어 *}-->
  <!--{? eyoom.use_gnu_popular == 'y'}-->{=popular('basic')}<!--{:}-->{=eb_popular(eyoom.popular_skin)}<!--{/}-->
 </div>
 <div class="margin-bottom-20">
  <!--{* 사이트통계 *}-->
  <!--{? eyoom.use_gnu_visit == 'y'}-->{=visit('basic')}<!--{:}-->{=eb_visit(eyoom.visit_skin)}<!--{/}-->
 </div>
 <div class="t-right">
  <!--{* ----- 소셜링크 영역 시작 ----- *}-->
     <div class="eb-social-icon">
            <ul>
                <li class="social-facebook"><a target="_blank" href="#">Facebook</a></li>
                <li class="social-twitter"><a target="_blank" href="#">Twitter</a></li>
                <li class="social-google"><a target="_blank" href="#">Google Plus</a></li>
                <li class="social-tumblr"><a target="_blank" href="#">Tumblr</a></li>
                <li class="social-instagram"><a target="_blank" href="#">Instagram</a></li>
            </ul>
     </div>
     <!--{* ----- 소셜링크 영역 끝 ----- *}-->
 </div>
 <div class="margin-bottom-20"></div>
</div>
  </div>
 </aside>
 <!--{* ----- 우측 사이드 영역 끝 ----- *}-->


</div><!--{*  왼쪽사이드메뉴영역 *}-->

그리고 tail_bs.html 에서 167번째 줄에

<script type="text/javascript" src="../js_mo/snap.min.js"></script>
<script type="text/javascript" src="../js_mo/app_mo.js"></script>

추가 하시면 되구요 해당파일은 pc_basic 테마에 있어서요...

소스가 길다고 생각하시면 template.class 추가하시고  {# sss_mo} 이런식으로 쓰시면 됩니다.

그리고 원본소스를 수정했기에 버튼을 그냥 상단에 두었구요 모바일 노출이나 hidden-sm hidden-xs를 적절히 쓰시면 될꺼같습니다.

우측 슬라이드는 css가 맞지 않아서 원본소스에 깔면 약간 깨져서 보이는데요...css를 적절히 수정하시면 될꺼같습니다.