Tabbed Categories

[kenny]

I've seen quite a few people looking for this over the past year or so - I myself have been interested in finding a nice and simple way to make category tabs. If you're not sure what I'm talking about, head over to bokt.nl and have a look at their forums.

The only differences (visually) between what I've done here and what they have, is that I have not yet implemented anything to stay which category you are currently looking at (A feature I would like to get to, but not sure on the best implementation - any help on this would be greatly appreciated). The other difference is that they are using subSilver based style and i'm using prosilver.

I must ask that people DO NOT request code for subSilver based styles in any comment posted in this tutorial. As stated many time, I DO NOT provide any code for subSilver based styles, only prosilver. If anyone else wishes to post the code for subSilver, they are free to do so. You can even post your own tutorial - any topic posted in the Code Snippets forum, after approval, will be automatically added to the Articles section

I will say that while I may call this a "simple tutorial", it may be a bit advanced for some users. It requires you have a little knowledge about the phpBB template system and some basic javascript/css/html knowledge too.

Now that is out of the way, here is how you do it

Create a new file and call it "forumlist_body_tabs.html" and paste the contents of the following ode block into it. Upload it to your styles template folder. Now edit index_body.html and change

Comment:

Code: Select all

<!-- INCLUDE forumlist_body.html -->

to

Code: Select all

<!-- INCLUDE forumlist_body_tabs.html -->

The code below was made for a stick forumlist_body.html taken from phpBB 3.0.7-pl1

Comment:
forumlist_body_tabs.html

Code: Select all

<!-- DEFINE $CAT1 = 'General' --><!-- DEFINE $CAT2 = 'phpBB' --><!-- DEFINE $CAT3 = 'Test' --><!-- DEFINE $CAT4 = 'Private Forums' -->

<div id="tabs" style="margin: 20px 0 0 7px;">
   <ul>
      <li><a href="#" onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"><span>{$CAT1}</span></a></li>
      <li><a href="#" onclick="dE('l_cat1', -1); dE('l_cat2', 1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"><span>{$CAT2}</span></a></li>
      <li><a href="#" onclick="dE('l_cat1', -1); dE('l_cat2', -1); dE('l_cat3', 1); dE('l_cat4', -1); return false;"><span>{$CAT3}</span></a></li>
      <li><a href="#" onclick="dE('l_cat1', -1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', 1); return false;"><span>{$CAT4}</span></a></li>
   </ul>
</div>

<!-- BEGIN forumrow -->
   <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   </div>
   <!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->   
   <div<!-- IF forumrow.FORUM_NAME eq $CAT1 --> id="l_cat1" style="display: block;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT2 --> id="l_cat2" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT3 --> id="l_cat3" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT4 --> id="l_cat4" style="display: none;"<!-- ENDIF -->>
