MyBB Community Forums
Adding a Tabbed Member Profile Page for MyBB - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Adding a Tabbed Member Profile Page for MyBB (/thread-146284.html)

Pages: 1 2 3 4


Adding a Tabbed Member Profile Page for MyBB - Bala - 2013-10-06

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.


RE: Adding a Tabbed Member Profile Page for MyBB - Azzaa - 2013-10-06

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?


RE: Adding a Tabbed Member Profile Page for MyBB - .m. - 2013-10-06

^ 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>



RE: Adding a Tabbed Member Profile Page for MyBB - Azzaa - 2013-10-06

(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>



RE: Adding a Tabbed Member Profile Page for MyBB - .m. - 2013-10-06

^ add </script><script type="text/javascript"> before jQuery.noConflict();


RE: Adding a Tabbed Member Profile Page for MyBB - Azzaa - 2013-10-06

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>



RE: Adding a Tabbed Member Profile Page for MyBB - .m. - 2013-10-06

^ 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


RE: Adding a Tabbed Member Profile Page for MyBB - Azzaa - 2013-10-06

(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


RE: Adding a Tabbed Member Profile Page for MyBB - Bala - 2013-10-06

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


RE: Adding a Tabbed Member Profile Page for MyBB - Azzaa - 2013-10-06

(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?