MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Adding a Tabbed Member Profile Page for MyBB
Full Version: Adding a Tabbed Member Profile Page for MyBB
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4

Bala

2013-10-06, 07:14 AM
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:-
[attachment=30281]
A live demo available at www.tweakbytes.com ie my site.
GUIDE UPDATED.

Azzaa

2013-10-06, 09:13 AM
Really great tutorial. This is just what I wanted. However, I got into a problem. The tabs system doesn't work as it should. My memberprofile displays everything in the same tab, and when I click other tab.. it just goes to lower to page.. Works like <a href=#>. So I want to hide everything into each tab, not to show everything in the same tab and just have a quick-link. How can I do this?

.m.

2013-10-06, 09:20 AM
^ if your forum does not use jQuery script then you have to add its loading code in headerinclude template 

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Azzaa

2013-10-06, 09:25 AM
(2013-10-06, 09:20 AM).m. Wrote: [ -> ]^ if your forum does not use jQuery script then you have to add its loading code in headerinclude template 

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

It still doesn't work. This is what I have in my headerinclude:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{$stylesheets}<script type="text/javascript">
function selectCode(a)
{
   var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
   if (window.getSelection)
   {
      var s = window.getSelection();
       if (s.setBaseAndExtent)
      {
         s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      else
      {
         var r = document.createRange();
         r.selectNodeContents(e);
         s.removeAllRanges();
         s.addRange(r);
      }
   }
   else if (document.getSelection)
   {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
   }
   else if (document.selection)
   {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
   }
}
</script>
<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tabcontent.js">
/***********************************************
* Tab Content script v2.2- copyright Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
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>

.m.

2013-10-06, 09:50 AM
^ add </script><script type="text/javascript"> before jQuery.noConflict();

Azzaa

2013-10-06, 10:55 AM
New problem.. When I edited my tabs (I didn't touch divs) my contact tab went to my first tab, leaving nothing to contact tab.. eventhough everything is in the contact tab.

<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="10%" valign="top">
<table border="0" cellspacing="0" cellpadding="10" width="100%">
<tr width="10%">
<td class="trow1" width="100%">
{$avatar}
<table width="140%" height="300" 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 />
<strong>{$lang->registration_date}</strong> {$memregdate}<br /><br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br /><br />
<strong>{$lang->local_time}</strong> {$localtime}<br /><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">Info</font></a></li>
        <li><a href="#tab2"><font color="white">Contact</font></a></li>
        <li><a href="#tab3"><font color="white">More</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">
<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}
{$showrefer}
{$myawards}
{$warning_level}
{$newpoints_profile}
{$tyl_memprofile}
</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="trow2"><strong>Skype ID:</strong></td>
<td class="trow2">{$memprofile['skype']}</td>
</tr>
</td>
</tr>
</table>
</div>


<div id="tab3" class="tab_content">
{$additionalgroups}
{$signature}
</td>
</tr>
</table>
</div>


<div id="tab4" class="tab_content">
{$modoptions}
{$adminoptions}
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
{$footer}
</body>
</html>

.m.

2013-10-06, 11:09 AM
^ can you submit your member profile page to the html validator and check
or give forum url and test user account and wait for someone to check

Azzaa

2013-10-06, 11:35 AM
(2013-10-06, 11:09 AM).m. Wrote: [ -> ]^ can you submit your member profile page to the html validator and check
or give forum url and test user account and wait for someone to check

Never heard of html validator.. I tested it out but I couldn't fix this.

I made a new test account for someone who could help me out with this:

Forum link
Username: Esty
Password: test331

Bala

2013-10-06, 11:50 AM
Dont play with it if you do not know HTML. It will get messy. Sorry forgot to mention you need to load Jquery from google's servers.

Your site seems to be down Azzaa

Azzaa

2013-10-06, 12:04 PM
(2013-10-06, 11:50 AM)Bala Wrote: [ -> ]Dont play with it if you do not know HTML. It will get messy. Sorry forgot to mention you need to load Jquery from google's servers.

I do know HTML. Not alot much enough.. I can't find a logic to this cus the divs are correctly there.. Problem is not with the HTML.
What you mean load Jguery from google's servers? Why wasn't this necessary before?
Pages: 1 2 3 4
MyBB Community Forums > Resources > Tutorials > Adding a Tabbed Member Profile Page for MyBB