<!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- ENDIF -->

   <!-- IF not forumrow.S_IS_CAT -->
      <li class="row">
         <dl class="icons">
            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
               <span class="forum-image">
                  <a href="{forumrow.U_VIEWFORUM}">
                     <!-- IF not forumrow.S_UNREAD_FORUM --><span class="forum-fade"><!-- ENDIF -->{forumrow.FORUM_IMAGE}<!-- IF not forumrow.S_UNREAD_FORUM --></span><!-- ENDIF -->
                  </a>
               </span>      
               <!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" title="{L_FEED} - {forumrow.FORUM_NAME}" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a><!-- ENDIF -->
               <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
               {forumrow.FORUM_DESC}
               <!-- IF forumrow.MODERATORS -->
                  <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
               <!-- ENDIF -->
               <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
            </dt>
            <!-- IF forumrow.CLICKS and U_ACP -->
               <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
            <!-- ELSEIF not forumrow.S_IS_LINK -->
               <dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
               <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
               <dd class="lastpost"><span>
                  <!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->               
                  <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn>
                  <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG} {forumrow.LAST_POST_SUBJECT}</a><br /><!-- ENDIF -->
                  {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                  <br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
               </dd>
            <!-- ENDIF -->   
         </dl>
      </li>
   <!-- ENDIF -->

   <!-- IF forumrow.S_LAST_ROW -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

<!-- BEGINELSE -->
   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_FORUMS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END forumrow -->

Let's break this down a little:
Each $CAT refers to the name of each category that you have. So for each category, create another $CATx (x would be just a number). The value of each $CAT must match exactly that of your category (ie. what you typed in the ACP).

Now, you'll notice that each of the tab links have an onclick set on them. This is where our javascript comes into play:

Comment:

Code: Select all

onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"

Setting an l_catx to 1 makes it visible and invisible if -1. My tutorial uses 4 categories, so if you have 5, you would add another <li> and onclick:

Comment:

Code: Select all

      <li><a href="#" onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', 1); dE('l_cat5', -1); return false;"><span>{$CAT5}</span></a></li>

This <div> further down does the check to see what id is active and sets the display accordingly:

Comment:

Code: Select all

   <div<!-- IF forumrow.FORUM_NAME eq $CAT1 --> id="l_cat1" style="display: block;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT2 --> id="l_cat2" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT3 --> id="l_cat3" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT4 --> id="l_cat4" style="display: none;"<!-- ENDIF -->>

Again, if you have more categories, add another line like this here and make sure to update all the id's

Comment:

Code: Select all

<!-- IF forumrow.FORUM_NAME eq $CAT5 --> id="l_cat5" style="display: none;"<!-- ENDIF -->>

Lastly, you may have some categories that only certain groups can see. phpBB will handle the permission for forums and hide everything as normal, but you may not want to show a tab if they should not see it. This is the only real tricky part.

To hide a tab from guests, you can simply surround the tab like this:

Comment:

Code: Select all

      <!-- IF S_USER_LOGGED_IN --><li><a href="#" onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"><span>{$CAT1}</span></a></li><!-- ENDIF -->

To show a tab only to moderators/admins:

Comment:

Code: Select all

      <!-- IF U_ACP or U_MCP --><li><a href="#" onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"><span>{$CAT1}</span></a></li><!-- ENDIF -->

To hide for certain groups is a little more tricky. First you will need to install this little snippet. Now you can do something like this

Comment:

Code: Select all

      <!-- IF S_GROUP_X --><li><a href="#" onclick="dE('l_cat1', 1); dE('l_cat2', -1); dE('l_cat3', -1); dE('l_cat4', -1); return false;"><span>{$CAT1}</span></a></li><!-- ENDIF -->

Where X is the id of the group. You can add multiple groups to that as well.

I will agree that this is possibly not the best implementation, but the idea of it that it doesn't require any real core changes to your forum. In fact it's 1 new file and 1 template change. So you can easily port it to another template.

NB* This tutorial is not suited for forums that change the names of their categories often.

So far I have tested this the following styles and it works pretty well:

• prosilver
• proglass
• Revolution (inherits from prosilver)
• Supernova
• KSerious

As a very last note, I wrote this up very quickly so I may have made a few mistakes. Please post back if I have missed anything or if you spot a possible mistake. I am very keen for feedback on this. If you can add anything, please share - I will update the article and of course add credit

[Dakin Quelia]

Good work, cherokee red.

But I have a little error under IE (as guest) with my tabs (style CA_Black). The permissions are good without this template.

Screenshot here.

[katib]

First of all, thank so much for taking time to write this tutorial
I followed this tutorial, however result was not as expected:
- some blocks not related with categories, desappeared like "who is on line" as well as a shoutbox..
- All categoris should be hidden except the one I click on, unfortunatly, other categories are showing as well

Here is my forumlist_body_tabs.html:

Code: Select all

<!-- DEFINE $CAT39 = 'المنتدى الــعــــــــــــــام' --><!-- DEFINE $CAT40 = 'الكتاب العربي (كتب ومراجعات عربية)' --><!-- DEFINE $CAT41 = 'كتاب الأدب (دواوين، روايات،خواطر وإبداعات)' --><!-- DEFINE $CAT42 = 'الدرس الفلسفي بالثانوي' --><!-- DEFINE $CAT43 = 'فنون لمتعة العين والأذن' --><!-- DEFINE $CAT44 = 'الكتاب الأعجمي' --><!-- DEFINE $CAT45 = 'كتاب الواحد والصفر' --><!-- DEFINE $CAT46 = 'المواضيع المحذوفة' -->

<div id="tabs" style="margin: 20px 0 0 7px;">
   <ul>
      <li><a href="#" onclick="dE('l_cat39', 1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT39}</span></a></li>
      <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', 1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT40}</span></a></li>
    <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', 1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT41}</span></a></li>
   <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', 1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT42}</span></a></li>
   <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', 1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT43}</span></a></li>
   <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', 1); dE('l_cat45', -1);  dE('l_cat46', -1); return false;"><span>{$CAT44}</span></a></li>
   <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', 1);  dE('l_cat46', -1); return false;"><span>{$CAT45}</span></a></li>
   <li><a href="#" onclick="dE('l_cat39', -1); dE('l_cat40', -1); dE('l_cat41', -1); dE('l_cat42', -1); dE('l_cat43', -1); dE('l_cat44', -1); dE('l_cat45', -1);  dE('l_cat46', 1); return false;"><span>{$CAT46}</span></a></li>
   </ul>
</div>

<!-- BEGIN forumrow -->
   <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   </div>
   <!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->   
   <div<!-- IF forumrow.FORUM_NAME eq $CAT39 --> id="l_cat39" style="display: block;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT40 --> id="l_cat40" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT41 --> id="l_cat41" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT42 --> id="l_cat42" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT43 --> id="l_cat43" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT44 --> id="l_cat44" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT45 --> id="l_cat45" style="display: none;"<!-- ENDIF --><!-- IF forumrow.FORUM_NAME eq $CAT46 --> id="l_cat46" style="display: none;"<!-- ENDIF -->>
<!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- ENDIF -->

   <!-- IF not forumrow.S_IS_CAT -->
      <li class="row">
         <dl class="icons">
            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
               <span class="forum-image">
                  <a href="{forumrow.U_VIEWFORUM}">
                     <!-- IF not forumrow.S_UNREAD_FORUM --><span class="forum-fade"><!-- ENDIF -->{forumrow.FORUM_IMAGE}<!-- IF not forumrow.S_UNREAD_FORUM --></span><!-- ENDIF -->
                  </a>
               </span>     
               <!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" title="{L_FEED} - {forumrow.FORUM_NAME}" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a><!-- ENDIF -->
               <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
               {forumrow.FORUM_DESC}
               <!-- IF forumrow.MODERATORS -->
                  <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
               <!-- ENDIF -->
               <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
            </dt>
            <!-- IF forumrow.CLICKS and U_ACP -->
               <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
            <!-- ELSEIF not forumrow.S_IS_LINK -->
               <dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
               <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
               <dd class="lastpost"><span>
                  <!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->               
                  <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn>
                  <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG} {forumrow.LAST_POST_SUBJECT}</a><br /><!-- ENDIF -->
                  {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                  <br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
               </dd>
            <!-- ENDIF -->   
         </dl>
      </li>
   <!-- ENDIF -->

   <!-- IF forumrow.S_LAST_ROW -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- ENDIF -->

<!-- BEGINELSE -->
   <div class="panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <strong>{L_NO_FORUMS}</strong>
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END forumrow -->

[kenny]

Good work, cherokee red.

But I have a little error under IE (as guest) with my tabs (style CA_Black). The permissions are good without this template.

Screenshot here.

Hmm, i'll try and have a look at this when I get home tonight

@katib I will have a look at yours also

[Dakin Quelia]

Any news?

[hardpeter]

Have you noticed the error:

Code: Select all

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; Qwest 1.0; Qwest 1.0)
Timestamp: Sat, 14 Aug 2010 00:00:02 UTC
Message: Object required
Line: 110
Char: 2
Code: 0
URI: http://127.0.0.1/phpbb307/styles/prosilver/template/forum_fn.js


The same error is on your site here also. This has to do with these edits somehow because when I switch back to forumlist_body.html the error is gone.
Any ideas about this?
Thanks,
Peter

Edit: Do you think it might have something to do with the function dE in forum_fn.js?