[YATT] - Yet another tab tutorial (with cookies)

[User 6029]

This tutorial still works..., though I did change it slightly for my usages as the lil bullet buttons were not what I wanted.

Primarily I just wanted to quickly edit it to actually be a tab in appearance and not have a button appearance

Example:


Edit: global.css
add:

/** YATT **/

#forum_tabs > .forum_tab_links {
    padding-bottom: 6px;
    width: auto !important;
}

#forum_tabs > .forum_tab_links > span {
    width: 80%;
    padding-left: 20px;
}

#forum_tabs  div[id^="tab_cat_"] {
  display:none; /*Hides tabs content*/
}

#forum_tabs > .forum_tab_links > span > #tab_1 {
    cursor: pointer;
    padding: 6px; 
    font-size: 12px;
    border-bottom:  0;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    background: #EFEFEF !important;    
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
} 

#forum_tabs > .forum_tab_links > span > a:hover#tab_1 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > a.active#tab_1 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > #tab_2 {
    cursor: pointer;
    padding: 6px; 
    font-size: 12px;
    border-bottom:  0;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    background: #EFEFEF !important;    
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
} 

#forum_tabs > .forum_tab_links > span > a:hover#tab_2 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > a.active#tab_2 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > #tab_3 {
    cursor: pointer;
    padding: 6px; 
    font-size: 12px;
    border-bottom:  0;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    background: #EFEFEF !important;    
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
} 

#forum_tabs > .forum_tab_links > span > a:hover#tab_3 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > a.active#tab_3 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > #tab_4 {
    cursor: pointer;
    padding: 6px; 
    font-size: 12px;
    border-bottom:  0;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    background: #EFEFEF !important;    
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
} 

#forum_tabs > .forum_tab_links > span > a:hover#tab_4 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

#forum_tabs > .forum_tab_links > span > a.active#tab_4 {
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    background: #007FD6 !important;    
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

.tborder {
    padding: 0px 0px 0px 0px !important; 
    border-top: 1px solid #007FD6 !important;
    border-bottom: 1px solid #D4D4D4 !important;
    border-left: 1px solid #D4D4D4 !important;
    border-right: 1px solid #D4D4D4 !important;
}

.thead {
    background: #007FD6 url(images/thead.png) bottom left repeat-x !important;
}

.tab_1 #tab_cat_1,
.tab_1 #tab_cat_3 {
  display: block !important;  
}

.tab_2 #tab_cat_8,
.tab_2 #tab_cat_9 {
  display: block !important; 
}

.tab_3 #tab_cat_10,
.tab_3 #tab_cat_11 {
  display: block !important;  
}

.tab_4 #tab_cat_12,
.tab_4 #tab_cat_13 {
  display: block !important;  
}

Edit Template: headerinclude

add:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($.cookie('active_index_tab') == 'tab_2') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_2');    
     } else if ($.cookie('active_index_tab') == 'tab_3') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_3');
      } else if ($.cookie('active_index_tab') == 'tab_4') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_4');    
      } else if ($.cookie('active_index_tab') == 'tab_5') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_5');    
        } else if ($.cookie('active_index_tab') == 'tab_6') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_6');    
     } else if ($.cookie('active_index_tab') == 'tab_7') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_7');    
      } else if ($.cookie('active_index_tab') == 'tab_8') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_8');    
     } else if ($.cookie('active_index_tab') == 'tab_9') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_9');    
     } else if ($.cookie('active_index_tab') == 'tab_10') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_10');
     } 

$('#forum_tabs > .forum_tab_links > span > a').click(function(){
       var tab_id = $(this).attr('id');
       parent_class = $('#forum_tabs').attr("class");
       $('#forum_tabs > .forum_tab_links > span > a').removeClass('active'); // remove active class from all links
       $(this).addClass('active'); // add active class to clicked tab
       if ( $("#forum_tabs").hasClass(parent_class) ) {
       $("#forum_tabs").removeClass(parent_class).addClass(tab_id);
       } else {  $('#forum_tabs').addClass(tab_id); }
      $.cookie('active_index_tab',tab_id, {expires: 365});
});

});
</script>

Edit Template: Index


with:

<div class="tab_1" id="forum_tabs">
<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1">Category 1 &amp; 2</a>
<a href="javascript:;" id="tab_2">Category 3 &amp; 4</a>
<a href="javascript:;" id="tab_3">Category 5 &amp; 6</a>
<a href="javascript:;" id="tab_4">Category 7 &amp; 8</a>
</span>
</div>
<div>
{$forums}
</div>

