Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 1 Vote(s) - 1 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #1
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Hello friends,
Tabbed profiles have been a part and parcel of the MyBB Themes these days.
Every one likes the profiles of default MyBB to be changed to something new.
Here is a quick tutorial to make MyBB tabbed profiles with jQuery, CSS and HTML.

Example Demo of the tabs : Link

So first you need 3 basic steps , as follows.

1. Adding Css for your profile tabs. :
Add this code to your theme global.css file at the bottom and save it.

Code:
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}

2. Defining jQuery for the profile tabs.
Add this code in your theme templates .
Navigate to your theme templates > Ungrouped templates > Headerinclude template.

Add this code at the bottom of the template.

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});
</script>

3. Editing HTML of the Member templates for tabbed profiles:

Navigate to your theme templates > member templates > member_profile template.

You need to make your own ideas to what to include in a tab.
This is how i made my own choice, and i say again you can have your own choices and number of tabs.

So replace all the contents of your template with this code :
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="trow1">
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td class="trow1" width="75%">
<span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
</td><td width="25%" align="right" valign="middle">{$avatar}</td></tr></table>
</td>
</tr>
{$awaybit}
</table>
<br />
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<td width="100%" style="vertical-align: top;padding-top: 2px;">
    <ul class="tabs">
        <li><a href="#tab1">About</a></li>
        <li><a href="#tab2">Contact</a></li>
        <li><a href="#tab3">Activity</a></li>
    </ul>
<br />
<div class="tab_container">
<div id="tab1" class="tab_content">
{$profilefields}
{$signature}
{$buddy_options}
{$modoptions}
{$adminoptions}
</div>


<div id="tab2" class="tab_content">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>Contact Details Of {$formattedname}</strong>
<tr>
<td class="trow1"><strong>{$lang->homepage}</strong></td>
<td class="trow1">{$website}</td>
</tr>
{$sendemail}
<tr>
<td class="trow2"><strong>{$lang->pm}</strong></td>
<td class="trow2"><a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->icq_number}</strong></td>
<td class="trow1"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=icq&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['icq']}</a></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->aim_screenname}</strong></td>
<td class="trow2"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a></td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->yahoo_id}</strong></td>
<td class="trow1"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->msn}</strong></td>
<td class="trow2"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a></td>
</tr>
</td>
</tr>
</table>
</div>


<div id="tab3" class="tab_content">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>Statistics Of {$formattedname}</strong>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate} {$memlastvisittime}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->timeonline}</strong></td>
<td class="trow2">{$timeonline}</td>
</tr>
{$reputation}
{$warning_level}
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
{$footer}
</body>
</html>

Here finishes the simple yet powerful tutorial for making tabbed profiles with jQuery.
And this MyBB Tabs will work without conflict with any of your plugins.
The styling of the tabs is entirely your own preference , you can change it via css editing.
Hope you guys like it , and a credit is appreciated if anyone uses it or share's it. Smile

Thank you,
regards

[Image: lt79ucY.png]
(This post was last modified: 10-05-2013 01:17 AM by envira.)
10-05-2013 01:16 AM
Find
3
Quote




Bala Offline
Customer
****

Posts: 41
Joined: Feb 2013
Likes Received : 5

Facebook Google Plus
Nationality:

Mood: Sick

Points: 873.20Points
Post: #2
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Thanks Envira, works pretty well. Great job.
10-05-2013 10:52 AM
Find
0
Quote




Bala Offline
Customer
****

Posts: 41
Joined: Feb 2013
Likes Received : 5

Facebook Google Plus
Nationality:

Mood: Sick

Points: 873.20Points
Post: #3
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Ok, I have edited the CSS and HTML to make a customized version. I will share it with you guys too.
10-05-2013 09:01 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #4
Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Okay sure glad it helped,
Regards

[Image: lt79ucY.png]
10-05-2013 10:19 PM
Find
0
Quote




Jason Offline
Customer
****

Posts: 62
Joined: Oct 2012
Likes Received : 9

Nationality: India

Mood: None

Points: 982.56Points
Post: #5
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Wow nice share envira. Hope you share more useful css.
10-05-2013 10:35 PM
Find
0
Quote




Bala Offline
Customer
****

Posts: 41
Joined: Feb 2013
Likes Received : 5

Facebook Google Plus
Nationality:

Mood: Sick

Points: 873.20Points
Post: #6
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

I will be sharing my custom code, just give me one day. Its an elegant Tabbed profiles.
10-05-2013 11:15 PM
Find
0
Quote




Bala Offline
Customer
****

Posts: 41
Joined: Feb 2013
Likes Received : 5

Facebook Google Plus
Nationality:

Mood: Sick

Points: 873.20Points
Post: #7
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Here is the tutorial with all the customized codes:- http://community.mybb.com/thread-146284.html
10-06-2013 12:45 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #8
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

(10-06-2013 12:45 PM)Bala Wrote:  Here is the tutorial with all the customized codes:- http://community.mybb.com/thread-146284.html

Well , you should make a linkback to this tutorial , as a credit Smile
regards

[Image: lt79ucY.png]
10-06-2013 01:51 PM
Find
0
Quote




Bala Offline
Customer
****

Posts: 41
Joined: Feb 2013
Likes Received : 5

Facebook Google Plus
Nationality:

Mood: Sick

Points: 873.20Points
Post: #9
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

Ok will be done. No problems. Once more thanks Envira. Smile
10-06-2013 07:44 PM
Find
0
Quote




jupes Offline
Junior Member
**

Posts: 3
Joined: Oct 2013
Likes Received : 0

Nationality:

Mood: None

Points: 0.00Points
Post: #10
RE: Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery

It didn't work at all. I inputted all the codes and nothing shows up on my forum and nothing looks edited. Not sure if i done it wrong, but i doubt i did. To be sure, can anyone help me?
10-10-2013 10:35 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,750 Yesterday 03:59 AM
Last Post: smash
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 12 6,353 09-05-2016 10:18 PM
Last Post: Petrmix
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,123 09-05-2016 02:37 AM
Last Post: noah
  [1.8x] [How] MyBB Reputation Gabbar 0 413 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 7,880 07-07-2015 09:18 AM
Last Post: Unr34lity
Star [1.8x] MyBB jQuery User Dropdown Menu with Font Icons and jQuery envira 0 1,098 07-07-2015 12:29 AM
Last Post: envira
Thumbs Up Make A Nice Breadcrumb Navigation for your site myskins 24 10,817 12-16-2014 01:28 PM
Last Post: rida.rwp
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,267 09-06-2014 07:42 PM
Last Post: Yorne
Smile Tutorial to make 4 column footer for MyBB envira 9 4,976 07-20-2014 06:43 PM
Last Post: VetFalco
Heart css3 hover effects a tutorial myskins 10 3,918 02-14-2014 04:18 AM
Last Post: Elvenpath

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.