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,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
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,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
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,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
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
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 42 7,697 11-29-2016 08:50 PM
Last Post: DmitriyCauct
Heart Enhanced Social Share buttons Tutorial without plugins envira 15 8,550 11-03-2016 09:28 AM
Last Post: shamzblueworld
Information Add Social Links to Your MyBB Forum envira 5 3,989 10-25-2016 01:08 AM
Last Post: Chub
  [1.8x] [How] MyBB Reputation Gabbar 0 463 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 8,215 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,253 07-07-2015 12:29 AM
Last Post: envira
Thumbs Up Make A Nice Breadcrumb Navigation for your site myskins 24 11,186 12-16-2014 01:28 PM
Last Post: rida.rwp
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,384 09-06-2014 07:42 PM
Last Post: Yorne
  Forum Hover Effect on MyBB Index Page envira 8 4,559 08-17-2014 11:59 PM
Last Post: !!!a
Smile Multiple Colored Category Headings/ Thead MyBB envira 9 4,518 07-20-2014 06:47 PM
Last Post: VetFalco

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.