Tiểu Bá Vương 1404
02-06-2011, 10:26 AM
Điều quan trọng đầu tiên : Không "Cám ơn (Thanks)" thì đừng có đòi hỏi và được support nhé !
Đã cập nhật code mới, tối ưu hơn.
Giới thiệu vài dòng trước ...
Chính xác như vậy, giảm độ dài của trang Show Thread khi bạn xem một bài viết dài dòng (đến cả chục ngàn chữ, bài ví dụ của mình là hơn 16.000 kí tự rồi). Có thể bạn cảm thấy bực bội khi phải trược trang theo độ dài bài viết (mình là điển hình). Với giải pháp mình đưa ra, bạn sẽ không còn lo lắng và yên tâm cho thành viên viết thoả mái, bao nhiêu kí tự cũng được (unlimited).
Thêm vào đó, bạn còn có thể giảm thiểu khoảng cách trống vô dụng giữa chân bài viết và đầu chữ kí (nói cho nó vuông).
Hãy xem một vài ví dụ về vấn đề này nhé :
[postbit - normal (http://getamped1404.info/images/demo/p_normal.png)] & [postbit_legacy (http://getamped1404.info/images/demo/pl_normal.png)]
Và giờ, đến lúc để thực hiện điều này rồi ...
Bước thứ nhất : thêm css trong additional.css (Edit Templates -> CSS Templates) :
Dán code sau vào trên, dưới, hoặc bất cứ đâu trong template đó...
/* Make a shorter message in postbit_legacy */
.g_short {
min-height: auto !important;
max-height: 350px; /* Tùy ý người sử dụng thay đổi thông số */
overflow-x: hidden;
overflow-y: auto;
padding-right: 10px;
text-align: justify;
margin-bottom: 0 !important;
}
/* move up signature */
.postbitlegacy .after_content {
clear: both !important;
}
Bước thứ hai : sửa css trong postbit.css (Edit Templates -> CSS Templates) :
Tìm code sau :
/*post bit*/
...
và
...
.postbitlegacy .postrow.has_after_content {
padding-bottom: 4em;
}
Sửa lại để cho nó giống cái sau ...
/*post bit*/
.postbitlegacy .after_content {
clear: right !important;
}
...
và
...
.postbitlegacy .postrow.has_after_content {
padding-bottom: 0em !important;
}
Bước thứ ba : sửa lại trong template postbit & postbit_legacy (Edit Templates -> Postbit Templates) :
Tìm code sau, ở cả hai template trên nó đều giống nhau ...
<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore ">
{vb:raw post.message}
</blockquote>
</div>
Sửa lại để cho nó giống cái sau ...
<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore g_short">
{vb:raw post.message}
</blockquote>
</div>
Đấy, hết rồi, giờ xem lại những gì mình đã làm ...
[postbit - long text (http://getamped1404.info/images/demo/p_shorter.png)] & [postbit - short text (http://getamped1404.info/images/demo/p_shorter1.png)]
[postbit_legacy - long text (http://getamped1404.info/images/demo/pl_shorter.png)] & [postbit_legacy - short text (http://getamped1404.info/images/demo/pl_shorter1.png)]
Nếu chưa hài lòng với những hình trên, xem trực tiếp tại my demo forum (http://vb.getamped1404.info/threads/2-What-is-vBulletin-4)!
Nếu cần :
- User name : Demo User
- Paasword : 123456
Đã cập nhật code mới, tối ưu hơn.
Giới thiệu vài dòng trước ...
Chính xác như vậy, giảm độ dài của trang Show Thread khi bạn xem một bài viết dài dòng (đến cả chục ngàn chữ, bài ví dụ của mình là hơn 16.000 kí tự rồi). Có thể bạn cảm thấy bực bội khi phải trược trang theo độ dài bài viết (mình là điển hình). Với giải pháp mình đưa ra, bạn sẽ không còn lo lắng và yên tâm cho thành viên viết thoả mái, bao nhiêu kí tự cũng được (unlimited).
Thêm vào đó, bạn còn có thể giảm thiểu khoảng cách trống vô dụng giữa chân bài viết và đầu chữ kí (nói cho nó vuông).
Hãy xem một vài ví dụ về vấn đề này nhé :
[postbit - normal (http://getamped1404.info/images/demo/p_normal.png)] & [postbit_legacy (http://getamped1404.info/images/demo/pl_normal.png)]
Và giờ, đến lúc để thực hiện điều này rồi ...
Bước thứ nhất : thêm css trong additional.css (Edit Templates -> CSS Templates) :
Dán code sau vào trên, dưới, hoặc bất cứ đâu trong template đó...
/* Make a shorter message in postbit_legacy */
.g_short {
min-height: auto !important;
max-height: 350px; /* Tùy ý người sử dụng thay đổi thông số */
overflow-x: hidden;
overflow-y: auto;
padding-right: 10px;
text-align: justify;
margin-bottom: 0 !important;
}
/* move up signature */
.postbitlegacy .after_content {
clear: both !important;
}
Bước thứ hai : sửa css trong postbit.css (Edit Templates -> CSS Templates) :
Tìm code sau :
/*post bit*/
...
và
...
.postbitlegacy .postrow.has_after_content {
padding-bottom: 4em;
}
Sửa lại để cho nó giống cái sau ...
/*post bit*/
.postbitlegacy .after_content {
clear: right !important;
}
...
và
...
.postbitlegacy .postrow.has_after_content {
padding-bottom: 0em !important;
}
Bước thứ ba : sửa lại trong template postbit & postbit_legacy (Edit Templates -> Postbit Templates) :
Tìm code sau, ở cả hai template trên nó đều giống nhau ...
<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore ">
{vb:raw post.message}
</blockquote>
</div>
Sửa lại để cho nó giống cái sau ...
<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore g_short">
{vb:raw post.message}
</blockquote>
</div>
Đấy, hết rồi, giờ xem lại những gì mình đã làm ...
[postbit - long text (http://getamped1404.info/images/demo/p_shorter.png)] & [postbit - short text (http://getamped1404.info/images/demo/p_shorter1.png)]
[postbit_legacy - long text (http://getamped1404.info/images/demo/pl_shorter.png)] & [postbit_legacy - short text (http://getamped1404.info/images/demo/pl_shorter1.png)]
Nếu chưa hài lòng với những hình trên, xem trực tiếp tại my demo forum (http://vb.getamped1404.info/threads/2-What-is-vBulletin-4)!
Nếu cần :
- User name : Demo User
- Paasword : 123456