Yahoo 360 Plus: Code css đặt ảnh nền cho các modun chính, phụ

Đôi khi xem một blog Yahoo 360 bạn thấy có một số Blog nhìn các Module rất đẹp, mỗi Module có một màu, ảnh nền khác nhau. Để làm được như thế không phải khó, sau đây mình sẽ hướng dẫn các bạn cách thay đổi nền của các module trong yahoo 360

Cách tiến hành: Các bạn vào "Thiết kế => Theme => chế đột tự sửa/CSS" rồi chèn code dưới vào nhé.

1. Code css đặt ảnh nền cho modun phụ

Code: .col-150 .rc_bd .rc_bc .bd {background:transparent;}.col-150 
.rc_bd .rc_bc .bd {background:transparent url(Linh ảnh nền modun phụ);} 

2. Code css đặt ảnh nền cho modun chính

Code: .col-600 .rc_bd .rc_bc .bd {background:transparent;}.col-600 
.rc_bd .rc_bc .bd {background:transparent url(Linh ảnh nền modun 
chính);} 

3. Code làm trong suốt blog - không có ảnh nềntrong modun chính và phụ, nhìn thấy hình nền blog

Code: .col-150 .rc_bd .rc_bc .bd {background:transparent;}.col-600 .rc_bd .rc_bc .bd {background:transparent;} 

4. Code css đặt ảnh nền cho modun chính và phụ

Code: .col-600 .rc_bd .rc_bc .bd {background:transparent;}.col-600 
.rc_bd .rc_bc .bd {background:transparent url(Linh ảnh nền modun 
chính);}.col-150 .rc_bd .rc_bc .bd {background:transparent;}.col-150 
.rc_bd .rc_bc .bd {background:transparent url(Linh ảnh nền modun phụ);}

5. Code css ðặt ảnh nền cho modun tâm trạng 

5.1.  Code đặt ảnh nền đơn giản nhất

Code: #mod_lifeline .bd {background:transparent url(Link ảnh nền modun tâm trạng);}

5.2. Code ko cho ảnh nền lặp lại và ảnh nền ðýợc hiện thị từ trên (top) xuống dưới.

Code: #mod_lifeline .bd {background:transparent url(Link ảnh nền modun tâm trạng);} no-repeat right top;}

có thể thay center bằng: Cãn lề phải right, cãn lề giữa center, cãn lề trái left no-repeat thành repeat ðể cho lặp ảnh

5.3. Code ko cho ảnh nền lặp lại và ảnh nền ðýợc hiện thị từ trên (top) xuống dýới và tùy chỉnh chiều cao của ảnh.

Code: #mod_lifeline .bd {background:transparent url(Link ảnh nền modun 
tâm trạng);} no-repeat right;height:Xpx;}X là chiều cao của ảnh Code đặt
 ảnh nền thanh Tiêu đề của môdun tâm trạng Code: #mod_lifeline .bd 
{background:transparent url(http://i280.photobucket.com/albums/kk193/datablog/Capture-53.png);}

Hoặc

Code: #mod_lifeline .bd {background:transparent url(Link ảnh) no-repeat right;height:Xpx;}

Có thể thay center bằng: Căn lề phải right, căn lề giữa center, căn lề trái left no-repeat thành repeat để cho lặp ảnh X là chiều cao của ảnh Code css Thay đổi nền khung bình luận trong bài viết 

6. Bạn có muốn thay đổi nền khung bình luận màu trắng khô khan mặc định của Plus,tuỳ theo theme của bạn mà hãy tuỳ biến một cách hợp lý nhe.

Code: .mod-alist-full .alist-comment li {background:#ffffff url(Link 
ảnh) no-repeat top left; border-top:2px inset #ffffff; border-left:2px 
inset #ffffff; border-right:2px inset #ffffff;} .mod-alist-full 
.alist-comment .comment-ctnr {background:url(Link ảnh) repeat-y top 
right;}

-Ở đây mình dùng background màu trắng nên mã màu để là #ffffff (vị trí số 3).Muốn biết bảng mã màu thì xem tại đây -Cái link ảnh đâu tiên là ảnh bên trái,link ảnh dưới cùng là ảnh bên phải. -Ở đây có một vài thuộc tính hiển thị mà các bạn lên chú ý để tuỳ biến cho hợp lý: repeat: lặp lại hình ảnh no-repeat: không lặp lại repeat-y : lặp lại hình ảnh theo chiều thẳng đứng top:hiện thị trên cùng | left: bên trái | right: bên phải | bottom: phía dưới -Ban hãy thay Link ảnh ở kia bằng hình ảnh độc đáo của bạn nhé.

- Đây chỉ là đoạn code cơ bản các bạn hãy tự tìm hiểu,thử nghiệm sao cho đẹp nhất với Blog mình nhé.