Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[YATT] - Yet another tab tutorial (with cookies)
#21
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:
Code:
/** 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:
Code:
<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:
Code:
<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:
Code:
<div id="tab_cat_{$forum['fid']}">

Edit Template: forumbit_depth1_cat
end:
Code:
</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: 4)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#22
@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'm Serpius and You're Not
[Image: 5M7sb0n.png?1]
Reply
#23
(10-09-2018, 10:46 AM)Serpius Wrote: @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.


Attached Files Thumbnail(s)
           
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#24
Could you make a theme using this Tut sir?
Reply
#25
(10-10-2018, 12:50 PM)DevLife Wrote: 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.
I'm Serpius and You're Not
[Image: 5M7sb0n.png?1]
Reply
#26
(10-10-2018, 12:50 PM)DevLife Wrote: 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.


Attached Files
.zip   YATT.zip (Size: 14.55 KB / Downloads: 3)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)