MyBB Source

euantor · 12-16-2009 06:05 AM

I've just started re-coding the MyBB member_profile template in an effort to get it looking a little nicer. So far, I have scrapped all the tables and gone for a div based design and I have implemented a sidebar. I am hoping to add tabs and generally make the profile template a little, well, nicer.

The major downside is that plugins won't readily work with my edited profile template, but I'm still going to release it to the public upon completion.

If anyone has any ideas of what they'd like to see added, please tell me ^^

Anyway, here's a screenshot of the improved profile layout:

http://i48.tinypic.com/zkid1h.png

Instructions

This whole look is achieved via a set of template edits. There is no one plugin that will do this all for you, so you'd better have at least 5 minutes of time on your hand. The process is relatively simple though and I'll be here to help every step of the way.

Step #1

Download the below zip file and upload the file(s) in it to the root of your MyBB diretory. Without these files, the tabbed profile feature will not work.

http://www.360elites.net/mybbprofiles.zip

Step #2

Open up your Member Templates-> member_profile template. Select everything in this template and replace it with the below code:

Code:

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

<style type="text/css">

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{

padding: 3px 0;

margin-left: 0;

margin-top: 1px;

margin-bottom: 0;

font: bold 13px Arial;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.shadetabs li{

display: inline;

margin: 0;

}

.shadetabs li a{

text-decoration: none;

position: relative;

z-index: 1;

padding: 3px 7px;

margin-right: 3px;

border: 0px solid #778;

color: #ffffff;

background: white url({$mybb->settings['bburl']}/{$theme['imgdir']}/thead_bg.gif) top left repeat-x;

cursor: pointer;

}

.shadetabs li a:visited{

color: #ffffff;

}

.shadetabs li a:hover{

text-decoration: underline;

color: #ffffff;

}

.shadetabs li a.selected{ /*selected main tab style */

position: relative;

top: 1px;

}

.shadetabs li a.selected{ /*selected main tab style */

background-image: url({$mybb->settings['bburl']}/{$theme['imgdir']}/thead_bg.gif);

border-bottom-color: white;

}

.shadetabs li a.selected:hover{ /*selected main tab style */

text-decoration: none;

}

.tabcontent{

display:none;

}

@media print {

.tabcontent {

display:block !important;

}

}

.tabcontentstyle{ /*style of tab content oontainer*/

border: 0px solid gray;

width: 450px;

margin-bottom: 1em;

padding: 10px;

}

.clicktab {

cursor: pointer;

}

</style>

<script type="text/javascript" src="tabcontent.js">

/***********************************************

* Tab Content script v2.2- © 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>

</head>

<body>

{$header}

<br />

<table width="100%" cellspacing="0" cellpadding="4" border="0" align="center">

<tr>

<td style="width: 80%;" valign="top">

<div class="trow2" style="width: 100%; height: 100%; padding: 4px;">

<span class="largetext"><strong>{$formattedname}</strong></span><br />

<span class="smalltext">

({$usertitle})<br />

{$groupimage}

{$userstars}<br />

<br />

<strong>{$lang->local_time}</strong> {$localtime}<br />

<strong>{$lang->postbit_status}</strong> {$online_status}

</span>

</div>

<br />

<ul id="profiletabs" class="shadetabs">

<li><a rel="tab0" class="clicktab">About Me</a></li>

<li><a rel="tab1" class="clicktab">Statistics</a></li>

<li><a rel="tab2" class="clicktab">Contact</a></li>

</ul>

<div id="tab0" class="tabcontent">

{$profilefields}

{$signature}

</div>

</div>

<div id="tab1" class="tabcontent">

<div class="thead" style="width: 100%; height: 26px; padding: 4px; border: 1px #0F5C8E solid;"><strong>Statistics</strong></div>

<div class="trow1" style="width: 100%; padding: 4px; valign: middle; border: 1px #0F5C8E solid;">

<strong>{$lang->joined}</strong> {$memregdate}

<br />

<strong>{$lang->lastvisit}</strong> {$memlastvisitdate} {$memlastvisittime}

<br />

<strong>{$lang->total_posts}</strong> {$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>

<br />

<strong>{$lang->timeonline}</strong> {$timeonline}

<br />

<strong>{$lang->reputation}</strong> <a href="reputation.php?uid={$memprofile['uid']}">{$lang->reputation_details}</a> {$vote_link}

<br />

</div>

</div>

<div id="tab2" class="tabcontent">

<div class="thead" style="width: 100%; height: 26px; padding: 4px; valign: middle; border: 1px #0F5C8E solid;"><strong>Contact</strong></div>

<div class="trow1" style="width: 100%; padding: 4px; border: 1px #0F5C8E solid;">

<strong>{$lang->homepage}</strong> {$website}

<br />

<strong>{$lang->email}</strong> <a href="member.php?action=emailuser&amp;uid={$memprofile['uid']}">{$lang->send_user_email}</a>

<br />

<strong>{$lang->pm}</strong> <a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a>

<br />

<strong>{$lang->icq_number}</strong> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=icq&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['icq']}</a>

<br />

<strong>{$lang->aim_screenname}</strong> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=aim&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a>

<br />

<strong>{$lang->yahoo_id}</strong> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a>

<br />

<strong>{$lang->msn}</strong> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a>

<br />

</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("profiletabs")

countries.setpersist(true)

countries.setselectedClassTarget("link") //"link" or "linkparent"

countries.init()

</script>

<br />

</td>

<td>

</td>

<td style="width: 20%;" valign= "top">

<div class="thead" style="width: 100%; height: 26px; padding: 4px; valign: middle; text-align: right; border: 1px #0F5C8E solid;"><strong>Mini Stats</strong></div>

<div class="trow1" style="width: 100%; padding: 4px; valign: top; text-align: left; border: 1px #0F5C8E solid; height: 100%;">

<table width="100%" border="0">

<tr>

<td style="font: 12px Arial;">

<strong>Date Of Birth: </strong> {$membday}

<br />

<strong>Join Date:</strong> {$memregdate}

<br />

<strong>Posts:</strong> {$memprofile['postnum']}

</td>

<td style="valign: middle; text-align: right;">

{$avatar}

</td>

</tr>

</table>

</div>

<br />

<div class="thead" style="width: 100%; height: 26px; padding: 4px; valign: middle; text-align: right; border: 1px #0F5C8E solid;"><strong>Buddies</strong></div>

<div class="trow1" style="width: 100%; padding: 4px; valign: top; text-align: left; border: 1px #0F5C8E solid; height: 100%;">

If you had the buddies system installed, you could place it here in this sidebar ;)

</div>

</td>

</tr>

</table>

{$modoptions}

</body>

</html>

{$footer}

</body>

</html>

That's the main profile template sorted, now to edit a few other little ones.

Step #3

Open the member_profile_customfields template and replace everything within with the following:

Code:

<div class="thead" style="width: 100%; height: 26px; padding: 4px; valign: middle; border: 1px #0F5C8E solid;"><strong>About Me</strong></div>

<div class="trow1" style="width: 100%; padding: 4px; border: 1px #0F5C8E solid;">

{$customfields}

<br />

<br />

Step #4

Open the member_profile_customfields_field template and replace everything with the below code:

Code:

<strong>{$customfield['name']}:</strong> {$customfieldval}

<br />

Step #5

Open the member_profile_signature template and replace everything with the below code:

Code:

<strong>Signature</strong>

<br />

<br />

&nbsp; &nbsp;{$memprofile['signature']}

There you go, that should be you done. I may be making periodic updates to these templates, so keep your eyes peeled...

euantor · 12-16-2009 10:49 PM

Done a little more work and there are now tabs:

http://i46.tinypic.com/2uiww3r.png

YAY! It's coming along pretty well so far. Still got a few little bits to sort out though. Should have the code publicly available some point tonight ^^

***Alexandru21*** · 12-16-2009 10:59 PM

Wow... It looks pretty good.

euantor · 12-17-2009 02:13 AM

Cheers ;D Just about complete. Need to tidy up now and edit everything I've commented out haha

euantor · 12-17-2009 03:22 AM

I think I'm now complete. Everything that I had commented out has been re-added. Here is a screenshot:

http://i48.tinypic.com/zkid1h.png

and, of course, there's a full demo available at http://www.360elites.net/mybbthemes - just select the Default+ template and navigate to a profile to see the new template in all it's updated, tabular glory!

I will be adding instructions to the first post ASAP

mastermunj · 12-17-2009 04:10 AM

pretty good initiative. I'm sure over period of time, this changes can make a better profile page and may get included in one of future MyBB version if liked by most members and creators of MyBB

euantor · 12-17-2009 04:21 AM

Thanks ;D I highly doubt it will become official though This is just a simple set of edits Thanks a lot though =D

I'm going to add instructions for setting up the new profile layout to the first post. I believe I'm done, so it's time ^^

ESB · 12-17-2009 09:55 PM

This is actually really cool, and I have it working on my forum. Thanks for it!

I'm just wondering if there is any way to make the user's posts and threads display in their profile? If it were possible, it would be amazing. If not, don't worry.

Thanks again for it. I was getting sick of the old design.

euantor · 12-18-2009 12:58 AM

Not sure about showing posts and threads, but I'll look into it for you Glad you're liking it ^^

jeyci · 12-18-2009 01:38 AM

Wow Cool, bookmarked.

Threaded Mode \| Linear Mode euantor's ultimate profile re-design
Author	Message