Edit Template: forumbit_depth1_cat

beginning:

<div id="tab_cat_{$forum['fid']}">

Edit Template: forumbit_depth1_cat
end:

</div>

If this is complicated for anyone or needed I can supply a theme.xml with this completed and or further info on color_whatever.css additions similar to what I described here:
[Tutorial] Tabbed forum with jQuery (multi categories in one tab)

[Serpius]

@vintagedaddyo

Your submission for this YATT works great!!

However, I do have two forums that are only for STAFF (FID 138 & 139). Non-staff users cannot see this forum.

How do I add those forums but yet not include those in the tabbed menu?

Currently, those forums are NOT showing up due to the YATT. Does not show up even in Admin mode.

[User 6029]

@vintagedaddyo

Your submission for this YATT works great!!

However, I do have two forums that are only for STAFF (FID 138 & 139). Non-staff users cannot see this forum.

How do I add those forums but yet not include those in the tabbed menu?

Currently, those forums are NOT showing up due to the YATT. Does not show up even in Admin mode.

I currently do not have the free time to look at this but here is what you can do. Remove all permissions from both staff categories and its forums for all non staff members except for "can view forum"..., this will allow the staff tab to work and display the staff categories and its forums to display but will not allow non staff members to view threads and any other permissions..., thus creating pretty much what you already have except the initial category listing for staff  categories and forums is no longer invisible. Hopefully this solution for now will suffice.

[DevLife]

Could you make a theme using this Tut sir?

[Serpius]

Could you make a theme using this Tut sir?

You can use any existing theme and use the YATT method to add the Tabs. 

If a theme already has Tabs built-in, then this method is not for that theme.

[User 6029]

Could you make a theme using this Tut sir?

Below you will find the default MyBB 1.8.19 theme with YATT added for all default color options.

[Tekkie Da]

I am currently using this in my forum. There is one issue I am having.

When I refresh the page, it remembers the tab where I was, but, CSS active state of the tab goes away.
Does anyone have idea idea to fix this?

[Tekkie Da]

Using is at https://xiraa.com

Still having the problem mentioned in the previous post. Can anyone help me?
Here is the code I am using. What am I doing wrong?

$(document).ready(function(){
if ($.cookie('active_index_tab') == 'tab_2') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_2');    
     } else if ($.cookie('active_index_tab') == 'tab_3') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_3');
      } else if ($.cookie('active_index_tab') == 'tab_4') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_4');    
      } else if ($.cookie('active_index_tab') == 'tab_5') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_5');    
        } else if ($.cookie('active_index_tab') == 'tab_6') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_6');    
     } else if ($.cookie('active_index_tab') == 'tab_7') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_7');    
      }
	//else if ($.cookie('active_index_tab') == 'tab_8') {
    //$('#forum_tabs').removeClass('tab_1').addClass('tab_8');    
    // } else if ($.cookie('active_index_tab') == 'tab_9') {
    // $('#forum_tabs').removeClass('tab_1').addClass('tab_9');    
    //} else if ($.cookie('active_index_tab') == 'tab_10') {
    //$('#forum_tabs').removeClass('tab_1').addClass('tab_10');
    //} 

$('#forum_tabs > .forum_tab_links > span > a').click(function(){
       var tab_id = $(this).attr('id');
       parent_class = $('#forum_tabs').attr("class");
       $('#forum_tabs > .forum_tab_links > span > a').removeClass('active'); // remove active class from all links
       $(this).addClass('active'); // add active class to clicked tab
       if ( $("#forum_tabs").hasClass(parent_class) ) {
       $("#forum_tabs").removeClass(parent_class).addClass(tab_id);
       } else {  $('#forum_tabs').addClass(tab_id); }
       $.cookie('active_index_tab',tab_id, {expires: 365});
});

[Crazycat]

This is because you add the class to #forum_tabs but you don't add the class active to the tab on load, you do it only on click.

You probably need to add: $('#'+$.cookie('active_index_tab')).addClass('active'); just before your click listener

[Tekkie Da]

You probably need to add: $('#'+$.cookie('active_index_tab')).addClass('active'); just before your click listener

Yup, you're right, that worked! Thank you so much!