The forum of the forums
Welcome to the Official Support Forum of Forumotion!

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've not yet.



Create a free forum like this one.

Display your categories as tabs

View previous topic View next topic Go down

Display your categories as tabs

Post by Leviosa on March 16th 2010, 10: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




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


No help without your forum url
No support via private message



Leviosa
Administrator
Administrator

Female Posts : 15386
Reputation : 1563
Language : French, English

http://help.forumotion.com

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