Tabbed Categories

[[renz]]

help sure would be the bee's knees (;

[Mr. Red]

I'm not very good with coding, but is there a way to select what categories are tabbed?

I want my main page to feature the majority of the original categories, with a single tabbed one going to a different area.

[XENO QUEEN]

Anyone?

[XENO QUEEN]

Jul 7, 2013 22:20:02 GMT -8 [renz] said:

help sure would be the bee's knees (;

Hey it's just the top line, ignore it, everything else is the same. So still replace it and for the second code take out:

<span style="font-family: Verdana, Arial; font-size: 10pt;">/*Begin Tabbed Categories CSS */</span>

Span shouldn't be in the style sheets that i know of so keep: /*Begin Tabbed Categories CSS */ But remove everything in the span tags.

I'm still trying to get this to work, but that's what I've been told so far, if it helps.

[[renz]]

eek. that confused me even more xeno queen. thank you tho..

i have a thread located here, so if you have the time i would really appreciate it if you could stop in there and try and explain in a way i could understand, because again your way just now has me even more confused haha

or if anyone can take a few minutes out of their day to help it would be extremely appreciated...

[Shorty]

Just go ahead and replace it. The only thing different is the title bar and that is removed with this template. So just replace it.

[Boy_Wonder]

I'm kinda curious if there's anyway for the background to change as each tab is selected/made active?

[Shorty]

If you have the css then yes.

[Boy_Wonder]

I could make the css - for it, could you explain how I'd do it?

boywonderskins.proboards.com/ < That's the 'so far' skin in progress, however it will be eventually going onto my main board with a total of five categories

[Shorty]

The css is in the first post

[Boy_Wonder]

I meant the 'body' background. So say I start with background image a for the body. When the next tab is selected the body background image changing

[Shorty]

Oh okay. That can't be done with CSS. That will require a little bit of javascript.

So replace the javascript part of this template with

<script>
$('div.tabbedcatsdiv:last').ready(function() {
$('td.tabbedtd').click(function() {
if($(this).attr('id') == 'tab1') {
$('body').css('background-image','url("i.imgur.com/gk4GV.png")');
}
else if($(this).attr('id') == 'tab2') {
$('body').css('background-image','url("storage.proboards.com/0/0/i/hswYRRvgDFMp_2QEHWQQ.png")');
}
$('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');
if(catId == '1') {
$('body').css('background-image','url("i.imgur.com/gk4GV.png")');
}
else if(catId == '2') {
$('body').css('background-image','url("storage.proboards.com/0/0/i/hswYRRvgDFMp_2QEHWQQ.png")');
}
$('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) {
$('body').css('background-image','url("storage.proboards.com/0/0/i/hswYRRvgDFMp_2QEHWQQ.png")');
$('div.container.boards.tabbedcatsdiv').hide();
$('div.container.boards.2.tabbedcatsdiv').show();
$('td.tabbedtd#tab2').removeClass('tabbedtd').addClass('tabbedtdactive');
}
});
</script>

Alright so the first red section. You will need to repeat that for each category after the second one. You will need too replace the number in the blue parts with the id of the category. The pink is the URL for image you want for that particular category. The second red section you will need to repeat that for each category after the second. The green you will need to replace with the category id. And the yellow is the URL for the tab you have set to the default tab if they don't have a preference set.

I hope this makes sense. If not, let me know and I can try my best to help you. If you can't figure it out you could link me to your forum and tell me what image you want with what category and I could fill out all the stuff myself. But that's only if you can't figure it out yourself.

[Boy_Wonder]

Thanks! I'll use this potentially in a later skin as I'm content with how the skin looks mainly now - though there's always going to be a second skin I'll use this for

[Shorty]

Alright. Well glad I could help.

[Boy_Wonder]

You're welcome ^_^