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:
3. In index templates index find {$forums} variable and replace it with
4. In Forum Bit Templates -> forumbit_depth1_cat at the beginning of template paste
and at the bottom paste
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
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:
Description of this code:
YOUR CODE:
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
If you need more tabs after
add
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:
![[Image: jtIIi7o.png]]()
![[Image: ZrqakTj.png]]()
![.zip]()
archive.zip (Size: 33.66 KB / Downloads: 7)
2. Go to AdminCP -> templates and styles -> templates -> <your current theme template set> -> Ungrouped Templates -> headerinclude and at the bottom paste:
Code:
<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
Code:
<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
Code:
<div id="tab_cat_{$forum['fid']}">and at the bottom paste
Code:
</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
Code:
#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:
Code:
.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:
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
Code:
<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
Code:
<a href="javascript:;" id="tab_3">Third</a>add
Code:
<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:
![[Image: jtIIi7o.png]](http://i.imgur.com/jtIIi7o.png)
![[Image: ZrqakTj.png]](http://i.imgur.com/ZrqakTj.png)
archive.zip (Size: 33.66 KB / Downloads: 7)
![[Image: 2YI0w.png]](http://puu.sh/2YI0w.png)
![[Image: authentication-required.jpg]](http://www.123ranking.co.uk/blog/wp-content/uploads/2012/02/authentication-required.jpg)
![[Image: postbit_quote.gif]](http://community.mybb.com/images/english/postbit_quote.gif)
button to test 
![[Image: 10fc552.png]](http://i41.tinypic.com/10fc552.png)
![[Image: CHen36S.png]](http://i.imgur.com/CHen36S.png)
![[Image: 111.png]](http://s17.postimg.org/5hcy1smkv/111.png)