REGISTER or LOGIN to have the annoying ads removed.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Ultimate profile template(s)
#1
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">
.shadetabs{
padding: 3px 0
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Arial;
list-style-type: none;
text-align: left;
}

.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: url(images/thead_bg.gif);
cursor: pointer;
}

.shadetabs li a:visited{
color: #ffffff;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #ffffff;
}

.shadetabs li a.selected{
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background: url(images/thead_bg.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {

.tabcontent {
display:block !important;
}

}

.tabcontentstyle{
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" style="margin-left: 50px;"">
<!-- Start Tabs -->
<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>
<!-- Ed Tabs -->
</ul>

<!-- Start First Tab -->
<div id="tab0" class="tabcontent">
{$profilefields}
{$signature}
</div>
</div>

<!-- Start Second Tab -->
<div id="tab1" class="tabcontent">
<div class="thead" style="width: 100%; height: 26px; padding: 4px;"><strong>Statistics</strong></div>
<div class="trow1" style="width: 100%; padding: 4px; valign: middle;">
<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>

<!-- Start Third Tab -->
<div id="tab2" class="tabcontent">
<div class="thead" style="width: 100%; height: 26px; padding: 4px; valign: middle;"><strong>Contact</strong></div>
<div class="trow1" style="width: 100%; padding: 4px;">
<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: 240px;" valign= "top">

<div class="thead" style="width: 100%; height: 26px; padding: 4px;
valign: middle; text-align: right;"><strong>Mini Stats</strong></div>
<div class="trow1" style="width: 100%; padding: 4px; valign: top;
text-align: left; 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 />
<!-- Start Sidebar -->

<!-- End Sidebar -->
</td>
</tr>
</table>
{$modoptions}
</body>
{$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 will be making periodic updates to these templates, so keep your eyes peeled...
#2
This is very awesome indeed. Much kudos to you. Onyx Will certianly be using this for the Home site. Just wow Big Grin
[Image: tyler-allen.png]
#3
No problem Wink Just keep in mind that plugins for member profiles may not work without a little bit of work Wink
#4
I will make some plugins made for your mod here. Do you mind if i do this?
[Image: tyler-allen.png]
#5
Feel free =D Might make the whole thing seem more lucrative xP
#6
We might need your help...since this is quite new...this is really cool. If i could +rep i would.
[Image: tyler-allen.png]
#7
No problem Wink I made it to be pretty simple to code for ;P no problem about rep mate ^^ Just hope I can help the community.
#8
If this becomes a popular mod, this will change orginization in the mybb community like labroccas Tabbed menu did. y'all are amazing.
[Image: tyler-allen.png]
#9
Haha. I doubt it will do that well, but cheers once again ^^
#10
It`s not working for me the tab`s is showing nothing when I click on About Me,Statistics or Contact.
In IE8.0 it gives a jscript error when I revert the template member_profile to the orginal one the jsscript error is gone.at the bottom there is also a ? look here and you see my profile http://www.satbox4all.nl/demo/member.php...file&uid=1 use the Quick theme and use default theme.
and i did upload the tabcontent.js to the root.
[Image: mybbsig.php]



Possibly Related Threads...
Thread Author Replies Views Last Post
  [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! euantor 11 16,000 Sep 11, 2010, 12:56 PM
Last Post: euantor
Toungue [TEMPLATE] CopyRight 88power88 4 5,675 Sep 01, 2010, 04:23 AM
Last Post: 88power88
  Ultimate Green Damion 2 5,298 Jul 28, 2010, 05:00 PM
Last Post: Damion
  need a template help[urgent] phantom_277 1 1,918 Jul 12, 2010, 11:34 AM
Last Post: Elite Dash
  Template help please {May pay} IceGuru 2 2,417 Jul 10, 2010, 06:48 AM
Last Post: IceGuru

Forum Jump:


Users browsing this thread: 1 Guest(s)