Adding a Tabbed Member Profile Page for MyBB
#1
This user has been denied support. This user has been denied support.
Please note that the main part of the guide and the most important aka the Javascript has been made by Envira Phani. So all credits and thanks to him.

Rest of the customized HTML and CSS is made by me to give a professional look and feel to it.

Once again big thanks to Dr. Envira Phani.

So lets start.

Go to adminCP-> Templates and Style->Templates->Your theme->Ungrouped Templates->Header Include Templates.

If you have not included jquery libraries please include it. Post it at the begining of the headerinclude templates:-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
Add the following code to the end of it.
<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>

Now go back to your theme's templates and find Member Templates->Member Profile
REPLACE ALL THE CODE WITH THE FOLLOWING CODE:-
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="0" cellpadding="10" width="100%">
<tr width="100%">
<th class="memprof" width="20%" border="0" cellspacing="0" cellpading="10">
<span class="memtext"><strong>{$formattedname}</strong></span>
</th>
<th class="memprof" width="150%" border="0" cellspacing="0" cellpading="10">
<span class="memtext" style="float:right;"><strong><font color="white">{$online_status}</font></strong></span>
</th>
</tr>
<tr width="100%">
<td width="20%" valign="top">
<table border="0" cellspacing="0" cellpadding="10" width="40%">
<tr width="100%">
<td class="trow1" width="40%">
{$avatar}
<table width="40%" 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"></td></tr></table>
</td>
</tr>
{$awaybit}
</table>
</td>
<td width="150%" valign="top">
<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"><font color="white">About</font></a></li>
        <li><a href="#tab2"><font color="white">Contact</font></a></li>
        <li><a href="#tab3"><font color="white">Activity</font></a></li>
<li><a href="#tab4"><font color="white">Moderation</font></a></li>
    </ul>
<br /> 
<div class="tab_container">
<div id="tab1" class="tab_content">
{$profilefields}
{$signature}
{$buddy_options}
</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 id="tab4" class="tab_content">
{$modoptions}
{$adminoptions}
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
{$footer}
</body>
</html>

Now go to Templates and style->Themes->Your theme->Global.css->Edit in Advanced Mode

Add to the end of the global.css the following:-
.tabs{
background: #41403B;
margin: 0px;
padding: 0px;
margin-top: 10px;
list-style: none;
}
.tabs li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}

.tabs li.current{
background: #fff;
color: #222;
}

.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.memprof
{
background: #4774a1; /*For old browsers*/
color: #fff;
}
.memtext
{
font-size: 16px;
font-weight: bold;
color: #fff;
}
.memprof a:link
{color: #fff;
}
.memprof a:visited
{
color: #fff;
}
You should get a member profile of this sort:-
   
A live demo available at www.tweakbytes.com ie my site.
GUIDE UPDATED.
Reply


Messages In This Thread
Adding a Tabbed Member Profile Page for MyBB - by Bala - 2013-10-06, 07:14 AM
RE: Adding a Tabbed Member Profile Page for MyBB - by MikeInToshx - 2016-11-13, 09:40 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)