›
›

Hướng dẫn tự thiết kế forum VBB 4.x - Phần 4: Tạo profile (thông tin cá nhân) và đóng khung thông tin

Download
PHẦN IV : TẠO PROFILE ( THÔNG TIN CÁ NHÂN ) VÀ ĐÓNG  
KHUNG THÔNG TIN .  
Trong một forum thì không thể thiếu thông tin cá nhân của thành viên như tên , tuổi , địa  
chỉ , avatar , ... Nhất là với những bạn đang học ở trường , hay những bạn đã đi học đại học xa , hay  
đã đi làm , ... đều muốn lưu lại tên tuổi của mình để cho bạn bè xa gần đều biết mình là ai ? Làm  
gì ? Ở đâu ? Bài viết dưới đây hướng dẫn bạn tạo thông tin cá nhân và đóng khung nó cho đẹp hơn .  
Phần tạo dáng khung thông tin cá nhân của thành viên có một vai trò quyết định " sắc đẹp " của toàn  
forum .  
1. Hiệu chỉnh khung thông tin nằm ngang hay dọc .  
Vào AdminCP >> Setting >> Options >> Style & Language Setting :  
Tại mục Use Legacy (Vertical) Postbit Template :  
Chọn : Đồng ý/ Yes thì tương ứng với Dọc , temp là : postbit_legacy  
Không / No thì tương ứng với Ngang , temp là : postbit .  
Sau đó nhấn Save .  
Bài viết dưới đây mình chủ yếu tập trung vào thông tin nằm dọc , còn nằm ngang thì tương tự  
( chỉ thay thao tác ở temp postbit_legacy thành thao tác trong temp postbit , còn lại ngang hay  
dọc thì đều giống nhau ) .  
2. Tạo khung .  
Trước khi hack mod thì bạn phải tạo khung trước để dễ dàng làm việc hơn sau này ( nếu bạn dùng  
skin mà bạn tải về trong phần III thì bạn có thể bỏ qua bước này ) , Vào AdminCP >> Styles  
& Templates >> Style Manager :  
Chọn skin cần chỉnh >> Edit templates :  
Tìm CSS Templates >> Postbit.CSS :  
Coppy đoạn code vào cuối cùng :  
.eti_postbit_merkezli {  
padding-left: 4px;  
padding-right: 2px;  
padding-top: 2px;  
padding-bottom: 2px;  
background-color: #efefef;  
border-top: 1px solid #dddddd;  
border-right: 1px solid #dddddd;  
border-left: 1px solid #c4c4c4;  
border-bottom: 1px solid #c4c4c4;  
margin-bottom: 4px;  
text-align:center;  
-moz-box-shadow: 0 2px 6px #b3b3b3;  
-webkit-box-shadow: -1px 2px 2px #b3b3b3;  
-moz-border-radius-bottom{vb:stylevar left}:6px;  
-moz-border-radius-top{vb:stylevar right}:6px;  
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};  
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar  
threadlisthead_top_corner_radius};}  
.eti_postbit {  
padding-left: 4px;  
padding-right: 2px;  
padding-top: 2px;  
padding-bottom: 2px;  
background-color: #efefef;  
border-top: 1px solid #dddddd;  
border-right: 1px solid #dddddd;  
border-left: 1px solid #c4c4c4;  
border-bottom: 1px solid #c4c4c4;  
margin-bottom: 4px;  
-moz-box-shadow: 0 2px 6px #b3b3b3;  
-webkit-box-shadow: -1px 2px 2px #b3b3b3;  
-moz-border-radius-bottom{vb:stylevar left}:6px;  
-moz-border-radius-top{vb:stylevar right}:6px;  
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar threadlisthead_top_corner_radius};  
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar threadlisthead_top_corner_radius};  
}
.htt_postbit {  
text-align:center;  
}
Save and Reload .  
Xong phần tạo khung , bây giờ sang các bước hack mod và đóng khung thông tin .  
3. Tạo màu nick .  
Vào Admin CP >> Usergroups >> Usergroup Manage :  
Chọn Administrators >> Nhấn Tiếp tục ( Next ) :  
Tại mục Usernam HTML Markup >> Ở ô thứ nhất phía bên phải bạn dán code sau vào :  
<b><font color=red>  
Ô thứ 2 là gán thẻ kết thúc :  
</font></b>  
Những gì không nhắc đến thì để nguyên >> Nhấp Update .  
Tương tự với Smod , Mod và Member . Bạn có thể thay red thành các màu khác tương ứng như :  
green , gray , blue , ...  
Tuy nhiên nếu bạn muốn canh nick vào giữa thì làm như sau :  
Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit  
templates :  
Postbit Templates >> postbit_legacy :  
Tìm code sau :  
<div class="postdetails">  
<div class="userinfo">  
<div class="username_container">  
<vb:if condition="$post['userid']">  
{vb:raw memberaction_dropdown}  
{vb:raw post.onlinestatus}  
<vb:else />  
<span class="username guest">{vb:raw post.musername}</span>  
</vb:if>  
</div>  
Thêm thẻ <center> ... </center> ( canh giữa ) và thẻ <b>...</b> ( in đậm ) như sau :  
<div class="postdetails">  
<div class="userinfo">  
<div class="username_container">  
<center> <b> <vb:if condition="$post['userid']">  
{vb:raw memberaction_dropdown}  
{vb:raw post.onlinestatus}  
<vb:else />  
<span class="username guest">{vb:raw post.musername}</span>  
</vb:if><b></center>  
</div>  
Save and Reload . Nhấn F5 để xem forum của bạn .  
4. Gán biểu tượng cho Admin , Smod , Mod và member .  
Trước hết bạn tải các hình ảnh gif về tại đây và tiến hành upload lên host theo đường  
dẫn : /forum/images/ranks/  
Vào AdminCP >> User ranks >> Add New User Rank :  
-
Mục usergroup chọn Administrators  
–
–
–
Mục Minimum chọn 0  
Display Type : always  
Mục User rank File Path : chọn đường dẫn file ảnh admin.gif mà bạn vừa upload lên host .  
Ví dụ ở đây : images/ranks/admin.gif  
Nhấn Save .  
Tương tự với Smod , mod và member . Sau khi làm xong bạn vào AdminCP >> User Ranks >>  
User Rank Manager :  
Kick vào update user titles and ranks :  
Tiếp tục kick tiếp vào update user titles and ranks . Nhấn F5 để xem thành quả nhé .  
5. Mod avatar mặc định và đóng khung .  
Bạn tải avatar về tại đây và upload file ava_01 đến ava_09 lên host theo đường dẫn :  
/forum/images/avatars/  
Vào AdminCP >> Plugins & Products >> Manage Products >> [Add/import Product] :  
Nhấp vào Browse ... >> Chọn file HTT-avatar.xml vừa nãy download về >> Open .  
Mục Allow Overwrite , tick chọn Đồng ý / Yes .  
Nhấp vào import để tiến hành import file xml . Đã cài xong avatar mặc định , bây giờ đóng khung  
nó lại .  
Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit  
templates :  
Postbit Templates >> postbit_legacy :  
Tìm code sau :  
<vb:if condition="$show['avatar']">  
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}"  
title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">  
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar,  
{vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />  
</a>  
</vb:if>  
Thay thế bằng đoạn code sau :  
<!-- HTT itvn --><center>  
<vb:if condition="$show['avatar']">  
<table id="Table_01" width="100" height="100" border="0" cellpadding="0" cellspacing="0">  
<tr>  
<td>  
<img src="images/avatars/ava_01.png" width="34" height="34" alt=""></td>  
<td background="images/avatars/ava_02.png">  
</td>  
<td>  
<img src="images/avatars/ava_03.png" width="34" height="34" alt=""></td>  
</tr>  
<tr>  
<td background="images/avatars/ava_04.png">  
</td>  
<td background="images/avatars/ava_05.png">  
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase  
{vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">  
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw  
post.username}}" />  
</a>  
</td>  
<td background="images/avatars/ava_06.png">  
</td>  
</tr>  
<tr>  
<td>  
<img src="images/avatars/ava_07.png" width="34" height="34" alt=""></td>  
<td background="images/avatars/ava_08.png">  
</td>  
<td>  
<img src="images/avatars/ava_09.png" width="34" height="34" alt=""></td>  
</tr>  
</table>  
</vb:if> </center>  
<!-- / HTT itvn -->  
Save and Reload . Nhấn F5 và cập nhập avatar của bạn để xem kết quả nhé !  
6. Thành viên thứ bao nhiêu ?  
Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit  
templates :  
Postbit Templates >> postbit_legacy :  
Tìm code sau : ( nằm sau code avatar mà bạn vừa làm ở trên )  
<vb:if condition="$post['userid']">  
<hr />  
<dl class="userinfo_extra">  
Chèn xuống dưới đoạn code sau : ( nếu dùng skin mà bạn vừa tải về trong phần III thì thay  
"eti_postbit" thành "post_field")  
<div align="center" class="eti_postbit">  
<vb:if condition="$post['userid']"><dt>Thành viên thứ</dt> <dd>{vb:raw  
post.userid}</dd></vb:if></div>  
Nếu để chữ Thành viên thứ đổi màu ( ở đây lấy ví dụ màu đỏ ) thì bạn chèn đoạn code sau :  
<div align="center" class="eti_postbit">  
<vb:if condition="$post['userid']"><font color=red><b>Thành viên thứ</b></font><dd>{vb:raw  
post.userid}</dd></vb:if></div>  
Save and Reload . Nhấn F5 để xem kết quả .  
7. Đóng khung thông tin có sẵn .  
Trong VBB 4.0.5 thì đã có sẵn một số thông tin như số bài gửi , tuổi , ... Bạn chỉ cần tìm đoạn code  
có sẵn và gán cho nó thêm thẻ <div class="eti_postbit">....</div> ( với skin giống như  
www.ITVNN.net tải từ phần III thì bạn chỉ cần thay "eti_postbit" thành "post_field" )  
Vào AdminCP >> Styles & Templates >> Style Manager >> Chọn skin cần chỉnh >> Edit  
templates :  
Postbit Templates >> postbit_legacy :  
Ví dụ ở đây là thông tin số bài gửi , tìm code ( tất cả code này đều nằm sau code mục avtar mà bạn  
vừa làm ở trên ) : ( Nếu bạn dùng skin ở phần III thì bạn thay "eti_postbit" thành "post_field"  
, không cần thẻ <font color=red>...</font> và thẻ <b>...</b> , nếu bạn muốn khác so với  
www.itvnn.net thì bạn chỉ cần bỏ thẻ <dt>...</dt> . Còn Skin khác thì để nguyên )  
<dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>  
Sau khi gán :  
<div class="eti_postbit"><font color=red><b><dt>{vb:rawphrase 'posts'}</dt></b></font>  
<dd>{vb:raw post.posts}</dd></div>  
Tương tự với thông tin Tham gia ngày :  
<vb:if condition="$post['joindate']"><div class="eti_postbit"><font  
color=red><b><dt>{vb:rawphrase join_date}</dt></b></font> <dd>{vb:raw  
post.joindate}</dd></div></vb:if>  
Thật đơn giản với thẻ <div> ...</div> , bạn cần tìm và phát hiện thông tin có sẵn . Tuy nhiên , thông  
tin có sẵn lại không làm đẹp lòng bạn nên chúng ta phải tự làm thêm thông tin thôi .  
8. Tạo và đóng khung thông tin vừa tạo .  
Chú ý là với skin mà bạn tải ở phần III để cho giống www.itvnn.net thì bạn thay "eti_postbit"  
thành "post_field" và không cần thẻ <font color=mã màu >...</font> , <b>...</b> , nếu muốn  
khác thì chỉ cần bỏ thẻ <dt>...</dt> . Còn skin khác thì để nguyên . Bài viết tới mình không  
nhắc lại nữa đâu nhé .  
+ Đầu tiên chúng ta thêm thông tin tên thật .  
Vào Admin CP >> User Profile Fields >> Add New User Profile Field >> Ở mục Profile Field  
Type chọn Single-Line Text Box >> Continue >> Mục chủ đề gõ : Họ và tên , mục Description  
gõ : Họ tên thật của bạn , mục Max length of allowed user input ghi giá trị 30 ( độ dài của tên ) ,  
các mục khác để nguyên >> Save .  
Bảng User Profile Fields in Area: Edit Profile xuất hiện , bạn chú ý chữ số kèm theo chữ field  
sau nó . Ví dụ : field5 thì mình nhớ chữ số 5 .  
Tiếp theo ta cho nó hiển thị và đóng khung nó , bạn làm như sau :  
Admin CP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh , edit templates >>  
Postbit templates >> Postbit_legacy >> Tìm đoạn code sau :  
<vb:if condition="$post['userid']">  
<hr />  
<dl class="userinfo_extra">  
Chèn xuống dưới đoạn code sau :  
<vb:if condition="$post['fieldx']"><div class="eti_postbit"><font color=red><b><dt>Họ tên  
:</dt></b></font><dd> {vb:raw post.fieldx}</dd></div></vb:if>  
Với chú ý là chữ x màu đỏ là số field mà bạn phải ghi nhớ mà mình đã nhắc ở trên , như ví dụ  
của mình thì đoạn code như sau :  
<vb:if condition="$post['field5']"><div class="eti_postbit"><font color=red><b><dt>Họ tên  
:</dt></b></font><dd> {vb:raw post.field5}</dd></div></vb:if>  
Save and reload . Nhấn F5 và cập nhập thông tin ở forum để kiểm tra .( B  
ài Viết của HTT.itvn)  
+ Thêm thông tin địa chỉ ( thông tin giới tính , năm sinh , ... cũng tương tự ) .  
Vào Admin CP >> User Profile Fields >> Add New User Profile Field >> Ở mục Profile Field  
Type chọn Single-Selection Menu >> Continue >> Mục chủ đề gõ Địa chỉ , mục Description gõ  
Tỉnh/Thành Phố và mục Tùy Chọn gõ tên các tỉnh thành , phân biệt lựa chọn bởi 1 dấu xuống  
dòng :  
An Giang  
Bà Rịa - Vũng Tàu  
Bạc Liêu  
Bắc Cạn  
Bắc Giang  
Bắc Ninh  
Bến Tre  
Bình Dương  
Bình Định  
Bình Phước  
Bình Thuận  
Cà Mau  
Cao Bằng  
Cần Thơ  
Đà Nẵng  
Đắk Lắk  
Đắk Nông  
Đồng Nai  
Đồng Tháp  
Gia Lai  
Hà Giang  
Hà Nam  
Hà Nội  
Hà Tây  
Hà Tĩnh  
Hải Dương  
Hải Phòng  
Hậu Giang  
Hoà Bình  
Thành phố Hồ Chí Minh  
Hưng Yên  
Khánh Hoà  
Kiên Giang  
Kon Tum  
Lai Châu  
Lạng Sơn  
Lào Cai  
Lâm Đồng  
Long An  
Nam Định  
Nghệ An  
Ninh Bình  
Ninh Thuận  
Phú Thọ  
Phú Yên  
Quảng Bình  
Quảng Nam  
Quảng Ngãi  
Quảng Ninh  
Quảng Trị  
Sóc Trăng  
Sơn La  
Tây Ninh  
Thái Bình  
Thái Nguyên  
Thanh Hoá  
Thừa Thiên-Huế  
Tiền Giang  
Trà Vinh  
Tuyên Quang  
Vĩnh Long  
Vĩnh Phúc  
Yên Bái  
Các mục khác để nguyên và save . Chú ý số Field nhé .  
Sau đó cho hiển thị thông tin : Admin CP >> Styles & Templates >> Style manager >> Chọn skin  
cần chỉnh , edit templates >> Postbit templates >> Postbit_legacy >> Tìm đoạn code mà ta đã  
thêm thông tin họ tên ở trên và chèn đoạn code sau xuống dưới :  
<vb:if condition="$post['fieldx']"><div class="eti_postbit"><font color=red><b><dt>Ðến từ  
:</dt></b></font><dd> {vb:raw post.fieldx}</dd></div></vb:if>  
Chú ý thay số field nhé . Nhấn F5 và cập nhập thông tin ở forum để xem kết quả .  
+ Giới tính có hình ảnh kèm theo .  
Tải về tại đây và upload lên host trong thư mục /images/  
Vào Admin CP >> User Profile Fields >> Add New User Profile Field >> Ở mục Profile Field  
Type chọn Single-Selection Menu >> Continue :  
Bạn điền thông tin như hình ảnh trên và nhấn Save để lưu lại . Chú ý số Field nhé  
Sau đó vào Admin CP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh , edit  
templates >> Postbit templates >> Postbit_legacy >> Tìm đoạn code mà ta đã thêm thông tin họ tên  
ở trên và chèn đoạn code sau xuống dưới :  
<div class="eti_postbit"><b><font color=red><dt>Giới tính</font></b></dt> <dd><img  
src="images/gender/<vb:if condition="$post['fieldx']=='Nam'">Nam<vb:else /><vb:if  
condition="$post['fieldx']=='Nữ'">Nu<vb:else />Đồng tính</vb:if></vb:if>.gif"  
border="0" alt="{vb:raw post.fieldx}"></img></dd> </div>  
Nhấn Save and Reload , vào forum để cập nhập thông tin giới tính .  
9. Xóa phần Usertitle .  
Admin CP >> Styles & Templates >> Style manager >> Chọn skin cần chỉnh , edit templates >>  
Postbit templates >> Postbit_legacy >> Tìm đoạn code sau và xóa nó đi :  
<span class="usertitle">{vb:raw post.usertitle}</span>  
Nhấn Save and Reload .  
Đến đây phần tạo thông tin cá nhân và đóng khung đã xong . Bây giờ chúng ta sang phần V  
là phần hack Mod .  
CHÚC BẠN THÀNH CÔNG !  
Ebook by : HTT itvn  
Email : zz.mr.[email protected]m  
pdf 17 trang baolam 23180 Free
Download
Bạn đang xem tài liệu "Hướng dẫn tự thiết kế forum VBB 4.x - Phần 4: Tạo profile (thông tin cá nhân) và đóng khung thông tin", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfhuong_dan_tu_thiet_ke_forum_vbb_4_x_phan_4.pdf