This user has been denied support.
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>
<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&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&imtype=icq&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&imtype=aim&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&imtype=yahoo&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&imtype=msn&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&uid={$uid}">{$lang->find_threads}</a> — <a href="search.php?action=finduser&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;
}
A live demo available at www.tweakbytes.com ie my site.
GUIDE UPDATED.
