The forum of the forums
Welcome on the Forumotion Support Forum.

To take full advantage of everything offered by our forum, please log in if you are already a member or join our community if you're not yet....



Create a free forum like this one.
Display your categories as tabs 5 5 2

Display your categories as tabs

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

View previous topic View next topic Go down

Display your categories as tabs

Post by Leeloo on March 16th 2010, 3:42 am

Display your categories as tabs


Many of you asked how to achieve this effect:


Preview forum : http://youngstaruniversity.darkbb.com/forum.htm

This tutorial will try to explain. Avoid changes of templates if you do not have the minimum knowledge required ...

You need to be :
- forum founder,
- in PhpBB2/PunBB version,
- have minimum knowledge in templates and HTML


Addition in CSS

Admin panel Display Colors CSS Stylesheet

Insert this code in your CSS Stylesheet :
Code:
/*--- This part corresponds at the forum description ---*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      border: 3px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

/*--- This part corresponds to "X messages in X topics" ---*/
.forum-stats {
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      border-bottom: 0 none !important;
      border-left: 3px solid #000000;
      border-right: 3px solid #000000;
      border-top: 3px solid #000000;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      left: 280px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 200px;
}

/*--- This part corresponds to the subforums display ---*/
.forum-sousforum {
      color: #000000;
      border: 3px solid #000000;
      border-top: 0px !important;
      -moz-border-radius-bottomleft: 14px;
      -moz-border-radius-bottomright: 14px;
      -webkit-border-bottom-right-radius: 14px;
      -webkit-border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border-bottom-left-radius: 14px;
      margin: auto;
      padding: 4px;
      color: #000000;
      width: 50%;
      text-align: center;
      height: 14px;
      font-size: 11px;
}


Then hit :


Templates modifications

Admin panel Display Templates General

Edit the template index_box

Replace all template by :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}

         {CURRENT_TIME}

         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
         </h{catrow.forumrow.LEVEL}>

<!---- MODIFICATIONS MADE BY THE FRENCH SUPPORT FORUM ---->

      <div class="forum-stats">{catrow.forumrow.POSTS} message(s), in {catrow.forumrow.TOPICS} topic(s).</div>
<div class="forum-description">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
<div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->

         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

<!---- END OF MODIFICATIONS MADE BY THE FRENCH SUPPORT FORUM ---->

      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Warning: If you had made other changes to this template, they will be lost. In which case I suggest you instead try to combine the two codes: yours and this one.

Then hit :


Verify by clicking Waiting
And if you're satisfied, click

This tutorial was made by the French support forum,
especially Toto456 and translated by Typlo.

No reproduction possible without our agreement, pursuant to Article L122-1 of the ICC.


Last edited by Typlo on March 18th 2010, 7:05 am; edited 10 times in total

Leeloo
Administrator
Administrator

Female
Posts: 4284
Language: French, English
Points: 4733
Join date: 2007-09-04

Back to top Go down

View previous topic View next topic Back to top

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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