Đóng mở thanh menu dọc diễn đàn

[miamor]

Cái này hình như bên fm cũng có share, cột hiện ở mọi trang, nhưng tìm lòi mắt chả thấy đâu
làm bài hướng dẫn này cho những bạn mới luôn thể (Bài hướng dẫn cụ thể đối với cột bên phải ở index)
Cái này làm dựa trên code đóng mở sẵn có của fm

[*] Demo:


[*] Cách làm:
Index_body: Tìm

Code:

{BOARD_INDEX}

thay bằng

Code:

        <div id="content">
 <div id="content_container">
{BOARD_INDEX}
      </div>
  </div>

  <div id="menu_close" style="display: none;"><p><a href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content', 'expended_main');"><img src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-expanded.png" alt="Display the menu" title="Display the menu"></a></p></div>
   
    <div id="sidebar_home">
<script type="text/javascript">//<![CDATA[
document.getElementById('hide-menu').style.display = 'block';//]]></script>
  <div id="sidebar_container">
      <p id="hide-menu" style="display: block; "><a href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content', 'expended_main');"><img src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-collapsed.png" alt="Hide the menu" title="Hide the menu"></a></p>
      <ul id="sidebar">
<li><div class="block smaller"><div class="blocksubhead"><a class="collapse" id="collapse_block_newthreads_1" href="#top"><img alt="" src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png" id="collapseimg_newthreads_1"></a><span class="blocktitle">[Name. . .]</span></div>     
<div class="widget_content blockbody floatcontainer">

                      [Nội dung. . .]


    </div></div><div class="underblock"></div></li> </ul></div></div>

Muốn thêm 1 ô thì thêm đoạn

Code:

<li><div class="block smaller"><div class="blocksubhead"><a class="collapse" id="collapse_block_newthreads_1" href="#top"><img alt="" src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png" id="collapseimg_newthreads_1"></a><span class="blocktitle">[Name. . .]</span></div>     
<div class="widget_content blockbody floatcontainer">

                      [Nội dung. . .]


    </div></div><div class="underblock"></div></li>

vào trên

Code:

</ul></div></div>

CSS:

Code:

/*side bar-------------------------------------------------------------------*/
#hide-menu {
   display:block;margin-top:40px;float:right;margin-right:-28px;_margin:40px 0 0 0;_display:inline-block
}
#hide-menu {
   _display:inline
}
#menu_close {
   display:block;margin-top:40px;float:right;margin-right:-28px;_margin:40px 0 0 0;_display:inline-block
}
#menu_close {
   _display:inline
}
#sidebar_container.sidebarleft #sidebar_button {
   float:left;margin-left:-28px
}

#sidebar_container {
float: right;
width: 270px;
padding: 17px 0;
margin-bottom: 3em;
}
#sidebar_container > ul {
background: #ECF1E2 url(http://westlifevn.net/forum/images/misc/blog/top-highlight.png) repeat-x left top;
border: 1px solid #D2DBC0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: -2px 2px 2px #C8C8C8;
-webkit-box-shadow: -2px 2px 2px #C8C8C8;
box-shadow: -2px 2px 2px #C8C8C8;
float: left;
width: 100%;
list-style: none;
padding: 0;
}
#sidebar_container .block {
margin-bottom: 4px;
padding: 6px;
border-top-right: 5px;
border-top-left: 5px;
border-top-right: 5px;
border-top-left: 5px;
}
#sidebar_container .blocksubhead {
background: transparent none;
height: 16.76px;
color: #424242;
padding: 5px 6px;
border: none;
outline: none;
font-weight: bold;
}
#sidebar_container a.collapse {
position: static;
}
#sidebar_container .blocksubhead a img {
vertical-align: middle;
float: right;
}
.widget_content {
color: #424242;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: white url(http://i1122.photobucket.com/albums/l525/liger1723/GmGreen/gradient-black-down.png) repeat-x;
border: 1px solid #DADADA;
_background-image: none;
padding: 10px 6px 10px 6px;
}
#sidebar_container .blockbody {
color: #424242;
border: 1px solid #DADADA;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: white;
_background-image: none;
padding: 0;
}
#sidebar_container .underblock {
height: 9px;
background: transparent url(http://westlifevn.net/forum/images/misc/blog/bottom-shadow.png) repeat-x left bottom;
}
#content_container {
width: 100%;
float: left;
margin-right: -290px;
padding: 10px 0;
}
#content_container #content {
margin-right: 290px;
}
#content {
   width: 72%;
   padding:0;
   padding-bottom: 10px;
}
#content.expended_main {
   width: 100%;
}
#content {
   margin: 20px 0px 0px 0px;
   padding-left: 0px;
   float: left;
}
/*side bar-------------------------------------------------------------------*/

