Như các bạn biết, hiện tại Mybbvn đang có 1 profile page trông rất là pro (theo mình là như vậy
).
Vậy cho nên, theo chủ nghĩa của forum là cộng đồng chia sẻ, nên mình viết bài này để hướng dẫn các bạn cách làm trang profile như của Mybbvn. Chúng ta bắt đầu thôi.
P/S: Yêu cầu các bạn làm theo thứ tự để tránh xảy ra sự cố ngoài ý muốn.
Demo Online: http://mybbvn.com/forum/member.php?actio...ile&uid=14
- Bước 1:
Trước hết, các bạn download và install cái mod Profile Comments này:
Code:
http://mybbvn.com/forum/thread-696.mybbvn
- Bước 2:
Các bạn download file attach bên dưới, giải nén ra, rồi up load tất cả những gì có trong folder UPLOAD bên trong đó lên forum root của bạn.
- Bước 3:
Các bạn vào ACP để install 2 plugin vừa upload ở bước 2 là Profile Buddies và Profile View Counter. Rồi sau đó các bạn có thể tùy chỉnh setting theo ý muốn.
- Bước 4:
Bây giờ đến phần templates. Các bạn vào ACP => Templates & Style => Templates => chọn skin bạn muốn sửa => Member Templates.
- Bước 5:
Các bạn mở template member_profile và thay thế tất cả thành đoạn sau:
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>
Lưu ý: Ở phần này các bạn có thể thay đổi background của tab cho hợp với forum của bạn
- Bước 6:
Các bạn mở template member_profile_customfields và thay thế tất cả thành đoạn sau:
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 />
- Bước 7:
Các bạn mở template member_profile_customfields_fields và thay thế tất cả thành đoạn sau:
Code:
<font color="gray"><strong>{$customfield['name']}:</strong></font>
<br />
{$customfieldval}
<br />
<br />
- Bước 8:
Và theo mình nhớ không lầm thì đây sẽ là bước cuối cùng. Các bạn mở template member_profile_signature và thay thế tất cả thành đoạn sau:
Code:
<strong>Signature</strong><br /><br />
<div style="padding: 0px 0px 0px 20px;">
{$memprofile['signature']}
</div>
- Bước 9:
Bây giờ đến phần templates. Các bạn vào ACP => Templates & Style => Templates => Global Templates.
- Bước 10:
Các bạn mở template profile_comments và thay thế tất cả thành đoạn sau:
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>
- Bước 11:
Các bạn mở template profile_comments_form, tìm:
Code:
<textarea name="message" id="message" rows="6" cols="60" tabindex="2"></textarea>
và thay thế thành:
Code:
<textarea name="message" id="message" rows="10" cols="70" tabindex="2"></textarea>
- Bước 12:
Các bạn mở template profile_comments_list và thay thế tất cả thành đoạn sau:
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>
Xong! Bây giờ đã thấy em ấy giống VBB chưa
Search
Member List
Calendar
Help
MyBB | Vietnam | MyBBvn | Mod | Theme | Plugin
»
Mods & Plugins
»
Mybbvn Template Modifications
[Tut] Professional Profile's Outlook
![[Image: rivm92zq0-1.gif]](http://i203.photobucket.com/albums/aa115/banhxequy93/rivm92zq0-1.gif)
![[Image: postbit_thx.gif]](http://mybbvn.com/forum/mybbvn/postbit_thx.gif)
for me if my posts are useful for you !!!![[Image: donation_drive_sig.png]](http://mybboard.net/assets/images/donation_drive_sig.png)
