Hướng dẫn đóng khung thông tin chi tiết cho VBB 4.x

[HTT.itvn]

Mấy ngày qua nhiều thành viên thắc mắc về cách đóng khung từng thông tin ở mục thông tin , nay mình hướng dẫn chi tiết cho các bạn đóng khung từng thông tin cụ thể :

Bước 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 >> Kick vào postbit.css >> Dán code sau vào cuối cùng :
(Bài viết của HTT.itvn )

/* eTiKeT Postbit_Legacy*/
.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};
}

.itvnn_postbit {
text-align:center;
}

Save and Reload ( Bài viết của HTT.itvn)

Bước 2 : Đóng khung từng chi tiết .

- Đưa thông tin tên thành viên vào giữa
Demo : như diễn đàn này .
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 :

<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ẻ <div class="itvnn_postbit">......</div> như sau ( chú ý chữ màu đỏ ) .

<div class="username_container">
<vb:if condition="$post['userid']">
<div class="itvnn_postbit">
{vb:raw memberaction_dropdown}
{vb:raw post.onlinestatus}
<vb:else />
<span class="username guest">{vb:raw post.musername}</span>
</vb:if>
</div></div>

Save and reload ( Bài Viết của HTT.itvn)
Vào diễn đàn của bạn để xem kết quả .

- Màu nick :
Admin CP >> Usergroups >> Usergroup Manager >> Administrators . Kick vào Tiếp tục >> Mục Username HTML Markup , ở ô đầu tiên bạn gán thẻ <b><font color=red> ( chữ màu đỏ là bạn có thể thay đổi sang màu khác như : blue , green , gray ,...) , ở ô thứ 2 bạn gán thẻ kết thúc </font></b> . Các mục khác để nguyên . Kick vào Update .

Tương tự với Smod , mod và Member . ( Bài Viết của HTT.itvn)

- Gán biểu tượng hình ảnh cho admin , smod , mod và member .

Demo : Như diễn đàn này .
Đầu tiên tải file ảnh về tại đây và upload lên thư mục images/ranks/ trong host .
Admin CP >> User Ranks >> Add New User Ranks >> Mục Usergroup chọn Administrators , ở mục Minimum Posts để giá trị 0 và mục User Rank File Path gõ đường dẫn file ảnh là images/ranks/admin.gif >> Save . ( Bài Viết của HTT.itvn)
Tương tự với smod , mod và member .
Sau khi làm xong bạn phải vào User rank manager để kích hoạt , kick vào update user titles and ranks >> Ở mục đầu tiên kick vào update user titles and ranks lần nữa .
Nhấn F5 để xem thành quả .

P/s : Những thắc mắc - góp ý thì viết tại đây và kiên trì chờ trả lời , mình sẽ trả lời nhanh nếu có thể . Nhiều bạn mới hỏi có vài 3 phút rồi spam liên tục để gây chú ý . Không phải ai cũng online 24/24 .

[qazcderfv]

Mình muốn phần level và thanks giống như phần bài gữi và ngày tham gia thì làm cách nào vậy bạn?

[Tiểu Bá Vương 1404]

...đẩy mod thanks xuống dưới mod lv&class...

Lí do : hai mods này dùng chung một template_hook của vBulletin, vì thế, cái nào được cài trước sẽ hiện trước (tức là nằm trên), cái nào cài sau thì hiện sau (tức là nằm dưới).
Cách khắc phục :
- Quan trọng nhất : backup data của table "post_thanks", điều này sẽ giúp giữ lại dữ liệu thanks từ trước tới giờ của anh.
- Quan trọng nhì : backup dữ liệu đã thực hiện (edit template), anh vào Styles & Templates -> Download / Upload Styles, tại khung Download, mục Product, anh chọn [AJAX] Post Thank You Hack và download về file vbulletin-style.xml, lưu trữ nó lại ở đâu đấy.
- Thứ ba, anh xoá mods [AJAX] Post Thank You Hack, vào Plugins & Products -> Manage Product -> tại vị trí của mods, anh chọn Uninstall.
- Thứ tư, sau khi đã xoá mods, giờ anh cài đặt lại, chỉ cần import lại file xml của mods, tiếp đến là import lại file vbulletin-style.xml cũng tại mục lấy nó nhưng ở khung thứ 2 và nhớ Merge Into Style vào style anh đã lấy nó ra. Cuối cùng, nhập lại dữ liệu thanks đã backup, cũng giống như việc anh restore data lại.

