Tuesday tip : Display your categories as tabs

Post new topic   Reply to topic

The forum of the forums :: About Forumotion ::   :: Updates and new features

Page 1 of 2 • 1, 2  Next

View previous topic View next topic Go down

20100316

Post 

Tuesday tip : Display your categories as tabs




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}<br />
         {CURRENT_TIME}<br />
         </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><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- 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">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">&nbsp;</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><br />
            </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 18th March 2010, 15:05; edited 10 times in total

Typlo
Administrator
Administrator

Male
Posts: 2991
Age: 24
Language: French, English
Country:
Join date: 2007-09-04

Back to top Go down

Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

Tuesday tip : Display your categories as tabs :: Comments

Post on 16th March 2010, 13:45 by Piano244

Hmm.. this is interesting. I'll try it.

Back to top Go down

Post on 16th March 2010, 13:59 by paijo

thangks Typlo :wouhou:

Back to top Go down

Post on 16th March 2010, 14:15 by mcoy

nice this is the preview ill try this codes to my forum http://www.youngstaruniversity.co.cc/

by the way thanks!

Back to top Go down

Post on 16th March 2010, 14:22 by komiks0916

Do you have a sample site in which i can see the full results? I want to try it with our site http://animeguildphils.darkbb.com.. Thanks..

Back to top Go down

Post on 16th March 2010, 14:25 by mcoy

this is the result for me!

Back to top Go down

Post on 16th March 2010, 15:15 by Typlo

Great result mcoy! Very good

I just made a mod in the code so it all appears in English.

Back to top Go down

Post on 16th March 2010, 16:16 by komiks0916

the new one didnt work on my site.. Sad

Back to top Go down

Post on 16th March 2010, 16:47 by Russel

so it means, it is only possible to PHPBB and PHPBB2 version because other versions cannot edit the templates Smile

anyway, thanks for this wonderful tutorial. awesome . XD

Back to top Go down

Post on 16th March 2010, 16:50 by paijo





Back to top Go down

Post on 16th March 2010, 17:23 by CodyCFS

Very nice. One of the best, Typlo. Great post.

Back to top Go down

Post on 16th March 2010, 17:34 by Monk1

Thanks so much this is awesome Very Happy

Back to top Go down

Post on 16th March 2010, 18:54 by paor

missing css property for the opera browser (border-radius)

Back to top Go down

Post on 17th March 2010, 00:17 by TheListener

Cool result, Typlo!

Back to top Go down

Post on 17th March 2010, 02:55 by FunkFun

Ok, where "Subforum Name" is supposed to be, I get nothing. How do i put something there?

Back to top Go down

Post on 17th March 2010, 03:02 by Monk1

only if you make Subforum then you will see it just try and see.

Back to top Go down

Post on 17th March 2010, 03:02 by FunkFun

ok, thanks!

Back to top Go down

Post on 17th March 2010, 07:03 by mcoy

Just add this also to your Desciptions
http://www.youngstaruniversity.co.cc/
Code:
<br><br><br>


Back to top Go down

Post on 17th March 2010, 07:56 by SATCOM

thanks you so much......

applied the mods..and like it....

check this out...

http://negros-gsmmaster.7forum.net/forum.htm

Back to top Go down

Post on 17th March 2010, 11:31 by Doctor Inferno

We really need template edit for phpbb3!

Back to top Go down

Post on 17th March 2010, 13:23 by Monk1

Doctor Inferno wrote:We really need template edit for phpbb3!


I agree with you we really need the template edit for phpbb3?

Back to top Go down

Post on 17th March 2010, 13:56 by superforum-apatin

Why we can't change or modify templates in PHPBB3?

Back to top Go down

Post on 17th March 2010, 15:47 by Cool-processor

thanks typlo!!!!!!

OMG,my forum is phpbb3......
damn......

Back to top Go down

Post on 17th March 2010, 18:28 by ImProviser

very sweet tutorial....

but you really should make phpbb3 and invision template editing -_-

yes, invision has its big plus, huge CSS. But when combined with template editing = perfection (period).

Back to top Go down

Post on 18th March 2010, 12:30 by mcoy

NEW link of the preview http://youngstaruniversity.darkbb.com/

Back to top Go down

Post on 18th March 2010, 13:31 by Cool-processor

tried it to my test forum and worked nice!!!
http://coolprocessortestfor.forumotion.com :wouhou:

Back to top Go down

Post on 19th March 2010, 20:10 by popsiclestick

can anyone help me? i cant seem to make my recent post show..



See the one on the right above the date? The recent post title and link should show right? it's empty..

Back to top Go down

Post on 21st March 2010, 07:51 by The God

wowwww thx for this tutorial :wouhou:

Back to top Go down

Post on 21st March 2010, 14:54 by *Mare-SBK™*

popsiclestick wrote:can anyone help me? i cant seem to make my recent post show..



See the one on the right above the date? The recent post title and link should show right? it's empty..


Delete this
Code:
.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;
}


Put This

Code:
.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;
      margin-left: 50px;
}


Very good but on Phpbb2 is stupid Razz

Back to top Go down

Post on 22nd March 2010, 09:03 by admerbakud

Anybody could put in a step by step, step? So that it is to follow the intructions

Back to top Go down

Page 1 of 2 • 1, 2  Next

View previous topic View next topic Back to top

Post new topic   Reply to topic

The forum of the forums :: About Forumotion ::   :: Updates and new features

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