Mình thấy các diễn đàn, toàn hướng dẫn đóng khung thông tin thành viên (profile) nằm dọc postbit_legacy và nằm ngang postbit nhưng cho vbb3. Hôm nay, mình hướng dẫn cho các bạn đóng khung thông tin nằm ngang vbb4 như diễn đàn GiaoVienTrian.Net, mà mình đã mò mẫn làm. Mình phải tổng hợp các cách làm của nhiều diễn đàn và phải edit lại code !!!
* Nếu diễn đàn của bạn chưa chuyển qua nằm ngàng thì làm như sau: admincp - Settings - Options - style & language setting - tại mục: Use Legacy (Vertical) Postbit Template - chọn No.
* DEMO:
* DEMO này có bạn yêu cầu, nên phuonghoangdn edit thử:
1. Vào Admin CP >> Styles & Templates >> Search in Templates >> ở mục Search for Text gõ posbit.css ( nhớ tick vào ô Đồng ý ở mục Tìm trong tựa đề >> Find >> click vào postbit.css >> Dán code sau vào cuối cùng:
pro5_gvtrian
{
font-size:12px;
margin-top:4px;
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #FFFFFF;
float:center;
vertical-align:bottom;
border:1px dotted #FFA500;
width: auto;
}
width: auto;
}
* Chỗ màu đỏ sẽ cho kiểu khung chấm mờ như GiaoVienTrian.Net, nếu bạn muốn đóng khung kiểu gạch gạch thì thay dotted bằng dashed & solid cho kiểu đường thẳng nha !
2. Giờ tiến hành đóng khung từng phần 1 nha. Hơi mất công đó nha!!!
* Phần lớn là:Admin CP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh , edit templates >> Postbit templates>> Postbit>> chủ yếu là Tìm các đoạn code tương ứng và thêm thẻ: <div class="pro5_gvtrian">...........</div>
a. User name (Tên đăng nhập):
<vb:if condition="$post['userid']"><div class="pro5_gvtrian">{vb:raw memberaction_dropdown} {vb:raw post.onlinestatus} </div>
b. User title (danh hiệu):
<div class="pro5_gvtrian"><span class="usertitle"> {vb:raw post.usertitle} </span></div>
c. User rank (cấp bậc):
<vb:if condition="$post['rank']"><div class="pro5_gvtrian"> <span class="rank">{vb:raw post.rank}</span> </div>
d. Last online (online lần cuối): (nếu có)
<vb:if condition="$post['lastactivity']"><div class="pro5_gvtrian"> {vb:rawphrase last_online_activity}: {vb:raw post.lastactivity_date}: {vb:raw post.lastactivity_time} </div>
e. Rep power:
<div class="pro5_gvtrian"> {vb:rawphrase reppower}: {vb:raw post.reppower} </div>
f. Reputation:
<vb:if condition="$show['reputation']"><div class="pro5_gvtrian"> <span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reputationdisplay}</span> </div> </vb:if>
g. Join date (ngày tham gia):
<vb:if condition="$post['joindate']"><div class="pro5_gvtrian"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd> </div> </vb:if>
h. Thứ tự thành viên (nếu có):
<vb:if condition="$post['userid']"><div class="pro5_gvtrian"><dt>Thành viên thứ</dt> <dd>{vb:raw post.userid}</dd> </div> </vb:if>
i. Địa chỉ:
<vb:if condition="$post['field2']"><div class="pro5_gvtrian"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></div></vb:if>
* Phần nghề nghiệp, sở thích, tên thật... làm tương tự. j. Bài viết:
<div class="pro5_gvtrian"><dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</div></dd>
k. Vi phạm (infraction):
<vb:if condition="$show['infraction']"><div class="pro5_gvtrian"> <dt>{vb:rawphrase infractions}</dt> <dd>{vb:raw post.warnings}/{vb:raw post.infractions} ({vb:raw post.ipoints})</dd> </div> </vb:if>
* Các chi tiết còn lại không nằm trong postbit. Mà ở các template tương ứng.
l. Level (ở đây mình sd mrkim level): nếu bạn sd mod level thì mình sẽ hd luôn !!!
* Vào styles & templates >> search: mrkm_level
<div class="username_container"><div class="pro5_gvtrian"><!-- MOD LEVEL --> <b>Cấp Độ</b>: <span style='font-weight:bold; color:crimson'>{vb:raw showlevel} [{vb:raw galaga}]</span><br/> <span style='font-size:10pt; color:red'><b>Hoạt động</b>: {vb:raw hp} / {vb:raw maxhp} </span><br/> <div style='width:120px;align:center'> <table cellspacing='0' cellpadding='0' width='120' border='0'> <tr> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_left.gif' alt='' /></td> <td width='114' height='13' class='nopad' style='line-height: 13px;background: url(images/rpg/img_backing.gif) repeat-x top left;'><img src='images/rpg/orange.gif' width="{vb:raw hpf}%" height='9' alt='' /><img src='images/rpg/hp.gif' height='9' alt='' /></td> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_right.gif' alt='' /></td> </tr> </table> </div> <span style='font-size:10pt; color:red'><b>Điểm</b>: {vb:raw mp} / {vb:raw maxmp}</span><br /> <div style='width:120px;align:center'> <table cellspacing='0' cellpadding='0' width='120' border='0'> <tr> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_left.gif' alt='' /></td> <td width='114' height='13' class='nopad' style='line-height: 13px;background: url(images/rpg/img_backing.gif) repeat-x top left;'><img src='images/rpg/green.gif' width="{vb:raw mpf}%" height='9' alt='' /><img src='images/rpg/mp.gif' height='9' alt='' /></td> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_right.gif' alt='' /></td> </tr> </table> </div> <span style='font-size:10pt; color:red'><b>Kinh nghiệm</b>: {vb:raw ep}% </span><br /> <div style='width:120px;align:center'> <table cellspacing='0' cellpadding='0' width='120' border='0'> <tr> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_left.gif' alt='' /></td> <td width='114' height='13' class='nopad' style='line-height: 13px;background: url(images/rpg/img_backing.gif) repeat-x top left;'><img src='images/rpg/blue.gif' width="{vb:raw ep}%" height='9' alt='' /><img src='images/rpg/exp.gif' height='9' alt='' /></td> <td width='3' height='13' class='nopad'><img width='3' height='13' src='images/rpg/img_right.gif' alt='' /></td> </tr> </table> </div> </div> <br/> <!-- /Ket Thuc MOD LEVEL --></div>
m. Số lần thank & số lần được thanked:
* search từ khóa: post_thanks_postbit_info. Xóa hết và thay toàn bộ bằng code sau:
<vb:if condition="$post['userid']"> <div class="pro5_gvtrian"><dt>{vb:rawphrase post_thanks_thanks}</dt> <dd>{vb:raw post.post_thanks_user_amount_formatted}</dd></div> <div class="pro5_gvtrian"><vb:if condition="$post['post_thanks_thanked_times'] == 1"> <dd float: {vb:stylevar left};">{vb:rawphrase post_thanks_time_post}</dd> <vb:elseif condition="$post['post_thanks_thanked_posts'] == 1" /> <dd float: {vb:stylevar left};">{vb:rawphrase post_thanks_times_post, {vb:raw post.post_thanks_thanked_times_formatted}}</dd> <vb:else /> <dd float: {vb:stylevar left};">{vb:rawphrase post_thanks_times_posts, {vb:raw post.post_thanks_thanked_times_formatted}, {vb:raw post.post_thanks_thanked_posts_formatted}}</dd> </vb:if> </div> </vb:if>
* Source: sưu tâm và edit lại code. (Mình thấy rất nhiều website copy - Hãy ghi nguồn khi copy đi nơi khác !!!)
* P/S: Hỗ trợ teamviewer cho bạn nào không làm được!!!
À, quên còn phần blog nữa ! Vào admincp >> styles & templates >> search: blog_postbit_entries_link.
<div class="pro5_gvtrian"><dt>{vb:rawphrase blog_entries}</dt><dd><a href="{vb:link blog, {vb:raw post}, null, 'userid', 'blog_title'}">{vb:raw post.entries}</a></dd></div>
* Lưu ý: phần biểu tượng yahoo, skype... :68:không nên đóng khung vì nếu thành viên nào không điền sẽ bị hiện 1 khung trống nhỏ - nhìn rất xấu !!!
* Nếu diễn đàn của bạn có phần Reputation ở bên phải và Rep power ở bên trái thì hãy chuyển sang cùng 1 bên và để nằm sát nhau cho đẹp mắt và ý nghĩa hơn. Đồng thời chỉnh độ rộng và khoảng cách giữa các khối cho cân đối! Sau đó, bạn vào Tin nhắn xem nó bị xuống hàng không nha! nếu không là cần đối rồi đó !!!
Một lần nữa mình chúc các bạn thành công !!!