Hết rồi

Đóng mở cột bên phải cho widget
Header: Chèn code này vào cuối:

Code:

      <div id="content">
 <div id="content_container">

Footer begin:

Code:

                    </div>
  </div>
     
  <div id="menu_close" style="display: none;"><p><a href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content', 'expended_main');"><img src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-expanded.png" alt="Display the menu" title="Display the menu"></a></p></div>
   
    <div id="sidebar_home">
<script type="text/javascript">//<![CDATA[
document.getElementById('hide-menu').style.display = 'block';//]]></script>
  <div id="sidebar_container">
      <p id="hide-menu" style="display: block; "><a href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content', 'expended_main');"><img src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-collapsed.png" alt="Hide the menu" title="Hide the menu"></a></p>
      <ul id="sidebar">
<li><div class="block smaller"><div class="blocksubhead"><a class="collapse" id="collapse_block_newthreads_1" href="#top"><img alt="" src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png" id="collapseimg_newthreads_1"></a><span class="blocktitle">[Name. . .]</span></div>     
<div class="widget_content blockbody floatcontainer">

                        <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>


    </div></div><div class="underblock"></div></li> </ul></div></div>

            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

[chupy]

làm trên widgets hay hơn chứ
của nó đây
( đã test nhưng không được )
http://help.forumotion.com/tricks-tips-f32/show-hide-widgets-script-t78898.htm

[hunghsmn]

Hay đấy để nghiên cứu xem dùng vào việc gì
voite

[miamor]

làm trên widgets hay hơn chứ
của nó đây
( đã test nhưng không được )
http://help.forumotion.com/tricks-tips-f32/show-hide-widgets-script-t78898.htm

Thì đưa

Code:

      <div id="content">
 <div id="content_container">

vào header là được
Đã bổ sung rồi đó

[ruby-coding]

làm mãi mà chả dc

[miamor]

Chỉ đơn giản như vậy mà cũng k được?!!!
Đưa index_body lên coi cái nào...

[baoden.mango]

wa đẹp thanks chị miamor nha

[nhockientb]

Sao nó nằm tút ở dưới thống kê vậy.

[[kool][boy]]

cái này hùi trc mình làm cho phb2 thì ok nhưng khi chuyển sang punbb thì làm không được nữa
hình như chỉ dùng được cho phb2 thôi thì phải

[Lowie]

Mình chèn cột đó vào index_box nên mong miamor chỉnh giúp với:
Index_box

Code:

<div class="main paged" style="float: left; width: 670px; padding-right: 5px;">
<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title"><h2>{catrow.tablehead.L_FORUM}</h2></div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
         
              <tr>
               
              </tr>
           
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                <td class="tcl" style="padding-right: 0px; {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: 65px;">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -47px;">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                  <div class="nodeStats pairsInline">
                    <br />
            <dl>
               <dt>Đề tài:</dt> <dd>{catrow.forumrow.TOPICS}</dd>
               <dt>Bài viết:</dt> <dd>{catrow.forumrow.POSTS}</dd>
            </dl>
            
         </div>
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    Mới nhất:<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
</br>
<img border="0" src="http://i48.servimg.com/u/f48/16/58/89/73/think10.png" />
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
</div>
                          <div style="float: left; width: 251px;">
                            <br><br><br>
    <div class="module main" style="margin-top: 1em! important;">
 
     
    <div class="main-content">
    <div class="section loginButton">      
   <div class="secondaryContent">
      <label for="LoginControl" id="SignupButton"><a href="index.php?login/" class="inner">Đăng ký ngay!</a></label>
   </div>
