MyBB Community Forums › Resources › Tutorials v
[YATT] - Yet another tab tutorial (with cookies)

Linear Mode
[YATT] - Yet another tab tutorial (with cookies)
User 6029 Offline
Posts: 1,000
Threads: 55
Joined: Nov 2006
#21
2016-11-17, 12:07 PM (This post was last modified: 2018-10-10, 08:01 PM by 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:
[Image: 2k0mwz.png]

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)


Attached Files
.zip   Upload.zip (Size: 1.85 KB / Downloads: 173)
Find
Reply


Messages In This Thread
RE: [YATT] - Yet another tab tutorial (with cookies) - by User 6029 - 2016-11-17, 12:07 PM

Forum Jump:


Users browsing this thread: 5 Guest(s)