+- MyBB Source (http://mybbsource.com)
+-- Forum: Customization (/forum-9.html)
+--- Forum: Tutorials (/forum-40.html)
+--- Thread: Professional Profile's Outlook (/thread-4202.html)
Professional Profile's Outlook - help-14 - 07-17-2010 04:26 PM
Screenshot:
![[Image: 1-1.png]](http://i177.photobucket.com/albums/w222/pokemonfan14/1-1.png)
Demo Online: http://mybbvn.com/forum/member.php?action=profile&uid=14
- Step 1:
First, download và install Profile Comments: http://mods.mybb.com/view/profile-comments - Step 2:
Download file attach, upload to your forum root. - Step 3:
Install Profile Buddies and Profile View Counter. - Step 4:
Go to ACP => Templates & Style => Templates => Your Skin => Member Templates. - Step 5:
Open member_profile and replace all with:
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: 0px;
border: 0px solid #778;
color: #ffffff;
background: #026CB1 url(http://mybbvn.com/forum/mybbvn2/images/tcat.jpg) top left repeat-x;
-moz-border-radius: 5px 5px 0px 0px;
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 */
background: #026CB1;
position: relative;
top: 1px;
color: #fff;
}
.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 container*/
border: 0px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.clicktab {
cursor: pointer;
}
</style>
<script type="text/javascript" src="tabcontent.js"></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="tborder" style="width: 100%; height: 100%; padding: 4px;" align="center">
<span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->local_time}</strong> {$localtime}<br /><br />
<strong>{$lang->postbit_status}</strong> {$online_status}<br />
</span>
</div>
<br />
<ul id="profiletabs" class="shadetabs">
<li><a rel="tab0" class="clicktab">User Comments</a></li>
<li><a rel="tab1" class="clicktab">About Me</a></li>
<li><a rel="tab2" class="clicktab">Statistics</a></li>
<li><a rel="tab3" class="clicktab">Contact</a></li>
</ul>
<div id="tab0" class="tabcontent">
{$comments_index}
</div>
<div id="tab1" class="tabcontent">
{$profilefields}
{$signature}
</div>
</div>
<div id="tab2" class="tabcontent">
<div style="background: #026CB1; width: 100%; height: 15px; padding: 4px; border: 1px #0F5C8E solid;"></div>
<div class="trow1" style="width: 100%; padding: 4px; valign: top; border: 1px #0F5C8E solid;">
<font color="gray"><strong>{$lang->joined}</strong></font> {$memregdate}
<br />
<br />
<font color="gray"><strong>{$lang->lastvisit}:</strong></font> {$memlastvisitdate} {$memlastvisittime}
<br />
<br />
<font color="gray"><strong>{$lang->total_posts}</strong></font> {$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>
<br />
<br />
<font color="gray"><strong>{$lang->timeonline}</strong></font> {$timeonline}
<br />
<br />
<font color="gray"><strong>{$lang->reputation}</strong></font> <a href="reputation.php?uid={$memprofile['uid']}">{$lang->reputation_details}</a> {$vote_link}
<br />
</div>
</div>
<div id="tab3" class="tabcontent">
<div style="background: #026CB1; width: 100%; height: 15px; padding: 4px; border: 1px #0F5C8E solid;"></div>
<div class="trow1" style="width: 100%; padding: 4px; border: 1px #0F5C8E solid;">
<font color="gray"><strong>{$lang->homepage}</strong></font> {$website}
<br />
<br />
<font color="gray"><strong>{$lang->email}</strong></font> <a href="member.php?action=emailuser&uid={$memprofile['uid']}">{$lang->send_user_email}</a>
<br />
<br />
<font color="gray"><strong>{$lang->pm}</strong></font> <a href="private.php?action=send&uid={$memprofile['uid']}">{$lang->send_pm}</a>
<br />
<br />
<font color="gray"><strong>{$lang->icq_number}</strong></font> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&imtype=icq&uid={$uid}', 'imcenter', 450, 300);">{$memprofile['icq']}</a>
<br />
<br />
<font color="gray"><strong>{$lang->aim_screenname}</strong></font> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&imtype=aim&uid={$uid}', 'imcenter', 450, 300);">{$memprofile['aim']}</a>
<br />
<br />
<font color="gray"><strong>{$lang->yahoo_id}</strong></font> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&imtype=yahoo&uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a>
<br />
<br />
<font color="gray"><strong>{$lang->msn}</strong></font> <a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&imtype=msn&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="valign: middle; text-align: center;">
{$avatar}
</td>
</tr>
<tr>
<td style="font: 12px Arial;">
<strong>Date Of Birth: </strong> {$membday}
<br />
<strong>Join Date:</strong> {$memregdate}
<br />
<strong>Posts:</strong> {$memprofile['postnum']}
<br />
<strong>Visited:</strong> {$profview}
</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%;">
{$buddylist}
</div>
</td>
</tr>
</table>
{$modoptions}
</body>
</html>
{$footer}
</body>
</html> - Step 6:
Open member_profile_customfields and replace all with:
Code:
<div style="background: #026CB1; width: 100%; height: 15px; padding: 4px; border: 1px #0F5C8E solid;"></div>
<div class="trow1" style="width: 100%; padding: 4px; border: 1px #0F5C8E solid;">
<strong>About {$memprofile['username']}</strong>
<br />
<br />
<div style="padding: 0px 0px 0px 20px;">
{$customfields}
</div>
<br /> - Step 7:
Open member_profile_customfields_fields and replace all with:
Code:
<font color="gray"><strong>{$customfield['name']}:</strong></font>
<br />
{$customfieldval}
<br />
<br /> - Step 8:
Open member_profile_signature and replace all with:
Code:
<strong>Signature</strong><br /><br />
<div style="padding: 0px 0px 0px 20px;">
{$memprofile['signature']}
</div> - Step 9:
Go to ACP => Templates & Style => Templates => Global Templates. - Step 10:
Open profile_comments and replace all with:
Code:
{$comments_form_edit}
<div class="expcolimage">
<img src="{$theme['imgdir']}/{$hide_image}" id="comments_img" class="expander" alt="{$hide_text}" title="{$hide_text}" />
</div>
<div style="background: #026CB1; width: 100%; height: 15px; padding: 4px; border: 1px #0F5C8E solid;"></div>
<div class="trow1" style="width: 100%; padding: 4px; valign: top; border: 1px #0F5C8E solid;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tbody style="{$hidecomments}" id="comments_e">
{$comments_form}
{$comments}
</tbody>
</table>
{$pagination}</div> - Step 11:
Open profile_comments_form, find:
Replace with:Code:
<textarea name="message" id="message" rows="6" cols="60" tabindex="2"></textarea>
Code:
<textarea name="message" id="message" rows="10" cols="70" tabindex="2"></textarea> - Step 12:
Open profile_comments_list and replace all with:
Code:
<tr id="comment-{$id}" valign="top">
<td class="{$style}" style="text-align: center; vertical-align: top;">
<img style="width: 90px;" src="{$avatar}" alt="{$username_plain} " />
</td>
<td class="{$style}" width="100%" style="border: 1px dashed #FF9900;">
<span class="smalltext" style="float: right;">
{$reply} {$edit} {$delete}
</span>
{$username}
<div class="{$style}" style="margin-top: 6px;">
{$text}
</div>
</td>
</tr>
RE: Professional Profile's Outlook - Don+ - 08-21-2010 10:11 AM
wow, deparately needed this kind of thing
RE: Professional Profile's Outlook - LiNUX - 12-21-2010 04:08 AM
nice tutorial thanks..
RE: Professional Profile's Outlook - zZJoennZz - 12-30-2010 10:32 PM
Help-14 from PokeCommunity? BTW I see some images, and it's from MyBBvN :(
RE: Professional Profile's Outlook - NNT_ - 12-31-2010 09:54 PM
We're come from Vietnam ! And we're good in coding
RE: Professional Profile's Outlook - darkness - 01-06-2011 10:06 PM
looks fine
thanks
RE: Professional Profile's Outlook - b0r1swh - 01-10-2011 12:15 AM
really cool!
RE: Professional Profile's Outlook - RickyTheBest - 01-11-2011 05:40 AM
thanks!
RE: Professional Profile's Outlook - Mazi1577 - 01-17-2011 06:59 AM
Good job! Thanks!
RE: Professional Profile's Outlook - Manutdfans7 - 01-22-2011 02:05 AM
Does this works on v1.6?