Tabbed Categories

[Shorty]

This is a template modification for those that like having the tabulated categories. It's pretty simple.

Go to Admin Home > Themes > Layout Templates > Home and find this code from line 2-10

{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar"><h2>$[category.name]</h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}


Replace that with the code below.

<table width="100%" class="tabbedcategories">

<tr>

{foreach $[category]}

<td class="tabbedtd" id="tab$[category.id]">

<a style="text-decoration: none;">

<div width="100%" height="100%">

<h2>

<font size="3">

$[category.name]

</font>

</h2>

</div>

</a>

</td>

{/foreach}

</tr>

</table> 

<script>

$(document).ready(function() {

$('td.tabbedtd').click(function() {

$('td.tabbedtdactive').removeClass('tabbedtdactive').addClass('tabbedtd');

$(this).removeClass('tabbedtd').addClass('tabbedtdactive');

var catid = $(this).attr('id').split('tab')[1];

$('div.container.boards.tabbedcatsdiv').hide();

$('div.container.boards.'+catid+'.tabbedcatsdiv').show();

localStorage.setItem('tabcats',catid);

});

if(localStorage.getItem('tabcats') != undefined) {

var catId = localStorage.getItem('tabcats');

$('div.container.boards.tabbedcatsdiv').hide();

$('div.container.boards.'+catId+'.tabbedcatsdiv').show();

$('td.tabbedtd#tab'+catId).removeClass('tabbedtd').addClass('tabbedtdactive');

}

else if(localStorage.getItem('tabcats') == undefined || localStorage.getItem('tabcats') == null) {

$('div.container.boards.tabbedcatsdiv').hide();

    $('div.container.boards.2.tabbedcatsdiv').show();

$('td.tabbedtd#tab2').removeClass('tabbedtd').addClass('tabbedtdactive');

}

});

</script>

{foreach $[category]}

$[category.anchor]

<div class="container boards $[category.id] tabbedcatsdiv">

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>

{/foreach}

Change the two red number to the id of the category you want as the default tab if they don't have a preference set. And then go to the CSS Style Sheet(Admin Panel > Themes > Advanced Styles & CSS > Style Sheet tab) and add this at the very bottom. The CSS will match the the color of the title bar's color, and the hover is from the hover of the board list.

/*Begin Tabbed Categories CSS */
.tabbedtd {
background-color: #1f1f1f;
   text-align: center;
   border: @content_area_border;
   padding: 2px;
   margin: 2px;  
}

.tabbedtd:hover {
   background-color: @container_highlight_color;
}

.tabbedtdactive {
   background-color: @container_highlight_color;
   text-align: center;
   border: @content_area_border;
   padding: 2px;
   margin: 2px;
}
/*End Tabbed Categories CSS*/


Then edit whatever you want in that CSS. Hope this helps!

[shortiejinete]

Omgosh.. you may have saved my forum from the version 5 take over. Such a huge forum this is one of the many things that keeps we rely on to not overwhelm people.

[pawl]

Any chance of a preview for those of us too lazy to test it in order to see how it looks? =P

[shortiejinete]

ill put it in and screenie it paul





Can you set how many across the forum you want or is it only stretch with the text? And yes we do have 11 categories on the site this is the test site for ¬.¬ though i have done something wrong... I can't see any of my boards...

[Shorty]

You can't directly set how many across. but there is some code you can put in so that after a certain category tab there will be a line break. And as far as the boards. Idk what you did wrong. try resetting the template for the home page, and then retrying it.

[shortiejinete]

yeah the line break is what i meant to say sorry if it does it again I shall screenie the code for you to see if we are doing something wrong.

[shortiejinete]

I found it!! I had an extra space! Thanks shorty I feel like im in debt to you now though

[Shorty]

Not a problem. If you need anymore help, then just ask.

[smashwords2]

Nice. Thanks.

[Shorty]

Your welcome!!

[smashwords2]

Is there a way the tabs won't disappear when opening a forum, sub-forum, or thread/post? You can see what I mean on my test site here.

[Shorty]

No. The categories are only on the home page. So even if the tabs were anywhere else, clicking them wouldn't do anything.

[smashwords2]

Nov 24, 2012 19:12:27 GMT -8 Shorty said:

No. The categories are only on the home page. So even if the tabs were anywhere else, clicking them wouldn't do anything.

Thanks.

None of my forums show a Last Post on my home page.
Last Post shows up when I click on a forum to open it, but not when
board is listing forums under a Category. Any idea what I've done wrong?

[Shorty]

Can you post your home template here so I can take a look at it?

[smashwords2]

Nov 24, 2012 19:51:58 GMT -8 Shorty said:

Can you post your home template here so I can take a look at it?

<table class="list" role="grid">
    <thead>
        <tr>
            <th class="icon"></th>
            <th class="main">Board</th>
            <th class="threads">Threads</th>
            <th class="posts">Posts</th>
            <th class="latest last">Last Post</th>
        </tr>
    </thead>
    <tbody>
        {foreach $[board]}
            {if !$[board.is_redirect]}
                <tr id="$[board.content_id]" class="$[board.content_class]">
                    <td class="icon">$[board.icon]</td>
                    <td class="main clickable">
                        <span class="link"><a href="$[board.href]">$[board.display_name]</a></span><br />
                        <p class="description">$[board.description]</p>
                        {if $[board.num_mods]}
                            <p class="moderators">
                                Moderator{if $[board.num_mods] != 1}s{/if}:
                                {foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
                                {foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
                            </p>
                        {/if}
                        {if $[board.sub_board]}
                            <p class="sub-boards">
                                Sub-board{if $[board.sub_board] != 1}s{/if}:
                                {foreach $[board.sub_board]}$[board.sub_board]$[board.sub_board.comma] {/foreach}
                            </p>
                        {/if}
                    </td>
                    <td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads] Threads<br />{/if}{if $[board.posts] == -1}N/A{else}$[board.posts] Replies{/if}</td>
                    <td class="latest last">
                        {if $[board.posts] > 0}
                            {if $[board.last_thread]}
                                $[board.last_thread.recent_link]<br />
                                by $[board.last_thread.last_post.created_by_user]<br />
                                <span class="date">$[board.last_thread.last_post.date]</span>
                            {/if}
                        {else}
                            No posts have been made on this board.
                        {/if}
                    </td>
                </tr>
            {else}
                <tr id="$[board.content_id]" class="$[board.content_class]">
                    <td class="icon">$[board.icon]</td>
                    <td class="main clickable redirect last" colspan="4">
                        <span class="link">$[board]</span><br />
                        <p class="description">$[board.description]</p>
                    </td>
                </tr>
            {/if}
        {/foreach}
        {if !$[board]}
            <tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
        {/if}
    </tbody>
</table>