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


Turn Statistics into tabs (phpBB2 and punBB only)

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Tutorial Turn Statistics into tabs (phpBB2 and punBB only)

Post by Mati™ on Sun May 20, 2012 1:26 pm

First topic message reminder :

Turn your statistics into a tabs Templates Requirements (phpBB2 and punBB only)

You can only do this with PunBB and PhpBB2 because they allow us to edit the templates.

PhpBB2 Templates: ACP -> Templates --> General --> index_body find this code:

Code:
   <!-- 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 -->

And replace it with this one:

Code:
   <!-- BEGIN disable_viewonline -->

            <div id="tabs_container">
                <ul id="stabs">
                    <li class="active"><a href="#tab1">Tab 1</a></li>
                    <li><a href="#tab2">Tab 2</a></li>
                    <li><a href="#tab3">Tab 3</a></li>
                </ul>
            </div>

            <div id="tabs_content_container">
                <div id="tab1" class="tab_content" style="display: block;">
                    <p><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></p>
                </div>
                <div id="tab2" class="tab_content">
                    <p>Content for the Second tabs goes here</p>
                </div>
                <div id="tab3" class="tab_content">
                    <p>Content for the Third tabs goes here</p>
                </div>
            </div>


    <!-- END disable_viewonline -->

Save & Publish

PunBB Templates: ACP -> Templates --> General --> index_body find this code:

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} : 
 {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 it with this one:
Code:

<!-- BEGIN disable_viewonline -->
        <div id="tabs_container">
            <ul id="stabs">
                <li class="active"><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
                <li><a href="#tab3">Tab 3</a></li>
            </ul>
        </div>
        <div id="tabs_content_container">
            <div id="tab1" class="tab_content" style="display: block;">
                <p><!-- 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 --></p>
            </div>
            <div id="tab2" class="tab_content">
                <p>Content for the Second tabs goes here</p>
            </div>
            <div id="tab3" class="tab_content">
                <p>Content for the Third tabs goes here</p>
            </div>
        </div>
<!-- END disable_viewonline -->

Save & Publish

CSS:
Now let's add the CSS code into your CSS Stylesheet. Paste the following to the bottom of your CSS and then click Submit:

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;
}

Right now we have the HTML and CSS code all ready, all we need now is to connect the tabs with the content DIVs.

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;
    });
});

That's all your done. And I hope you like it.


Last edited by Mati™ on Sat Nov 15, 2014 2:08 am; edited 4 times in total
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


Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by AM99 on Tue Jul 31, 2012 5:50 pm

nice tut
keep the good work
avatar
AM99
Member
Member

Age : 26
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by MrZondervan on Fri Aug 03, 2012 2:43 pm

Straight forward and easy to apply, thanks for sharing!
avatar
MrZondervan
Member
Member

Age : 32
Posts : 72
Join date : 2012-08-03
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by AM99 on Sun Aug 05, 2012 7:46 pm

anychance of this on phpbb?
avatar
AM99
Member
Member

Age : 26
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by AM99 on Mon Aug 06, 2012 9:58 pm

bump
avatar
AM99
Member
Member

Age : 26
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by tommycoo on Mon Aug 20, 2012 4:20 am

can u make it happen on invision matti ?
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Mati™ on Mon Aug 20, 2012 8:23 am

@tommycoo wrote:can u make it happen on invision matti ?

No, because we don't have access to edit the templates for invision.
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

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by tommycoo on Tue Aug 21, 2012 1:08 am

i've punbb forum but i'm not understand must be start from where .
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by RSguideMaker on Tue Aug 21, 2012 1:05 pm

Please open a topic for help.



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

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by tommycoo on Tue Aug 21, 2012 11:24 pm

yes i have .. http://www.csshelp.net/t682-how-can-i-make-statistic-like-this-forum
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Leo on Wed Sep 05, 2012 2:11 am

I used this code a long time ago.
I recently added this code in

Sir Chivas™ wrote:PunBB, is the version right? Alright, you'll have to go to your Templates. If you're the founder, you'll have access to them. Go to ACP >> Display >> Templates >> General >> Index_body :edit: >> Look for,
Code:
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>

and replace it with this,
Code:
<img src=http://i47.tinypic.com/eskgvq.png/>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>

http://help.forumotion.com/t114264-birthdays-icon-foto#748160

Now my statistics are gone, the tabs as well.

Here's my forum. http://urandom.forumotion.com/forum

Help?
avatar
Leo
Member
Member

Age : 19
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Nathan Adhitya on Wed Sep 05, 2012 2:44 am

I Can gelp you via pm leo you must not to do until they gone you forget something like the css and the html or even the JS
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Leo on Sat Nov 03, 2012 2:33 am

Can somebody please delete this post? I moved my original post to a topic.
avatar
Leo
Member
Member

Age : 19
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by mr.franta on Sat Oct 12, 2013 11:54 am

super tutorial,thanks
avatar
mr.franta
Member
Member

Age : 29
Posts : 1
Join date : 2013-10-12
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Dark-Avenger on Thu Dec 26, 2013 1:07 pm

Hi all,
I am trying to develop it in phpbb2 but its not working correctly.
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Mati™ on Thu Dec 26, 2013 1:49 pm

I know need some edition on the HTML code to make this work for phpbb2
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

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Mati™ on Mon Jan 06, 2014 3:42 pm

Tutorial update hope it works for you...
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

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Dark-Avenger on Mon Jan 06, 2014 9:28 pm

Hi Matti,
I have done the changes in the template, CSS, Javascript and JQuery but the result is not correct http://prntscr.com/2h3hf6 the blue bar with Title "Παρόντες Χρήστες" Current Users in English it still remains in the box of tabs but I want it out of the box because I have made some changes to toggle the forum statistics. Furthermore the other tabs are empty.

Best Regards,
Dark-Avenger.
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Guest on Tue Jan 07, 2014 2:49 am

why am I not seeing the online statistics etc? all I see is empty tabs this pretty much wiped out statistics and added blank tabs? Any explanations why this happened?

Update: 
No Longer need assistance I just deleted the published index and all is back to normal.


Last edited by RDM-FlashBack on Tue Jan 07, 2014 9:41 pm; edited 1 time in total (Reason for editing : updated post)

Guest
Guest


Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Shadow on Thu Jan 09, 2014 4:35 pm

Really nice tutorial! Good job
avatar
Shadow
Premium Member


Posts : 30
Join date : 2012-04-25
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Dark-Avenger on Sat Jan 11, 2014 1:42 am

Bump
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Dusan on Sat Jan 11, 2014 2:16 am

Please open a topic for help.
avatar
Dusan
Member
Member

Age : 22
Posts : 711
Join date : 2012-06-08
Forum Version : PunBB
Reputation : 36

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Dark-Avenger on Fri Feb 07, 2014 6:46 pm

@Dusan wrote:Please open a topic for help.
I have already open a new topic here http://www.csshelp.net/t1062-problem-with-statistics-in-tabs-phpbb2
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Turn Statistics into tabs (phpBB2 and punBB only)

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


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