Tabbed Categories

[Nori]

You can change the values in the CSS to whatever you want. Personally this is what I put in for simplicity:

/*Begin Tabbed Categories CSS */
.tabbedtd {
   background-color: darken(@title_bar_background_color, 7%);
   background-image: @title_bar_background_image;
   background-attachment: @title_bar_background_attachment;
   background-repeat: @title_bar_background_repeat;
   background-position: @title_bar_background_position;
   border: @title_bar_border;
padding: 5px;
margin: 2px;
.rounded-corners(@tabs_border_radius); }

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

.tabbedtdactive {
background-color: @title_bar_background_color;
   background-image: @title_bar_background_image;
   background-attachment: @title_bar_background_attachment;
   background-repeat: @title_bar_background_repeat;
   background-position: @title_bar_background_position;
   border: @title_bar_border;
padding: 5px;
margin: 2px;
.rounded-corners(@tabs_border_radius); }
/*End Tabbed Categories CSS*/

By using the already existing variables for title bars it becomes pretty simple to change/add things. You may also prefer using some of the existing 'tab' css variables instead of title bars. Experiment!

[kaitiebelle]

Thanks so much for this!

[MissNK]

This reply / thread contains a code to show the new-button next to the category's name if there are any new posts. It worked like a charm for me, so perhaps other people find it useful too.

[Former Member]

Nov 12, 2012 14:18:42 GMT -8 Shorty said:

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!

 How would this code effect an existing forum-that's had many theme changes?

[Nori]

Depends on what the changes were. If you did things with the categories that's about the only thing that would be a possible issue. Best way to find out is to try and see, no one else can do that but you. Luckily you can preview layout template changes before committing. So if you don't like it just don't commit and back out. As for the CSS you can leave the window open after the save, and if you end up not liking it can just undo your changes and then save again.

[Bao Zi'Bub]

Hey, a quick search doesn't quite clarify -

Would it be simple enough to make this work so that some categories are tabbed while others are normal? (if it doesn't already support such already)

So for instance you could have a general discussion category on the top, then tabbed categories in a middle section, and then a normal category again below that?

Or is this currently an 'all or nothing' sort of deal and I'm probably better creating my own solution from scratch?

[Kniraven]

Nov 18, 2012 18:16:05 GMT -8 Shorty said:

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.

Could you teach me how to do this?

[Quintur]

Is there a way to change the colour and font of the hyperlinks to make them a bit better looking?
prnt.sc/ld5p13 This is what it looks like on mine, but the blue hyperlink colour is hard to see against the background colour.

[₪» ⅀ ƪ Ƒ «₪]

Nov 1, 2018 6:51:37 GMT -8 Quintur said:

Is there a way to change the colour and font of the hyperlinks to make them a bit better looking?
prnt.sc/ld5p13 This is what it looks like on mine, but the blue hyperlink colour is hard to see against the background colour.

In your Style Sheet, the OP had you add this (among other things):
.tabbedtd {
background-color: #1f1f1f;
text-align: center;
border: @content_area_border;
padding: 2px;
margin: 2px;
}

If you find that, then add in this:
color:#ffffff;
It should be after the first { and before the last }, so like the other bits of codee are. Then you can adjust the hex code color to be the color that you want. You can also insert
font-family:georgia;
to change the font face, replacing "georgia" which whichever font you want. And you can use:
font-size:12px;
to make the font larger or smaller by increasing/decreasing the number before the ;

If that doesn't work, then a link to your site would be beneficial if possible :)

[Quintur]

I've added in the bits that you've said and it doesn't appear that anything has changed.
avinos.boards.net/
Here's a screenshot of the coding; prntscr.com/ld7m9k

[₪» ⅀ ƪ Ƒ «₪]

Try adding a brand new code, this one:
.tabbedtd a{
font-family: FONT;
color: #COLOR;
font-size: SIZEpx;
}
(fill in your info again for font face/color/size)

Basically the difference here is the a added right before the first { squiggle. It specifies a link, so it may help target the right spot. I'm not great at identifying which classes are needed to affect certain spots, I usually wind up testing a lot of things until I find the one that works haha

[Quintur]

It's changed the colour of the font but it doesn't seem to be doing anything for the size and font of the text, but that's not too much of an issue.

[₪» ⅀ ƪ Ƒ «₪]

Trying adding an !important right before the semicolon. So like:
font-family:FONT !important;
font-size: SIZEpx !important;
Like that. And ensure it's at the bottom of your style sheet

[Quintur]

prntscr.com/ld81f9 Have I done something wrong?

[₪» ⅀ ƪ Ƒ «₪]

Hmm no it looks like you have done it correctly.

Can you try finding this
$[category.name]
in your "Home" layout template?
Try surrounding that with this:
<div style="font-family: FONT; font-size: SIZEpx;">$[category.name]</div>

We'll see if that can override whatever default font is fighting with the code. Someone else can probably identify where the original default code is that can be rewritten, but I'm not quite that savvy, so I'm attempting to override it instead xD