làm sao để đong khung thông tin nằm ngang của vbb 4

Đóng khung nằm ngang thì sử dụng template postbit nhé anh.

[PhucSD]

các bác cho em hỏi làm thế nào để cho cái " đã được thank " vào khung như của itvnn ?

Bạn vui lòng lật lại trang 1 của bài này, dò từ đầu xuống dưới sẽ thấy

[kenshin83]

Cho mình hỏi trước khi mình thêm vào các thông tin của thành viên thì nó vẫn còn cái RANK phân loại

Code trước khi thêm trường thông tin

<dl class="userinfo_extra">
                    <vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
                    <vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
                    <vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
                    <dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>    
                    {vb:raw template_hook.postbit_userinfo_right_after_posts}
                </dl> 

nhưng khi thêm trường thông tin cho thành viên thì nó mất đi cái RANK của mình, giờ mình thêm code ra sao để nó hiện lại cái RANK

Code khi thêm trường thông tin

<dl class="userinfo_extra">
<vb:if condition="$post['field5']"><div class="eti_postbit">Họ tên : {vb:raw post.field5}</div></vb:if>
<vb:if condition="$post['field4']"><div class="eti_postbit">Nghề nghiệp : {vb:raw post.field4}</div></vb:if>
<vb:if condition="$post['field10']"><div class="eti_postbit">Ðến từ : {vb:raw post.field10}</div></vb:if>
<vb:if condition="$post['field7']"><div class="eti_postbit">Giới tính : {vb:raw post.field7}</div></vb:if>


                    <vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
                    <vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
                    <vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
                    <dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd>    
                    {vb:raw template_hook.postbit_userinfo_right_after_posts}
                </dl> 

[hung123]

cho mình hỏi mình muốn đóng khung như sau

untitled.JPG

vậy thì làm thế nào

[PhucSD]

cho mình hỏi mình muốn đóng khung như sau

untitled.JPG
vậy thì làm thế nào

Edit Templates của skin bạn cần sửa => CSS Templates => additonal.css
Thêm đoạn code này vào dưới

.post_field {	background: #fff;
	color: #4d5153;
	border: 1px solid #bcb6ad;
	padding: 3px 3px 3px 10px;
	margin-top: 2px;
	text-align:left;
}
.post_field strong {
	color: #ea7904;
}
.post_field dt {
	color: #ea7904;
	font-weight:700;
}

Rồi bạn vào postbit_legary rồi thêm <div class="post_field"> vào trước mỗi thông tin cá nhận bạn muốn đóng khung, và nhớ phải đóng bằng thẻ </div>

[Dunglx]

cho mình hỏi mình muốn đóng khung như sau

untitled.JPG

vậy thì làm thế nào

Bạn vào CSS template >>> postbit.css tìm cái này nhé

-moz-border-radius-bottom{vb:stylevar left}:0px;
-moz-border-radius-top{vb:stylevar right}:0px;


Chỉnh sửa thông thố về 0 là ok

Và chú ý cái này bạn chọn màu nèn cho phần đóng khung nè

background-color: #fafbfa;

[download]

bạn ơi dùng cho bản 4.1.4 dc hok vậy?

[hoangduykt7990]

được, 4.1.4 không có thay đổi j trong template cả!

[zkenji]

Cần giúp về chữ màu Last Post By
mau.jpg
Em đã chỉnh đc mày nhưng chỉ xuất hiện ở bài viết và thống kê thôi, ko đc như itvnn