Advertisement:

Navigation

SMF Mod Site

Mod Name:
Tabbed Info
Created By:
shadav
Type:
Theme Enhancements
First Created:
October 11, 2020, 06:22:04 PM
Last Modified:
October 26, 2020, 11:23:10 PM
Latest Version:
1.0
Compatible With:
2.0.17
Total Downloads:
46

Download this mod

Tabbed_Info.zip (15kB) [26]
Tabbed_Info_Lite.zip (13kB) [19]
Manual Install Instructions for SMF


Below are some preview images of what the mod looks like when being used

Description:

This will put the Info Center into tabs

thanks to this article on a how to create tabs: inspirationalpixels.com/creating-tabs-with-html-css-and-jquery/

thanks to vicram10 for helping to get it working correctly (stupid divs and if statements anyways)

you can easily change the looks of the tabs with the provided css, i tried to make it match closely to the default theme

you can change the animation in the tabbedinfo.js file

find

Code: [Select]
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

replace with one of the below

fade
Code: [Select]
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

slide 1
Code: [Select]
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

slide 2
Code: [Select]
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);


if you want to see a demo
adserver.business/test/smf/
or
4rearth.info

please note that the Upcoming Calendar tab will not work unless there is actually an event or holiday

you can change which tab is active (default open upon page load) by changing
Code: [Select]
<li class="active"><a href="#tab3">to
Code: [Select]
<li><a href="#tab3">
and then find
Code: [Select]
<div id="tab3" class="tab active">change to
Code: [Select]
<div id="tab3" class="tab">
then on whichever tab you want as default, lets say recent posts simply add the class="active"
so change
Code: [Select]
<li><a href="#tab1">to
Code: [Select]
<li class="active"><a href="#tab1">
and then change
Code: [Select]
<div id="tab1" class="tab">to
Code: [Select]
<div id="tab1" class="tab active">
===
added licence (GNU General Public License)
basically do what you like except please do give credit where credit is due...
I'm not really good at scripts and things so :p I welcome anyone who's willing to improve on it

fixed issue with buttons still showing up even though the recent or calendar weren't turned on in admin
also changed the default active tab to the forum stats (for those that don't have recent posts turned on, you can change this with the codes above)

fixed missing jquery

added a second file, Tabbed_Info_Lite.zip, for those that may already have installed tabbed profile mod