Tabbed boxes for v3.5

[Micha]

Ok now, I’ll try to explain how can you make tabbed boxes like in v.4.0 (Most popular/Most Emailed, Most commented/Latest comments)

First you’ll need control_tabs.js file attached in .zip archive.
Upload it in your js folder.

Next, open your header.tpl template and import control tabs java script:

<script language="javascript" type="text/javascript" charset="iso-8859-1" src="{ROOT}js/control.tabs.js"></script>

Now you need to determine ID’s of boxes (I suggest using Firebug plug-in for Firefox to do this).
I’ll tab two boxes on right column here, most popular and most emailed, their ID’s are:
#box_most_popular
#box_most_emailed

Now open index.tpl template (same for all pages) and right above {BOX_MOST_POPULAR} and {BOX_MOST_EMAILED} tags add following code:

<ul id="tab_list" class="tabs">
<li><a href="#box_most_popular">Most popular</a></li>
<li><a href="#box_most_emailed">Most emailed</a></li>
</ul>

and at the bottom of template add following:

<script>
roomTabs = new Control.Tabs($('tab_list'));
</script>

You can add a little of CSS to format them in your dynamic_box_right.css stylesheet:

#box_most_popular h3, #box_most_emailed h3 { display: none;}


#dynamic_box_right ul.tabs {
list-style:none;
margin:0;
padding:0;
clear:both;
height:25px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin-bottom: 1px;
border-bottom: 1px solid #CCCCCC;
}

#dynamic_box_right ul.tabs li {
float:left;
margin-right: 1px;
width:115px;
text-align:center;
background: none;
padding: 0px;
border-bottom:0px;
}

#dynamic_box_right ul.tabs li a {
display:block;
height:18px;
padding:3px;
line-height: 18px;
background:#CCCCCC;
color: #000;
}

#dynamic_box_right ul.tabs li a:hover {
color: #c90404;
text-decoration: none;
}

#dynamic_box_right ul.tabs li a.active {
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
background:#FFF;
color: #c90404;
font-weight: bold;
}


This should be basic principle on how to add tabs into your templates, important thing is to determine ID’s of boxes you want to tab.

Hope it helps :)