Advertisement:

Navigation

SMF Mod Site

Mod Name:
Tabbed Profile
Created By:
shadav
Type:
Profile
First Created:
October 12, 2020, 12:20:54 AM
Last Modified:
October 18, 2020, 05:49:26 PM
Latest Version:
1.0
Compatible With:
2.0.17
Total Downloads:
60

Download this mod

Tabbed_Profile.zip (16kB) [26]
Tabbed_Profile_Lite.zip (15kB) [32]
Manual Install Instructions for SMF


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

Description:

This will change your profile page into tabs and rearrange things to make it a bit nicer :)

thanks to this article for the tutorial on how to make tabs : inspirationalpixels.com/creating-tabs-with-html-css-and-jquery

this will not work with other modifications to the profile.template.php
that being said you can make it work by adding more tabs and throwing the modifications into the new tabs
you'd need to add more tab menus by adding them into the

Code: [Select]
<ul class="tab-links">
<li class="active"><a href="#tab1">', $txt['userinfo'], '</a></li>
<li><a href="#tab2">', $txt['summary'], '</a></li>
<li><a href="#tab3">', $txt['signature'], '</a></li>
</ul>so you'd add
Code: [Select]
<li><a href="#tab4">NEW MENU NAME GOES HERE</a></li>and then wrap the modification into a tab
Code: [Select]
<div id="tab4" class="tab">
MODIFICATION GOES HERE
</div> <!-- #tab4 -->if you want it to match and have the cat bar you would do
Code: [Select]
<div id="tab4" class="tab">
<div class="cat_bar">
<h3 class="catbg">
<span class="ie6_header floatleft"><img src="', $settings['images_url'], '/icons/info.gif" alt="NEW MENU NAME GOES HERE" class="icon" />NEW MENU NAME GOES HERE</span>
</h3>
</div>
<div class="windowbg2">
<span class="topslice"><span></span></span>
<div class="content">
MODIFICATION GOES HERE
</div></div>
</div> <!-- #tab4 -->change info.gif to whatever image you want to use

and this after
Code: [Select]
</div> <!-- #tab3 -->
you can change the active tab (the default tab that opens on page load)
so let's change it from user info to summary
change
Code: [Select]
<li class="active"><a href="#tab1">', $txt['userinfo'], '</a></li>to
Code: [Select]
<li><a href="#tab1">', $txt['userinfo'], '</a></li>
change
Code: [Select]
<li><a href="#tab2">', $txt['summary'], '</a></li>to
Code: [Select]
<li class="active"><a href="#tab2">', $txt['summary'], '</a></li>
change
Code: [Select]
<div id="tab1" class="tab active">to
Code: [Select]
<div id="tab1" class="tab">
change
Code: [Select]
<div id="tab2" class="tab">to
Code: [Select]
<div id="tab2" class="tab active">

you can change the style of the buttons with the provided css, I tried to keep it close to the default theme

you can change the animation in the tabbedinfo.js
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);
===
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

added error=skip to language edits

fixed missing jquery

fixed issue with signature button showing when user has no signature

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