[Beta Plus] Thay hình nền cho Module Bài Viết

[tracytruong]

Hi cả nhà, hôm nay Tracy sẽ chia sẻ thêm cho cả nhà về code của Bài Viết, trong tất cả các module của bản Beta Plus phần khó nhất là ở Module Bài Viết, vì ngay Trang Chính , module Bài Viết luôn luôn size ở chiều ngang là 600px (với Viền Trong suốt, nếu tính cả viền của module sẽ là 620px) , tất cả Module Bài Viết khi vào trang xem chi tiết, sẽ chuyển thành size 780px( với viền trong suốt, nếu tính viền là 790px).

Với sự thay đổi này, chúng ta phải thay đổi cách design như sau:

Cách Thiết Kế 1:

Dùng 1 màu đơn, ( trắng, trong suốt) hoặc các nền Top của tất cả Module cùng loại.
Với dạng này thì chúng ta ko có gì phải lo lắng, vì những nền này sẽ được tự lặp lại nền trong code.

Phần Top của Module Bài Viết

#article_list_module .rc_hd {background:transparent url(link hinh) repeat center bottom;height:xxpx;}

Phần Center của Module Bài Viết

#article_list_module .rc_bd {background:transparent url(link hinh) repeat center bottom;}

Phần bottom của Module Bài Viết

#article_list_module .rc_ft
{background:transparent url(link hinh) repeat center top;height:xxpx;}

Cách Thiết Kế 2:

Đối với dạng design theo kiểu, Top của Module Bài Viết là hình ảnh như ví du dưới đây
[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]
(Hình mang tính minh họa)
Ví dụ cụ thể:
[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]Module Bài Viết ngoài Trang Chính
[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]Module Bài Viết khi xem Chi tiết

Các bạn phải cố định hình ảnh 1 góc là Trái hoặc phải cho mục Top như trên.
Lúc đó, design riêng cho mục Top này kích thước dài nhất là 800px ( kích thước này qua kinh nghiệm thấy nó ổn nhất nên nhắc khéo các bạn để sử dụng phù hợp), hình canh lề Trái hoặc phải như ví dụ trên,để khỏang hình ảnh lập lại phía sau đuôi là được.
Về code, code luôn luôn cho canh chỉnh bên Trái hoặc Phải như hình ảnh mình design như trên.

Phần Top của Module Bài Viết

#article_list_module .rc_hd {
background:transparent url(link hinh) no-repeat scroll left center;
height:xxpx;}

Phần Center của Module Bài Viết

#article_list_module .rc_bd {background:transparent url(link hinh) repeat left bottom;}

Phần bottom của Module Bài Viết

#article_list_module .rc_ft
{background:transparent url(link hinh) repeat left top;height:xxpx;}

Chú ý:

Với cách thiết kế 2, các bạn sẽ thấy phần chữ "Bài Viết" bị thừa ra, nếu ai dùng cách deisgn này thì tất cả các module sẽ là hình ảnh có tiêu đề cho tất cả module và dùng thêm code này để xóa chữ.

left: các bạn có thể thay là right, nếu design ảnh từ tay Phải và code cũng sẽ để đồng loạt thuộc tính là right hoặc center

#bd h2 {
font-size:0;
}

Ngược lại nếu các bạn muốn chỉnh nền Tittle như hình ví dụ sau, các bạn dùng code sau:

[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]

Nền Tittle Bài Viết

#article_list_module .rc_bd .rc_bc .hd .titlebar{
background:#mã màu url(Link hình ảnh) none repeat scroll 0 0;
}

Mọi thắc mắc liên hệ [Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]
Viết bởi [Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]

[delta_khiem]

Sao tracy chỉ chỉ có 3 phần top, center và bottom thôi vậy, vì 1 module có tới 4 phần top, tiêu đề (phần có tên module đó), phần center và bottom , vậy tui muốn thay tiêu đề thì biết làm sao.

[tracytruong]

Sao tracy chỉ chỉ có 3 phần top, center và bottom thôi vậy, vì 1 module có tới 4 phần top, tiêu đề (phần có tên module đó), phần center và bottom , vậy tui muốn thay tiêu đề thì biết làm sao.

Đã update thêm code Tittle cho Top Bài Viết nhé Delta

[delta_khiem]

cái thuộc tính này có sao không vậy tracy none repeat scroll 0 0;
}
cái đó nó bị sao đó, nhưng khi ti đổi lại thuộc tính này thì nó ok: no-repeat left top;height:90px;}

[tracytruong]

cái thuộc tính này có sao không vậy tracy none repeat scroll 0 0;
}
cái đó nó bị sao đó, nhưng khi ti đổi lại thuộc tính này thì nó ok: no-repeat left top;height:90px;}

Thuộc tính này chỉ đi kèm với background, tách ko ra như thế dĩ nhiên nó ko có ý nghĩa. repeat là sự lặp lại, no-repeat là ko lặp lại, tùy thuộc bạn muốn sử dụng nó như thế nào cho module mà thôi, tất cả thuộc tính đều là tính chất của thẻ Background..!

Còn height là chiều cao bạn muốn thay đổi, vì bản chất của Blog plus phần Tittle ko cần định height, do bạn cần canh chỉnh theo size thì chèn height vào, đơn giản chỉ vậy thôi.

[olympia41124]

Lưu ý chút xíu nhé mọi người. Đối với lớp tiêu đề (.titlebar) nếu để height dưới 20 thì trên FF bản Beta, module bài viết sẽ bị co nhỏ lại

[AN360]

Ghê quá, chỉnh sai chút là teo héo hà. Hi hi.

[MrTeddy]

có cách nào làm biến mất chữ " Bài Viết " có sẵn ko
[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]

[stuaoneb]

có cách nào làm biến mất chữ " Bài Viết " có sẵn ko
[Chỉ khi nào bạn đăng ký và kích hoạt tài khoản bạn mới nhìn thấy link. ]

Code làm biến mất chữ " Bài Viết ":

.mod-alist-searchbox form strong {font-size:0;}
strong {font-size:0;}

[MrTeddy]

Code làm biến mất chữ " Bài Viết ":

có dc đâu
.................................................................................