Choose from our various pricing plans. There is a package for everyone!


Solved: Turn statistics into tabs Question

View previous topic View next topic Go down

Solved: Turn statistics into tabs Question

Post by Brother on Sun Jul 29, 2012 3:14 am

I have read this tutorial.
But, I confuse in the HTML and Template part.
Can you help me to edit my Template?
My Index_Body :
Code:
   {JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <!-- BEGIN message_admin_titre -->
        <tr>
            <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
        </tr>
        <!-- END message_admin_titre -->
        <!-- BEGIN message_admin_txt -->
        <tr>
            <td class="row1" rowspan="3" align="center" valign="middle">
            <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
            </td>
        </tr>
        <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->

    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
            <tr>
                <td class="row1" align="center">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><span class="genmed">{L_USERNAME}:</span> </td>
                            <td><input class="post" type="text" size="10" name="username"/> </td>
                            <td>
                                <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                <span class="gensmall">{L_AUTO_LOGIN}</span>
                           </td>
                        </tr>

                        <tr>
                            <td><span class="genmed">{L_PASSWORD}:</span> </td>
                            <td><input class="post" type="password" size="10" name="password"/> </td>
                            <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
            <tr>
                <td valign="top" width="100%" class="row1" align="center">
                    <table width="100%">
                        <tr>
                            <td width="55%" valign="middle" align="right">
                                <table class="right">
                                    <tr>
                                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                                        <td><input class="post" type="text" size="10" name="username"/> </td>
                                        <td>
                                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                            <span class="gensmall">{L_AUTO_LOGIN}</span>
                                       </td>
                                    </tr>

                                    <tr>
                                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                                        <td><input class="post" type="password" size="10" name="password"/> </td>
                                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                                    </tr>
                                </table>
                            </td>
                            <td width="10%" align="center" valign="middle">
                                <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                            </td>
                            <td width="35%" class="align_gauche"><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></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_header -->

    {CHATBOX_TOP}
    {BOARD_INDEX}
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="50%" valign="top">
                <!-- BEGIN switch_user_logged_in -->
                <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
                <!-- END switch_user_logged_in -->
                <!-- BEGIN switch_delete_cookies -->
                <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
                <!-- END switch_delete_cookies -->
                </span>
            </td>
            <td width="50%" align="right">
                <span class="gensmall">
                    <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
                    <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
                    <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
                    <!-- BEGIN switch_on_index -->
                        <!-- BEGIN switch_delete_cookies -->
                        <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
                        <!-- END switch_delete_cookies -->
                    <!-- END switch_on_index -->
                </span>
            </td>
        </tr>
    </table>

    <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
            <tr>
                <td class="row1" align="center">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><span class="genmed">{L_USERNAME}:</span> </td>
                            <td><input class="post" type="text" size="10" name="username"/> </td>
                            <td>
                                <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                <span class="gensmall">{L_AUTO_LOGIN}</span>
                           </td>
                        </tr>

                        <tr>
                            <td><span class="genmed">{L_PASSWORD}:</span> </td>
                            <td><input class="post" type="password" size="10" name="password"/> </td>
                            <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
            <tr>
                <td valign="top" width="100%" class="row1" align="center">
                    <table width="100%">
                        <tr>
                            <td width="55%" valign="middle">
                                <table class="right">
                                    <tr>
                                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                                        <td><input class="post" type="text" size="10" name="username"/> </td>
                                        <td>
                                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                            <span class="gensmall">{L_AUTO_LOGIN}</span>
                                       </td>
                                    </tr>

                                    <tr>
                                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                                        <td><input class="post" type="password" size="10" name="password"/> </td>
                                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                                    </tr>
                                </table>
                            </td>
                            <td width="10%" align="center" valign="middle">
                                <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                            </td>
                            <td width="35%" class="align_gauche"><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></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_footer -->

    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <tr>
            <td class="catHead" colspan="2" height="28">
            <!-- BEGIN switch_viewonline_link -->
            <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
            <!-- END switch_viewonline_link -->

            <!-- BEGIN switch_viewonline_nolink -->
            <span class="cattitle">{L_WHO_IS_ONLINE}</span>
            <!-- END switch_viewonline_nolink -->
            </td>
        </tr>
        <tr>
            <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
            <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
            {TOTAL_USERS}<br />
            {NEWEST_USER}</span></td>
        </tr>
        <tr>
            <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
            {RECORD_USERS}<br />
            <br />
            {LOGGED_IN_USER_LIST}</span></td>
        </tr>
        {L_CONNECTED_MEMBERS}
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
        <tr>
            <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
        </tr>
        <!-- BEGIN switch_chatbox_activate -->
        <tr>
            <td class="row1">
                <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                    <!-- BEGIN switch_chatbox_popup -->
                    <div id="chatbox_popup"></div>
                    <script type="text/javascript">
                    //<![CDATA[
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                    //]]>
                    </script>
                    <!-- END switch_chatbox_popup -->
                </span>
            </td>
        </tr>
        <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->
    {CHATBOX_BOTTOM}
    <br clear="all" />
    <!-- BEGIN switch_legend -->
    <table border="0" cellspacing="3" cellpadding="0" align="center">
        <tr>
            <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
            <td><span class="gensmall">{L_NEW_POSTS}</span></td>
            <td></td>
            <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
            <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
            <td>  </td>
            <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
            <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
        </tr>
    </table>
    <!-- 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 -->
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Mon Jul 30, 2012 7:53 pm

Help, please.. Smile
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by RSguideMaker on Mon Jul 30, 2012 8:06 pm

What forum version do you use?



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Mati™ on Mon Jul 30, 2012 9:07 pm

You can see it from the template he's forum version is PhpBB2 Wink
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by RSguideMaker on Mon Jul 30, 2012 9:15 pm

I can't find
Code:
<div id="stats">
in his code.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Mati™ on Mon Jul 30, 2012 9:27 pm

Because the templates are different from PunBB to PhpBB2 but you can find this.

Code:
    <!-- BEGIN disable_viewonline -->
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Tue Jul 31, 2012 8:28 am

So, can you help me to edit my Index_Body? Laughing
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Fri Aug 03, 2012 7:17 am

Guys?
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Tue Aug 07, 2012 8:19 am

Anyone? Laughing
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Tue Aug 21, 2012 5:19 am

Bump..
I very confuse to determine which part of "Statistics", part of 'Who is Online' and part of 'Birthday' in index_body template..
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Mati™ on Wed Aug 29, 2012 1:34 am

I will update the tutorial soon...
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Wed Aug 29, 2012 1:08 pm

Matti wrote:I will update the tutorial soon...

Thanks.. Smile
I'll waiting for the update..
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Brother on Sun Nov 11, 2012 5:29 am

Is there any update? Cool
avatar
Brother
Member
Member

Age : 27
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by zualuoi on Sun Nov 11, 2012 1:41 pm

HE...
Templates: ACP => Display => Templates --> General --> index_body find

Code:
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>
      <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 />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

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

      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE} :&nbsp;
         {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 -->

and replace

Code:

                         
<!-- BEGIN disable_viewonline -->

<!-- TÊN TAB -->
<div class="boxContent" style="float: left; width: 100%"><div class="main"><div class="main-head"><div class="page-title"><h2>Thống kê</span></h2></div></div><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. Csshelp.net</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 -->


CSS:

Code:
#tabs_container {
    border-bottom: 1px solid #ccc;
}
#stabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
}
#stabs li {
    display: inline;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
}
.tab_content {
    display: none;
}

jQuery:

The jQuery code is really simple.


To install the statistics into a tabs, first go to your Admin Control Panel and select Modules => HTML & JAVASCRIPT => Javascript codes management Create a new javascript ---> In all the pages. Paste the following code and then click Submit:
Code:
$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#stabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#stabs li").removeClass('active');
 
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
 
        //  Hide all tab content
        $(".tab_content").hide();
 
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
 
        //  Show the selected tab content
        $(selected_tab).fadeIn();
 
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});


ALL THE PAGE
avatar
zualuoi
Member
Member

Age : 32
Posts : 15
Join date : 2012-05-10
Reputation : 0

View user profile

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Mati™ on Mon Jan 14, 2013 3:27 pm

User inactive and seems not to need help. Closed.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: Solved: Turn statistics into tabs Question

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum