MyBB Community Forums

1. Extract the content from archive.zip and move jquery.js (1.9) and jquery.cookie.js to jscripts folder in your forum root.

2. Go to AdminCP -> templates and styles -> templates -> <your current theme template set> -> Ungrouped Templates -> headerinclude and at the bottom paste:

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>


<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>


 <script type="text/javascript">
 jQuery(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>

3. In index templates index find {$forums} variable and replace it with

<div class="tab_1" id="forum_tabs">

<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1">First</a>
<a href="javascript:;" id="tab_2">Second</a>
<a href="javascript:;" id="tab_3">Third</a>
</span>
</div>

<div>
{$forums}
</div>


</div>

4. In Forum Bit Templates -> forumbit_depth1_cat at the beginning of template paste

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

and at the bottom paste

</div>

and save it.

5. AdminCP -> templates and styles -> themes -> <your current forum theme> -> -> Add Stylesheet

File Name. tabs.css
Write my own content (select that option) and paste

#forum_tabs > .forum_tab_links {
	 text-align:center;
	 margin:7px auto;
	 display:block;
}

#forum_tabs > .forum_tab_links > span {
     background-color: #003454;
	 background-image: -webkit-gradient(linear, left top, left bottom, from(#026cb0), to(#03568a)); /* Saf4+, Chrome */
	 background-image: -webkit-linear-gradient(top, #026cb0, #03568a); /* Chrome 10+, Saf5.1+ */
	 background-image: -moz-linear-gradient(top, #026cb0, #03568a); /* FF3.6+ */
	 background-image: -ms-linear-gradient(top, #026cb0, #03568a); /* IE10 */
	 background-image: -o-linear-gradient(top, #026cb0, #03568a); /* Opera 11.10+ */
	 background-image: linear-gradient(top, #026cb0, #03568a); /* W3C */
	 display:inline-block;
	 border-radius:3px;
	 border:1px solid #003454;
} 


#forum_tabs > .forum_tab_links > span > a {
 	 padding:4px 5px;
	 font-size:11px;
	 display:block;
	 float:left;
     color:#f5f5f5;
	 text-align:center;
	 border-right: 1px solid #003454;
     text-decoration:none;	 
}
#forum_tabs > .forum_tab_links > span > a:hover,
#forum_tabs > .forum_tab_links > span > a.active {
 box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.449)!important;
}

#forum_tabs > .forum_tab_links > span > a:last-child {
     border-right:0 !important;
}


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

How to get tabs working ?

By default all tab content is hidden.When you click on a certain tab it will add a class to parent container (Example: first tab will add tab_1 class to parent container, second tab will add tab_2 class to parent container, ninth tab will add tab_9 class to parent container and so on).

Since the tab content is hidden you will need to add additional css to make certain forum categories visible after you click on certain tab.


EXAMPLE:

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

.tab_3 #tab_cat_2,
.tab_3 #tab_cat_3 {
  display:block !important;
}

Description of this code:

Quote:.tab_1 marks the parent class that was added after you clicked on first tab link. #tab_cat_1 marks the forum category (with ID 1) that is displayed when parent class has tab_1 class (other forum categories are hidden).


.tab_3 marks the parent class that was added after you clicked on third tab link. #tab_cat_2 and #tab_cat_3 marks the forum categories (with ID 2 and 3) that are displayed when parent class has tab_3 class (other forum categories are hidden).

YOUR CODE:

  
.tab_x #tab_cat_y,
.tab_x #tab_cat_y {
  display:block !important;  /*if your tab content contains more then 1 category use this code*/
}

.tab_x #tab_cat_y {
  display:block !important;
}

x - marks the number of your clicked tab (first tab - 1, second tab - 2 and so on)
y- marks the id of forum category that is dislayed when you click on tab x (to find out the number of forum category in AdminCP -> Forums & Posts and hover on forum category:

admin/index.php?module=forum-management&fid=1 <- 1 is the id of first category in my example).

NOTE: tab_1 is the default class (all content under tab_1 will show as default if you don't have any cookie values related to index tabs).


NOTE: if you have css code for tab_1 content just replace 1 in tab_1 and add 0 (tab_0 is the default class).

How to add more tabs ?


NOTE: In this example there are three tabs

<a href="javascript:;" id="tab_1">First</a>
<a href="javascript:;" id="tab_2">Second</a>
<a href="javascript:;" id="tab_3">Third</a>

If you need more tabs after

<a href="javascript:;" id="tab_3">Third</a>

add

<a href="javascript:;" id="tab_4">tab text</a>

For each new tab change x in id="tab_x" to a number (5, 6, 7, 8, 9, 10 and so on), and change tab text to your desired one.


images:

I want to try it out live. Do you have a live demo for this?

Demo.

Can you please explain a bit more on how to add the various forums under the tabs?

I'ts explained under "How to get tabs working ?".

You'll need to add your forum categories to a particular tab.

For example under first tab you want a forum categories with ID of 3 and 9 to show.

In tabs.css you'll add following code:

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

(2013-05-22, 10:59 AM)Johnny S Wrote: [ -> ]I'ts explained under "How to get tabs working ?".

You'll need to add your forum categories to a particular tab.

For example under first tab you want a forum categories with ID of 3 and 9 to show.

In tabs.css you'll add following code:

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

thanks bro...

I can't get the forums to work, please help.

(2013-05-22, 10:04 PM)Aerial Tricks Wrote: [ -> ]I can't get the forums to work, please help.

Did you added forum id's in global.css ?

These are pretty solid. Good work!

Thanks for the tut!