</div>
    </div></div>
    <div class="module main" style="margin-top: 1em! important;">
     
 
    <div class="main-content">
<div class="section">
   
      <div class="secondaryContent WidgetFramework_WidgetRenderer_Html" id="widget-6">
         
            <h3>
               
                  Bây giờ là ...
               
            </h3>
            <center><embed src="http://www.clocklink.com/clocks/5012-gray.swf?TimeZone=GMT0700&amp;" width="215" height="75" wmode="transparent" type="application/x-shockwave-flash">
</center>
         

                  </div>
</div>
      </div></div>
     
    <div class="module main" style="margin-top: 1em! important;">
     
 
    <div class="main-content">
     
    <span class="useravatar">
    <img src="https://lh3.googleusercontent.com/-r91FyINo2qc/T5c0-N_b0NI/AAAAAAAAB40/xI5ipFa59tA/d.jpg" alt=""></span></div></div>
     
   
     
   
       
   
           
            </div></div>                 
                                                 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Index_body:

Code:

{JAVASCRIPT}
<div id="left"><div id="pun-info" class="boxFMvi main"><div class="main-head"><center><div class="page-title"><h2>Tình hình diễn đàn</h2></div></center></div>
 <div class="main-content">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- END giefmod_index1 -->
  </div>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->

<!-- TÊN TAB -->
<div id="pun-info" class="main">
  <div class="main-content">
      <div id="tabs_container">
    <ul id="stabs">
        <li class="active"><a href="#tab1">Thống kê</a></li>
        <li><a href="#tab2">Sinh nhật</a></li>
        <li><a href="#tab3">Thông tin</a></li>
    </ul>
</div>
<!-- N?I DUNG TAB -->         
          <div id="tabs_content_container">
    <div id="tab1" class="tab_content" style="display: block;">
       
                  <div id="stats">
        <p class="right">{TOTAL_POSTS}</p>
        <p>{TOTAL_USERS}</p>
        <p>{NEWEST_USER}</p>
      </div>
      <p><div id="onlinelist">
        <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
        <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
        </p>
        <p>{TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}

        <br />
        {LOGGED_IN_USER_LIST}

        {L_ONLINE_USERS}
        {L_CONNECTED_MEMBERS}<br />
        </p>
        <div class="clear"></div>

        <p>{LEGEND} : {GROUP_LEGEND}</p>

      </div></p>
    </div>
    <div id="tab2" class="tab_content">
        <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
    </div>
    <div id="tab3" class="tab_content">
        <p>Copyright 2012-2014, hauloc2.net</p>
      <p>Design by Zualuoi - Contact: zualuoi@yahoo.com</p>
   
    </div>
</div>
     
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
        <p class="page-bottom">
        {TOTAL_CHATTERS_ONLINE} :
        {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
              insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
        <!-- END switch_chatbox_popup -->
        </p>
      </div>
      <!-- END switch_chatbox_activate -->
  </div>
</div>
<!-- END disable_viewonline -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
   </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Demo: http://demo.forumvi.com/
Nick + pass test:
ID: test
Pass: testthu1

[Ocean Sapphire]

Thật sự thì cái này hình như lỗi, khi chèn vào nó nhảy xuống dưới cùng trang

[rongcon12348]

code Header: và code Footer begin: chèn vào chỗ nào vậy mấy pác

[Sponsored content]