Đăng ngày: 09:46 15-05-2009
Đầu tiên là làm nền cho tất cả các module của hai cột phụ. Cái này hay hơn là làm từng cái cho calender, thống kê,... vì nó làm đồng loạt các nền cho mọi modole nhanh gọn lẹ. Bạn có thể thay đổi link hình ảnh để có hình nền của riêng mình.
Code:
/* nền các module */
.col-150 .rc_bd .rc_bc .bd /* JW */
{background:transparent url(URL ảnh );color:#FFFFFF;} Đã thay đổi các nền module thì phải thay đổi cả titlebar (header) của module cho nó đủ đầy. Tương tụ bạn có thể thay link ảnh (
http://XXX.xxx).
Code:
/* nền header module */
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar
{background:transparent url(http://XXX.xxx);}
.col-150 .rc_bd .rc_bc .hd .titlebar .hd h2, .col-150 .rc_bd .rc_bc .hd .titlebar .hd a
{color:#4E4E4E;}
.col-150 .hd .titlebar .hd a:hover
{text-decoration:underline;
Tiếp theo là các CSS đã được biết mình thống kê lại cho nó gọn.
HÌNH NỀN CHO TOÀN BLOG
Code:
/* hình nền của blog */
BODY.blog_my {BACKGROUND:url(http://i20.photobucket.com/albums/b243/hanamibuu/pattern2.jpg) #000000 fixed;}
thông số fixed là để làm nền đứng yên không chuyển động theo thanh cuộn rất hợp với nền dạng partern. Nếu không thích bạn có thể loại bỏ thông số này!
CANH PHẢI CÁC TIÊU ĐỀ
Code:
/* canh phải tiêu đề module */
.hd .titlebar .hd h2{
text-align:right;}
Mục đích canh phải các tiêu đề là để thêm các icon vào bên trái mỗi module, khi đó tiêu đề sẽ không bị chồng lên icon.
THÊM ICON CHO MỖI MODULE (VỊ TRÍ BÊN PHẢI)
Code:
/* icon các module */
/* bảng thống kê */
#statistic h2{
background:transparent url(http://hanamibuu.com/thongke.png) no-repeat left top;}
/* Bài mới đăng */
#article_new h2{
background:transparent url(http://hanamibuu.com/baimoi.png) no-repeat left top;}
/* Ảnh trong blog */
#photo_highlight h2{
background:transparent url(http://hanamibuu.com/photo.png) no-repeat left top;}
.mod-comment-new .titlebar .hd h2{
background:transparent url(http://hanamibuu.com/coment.png) no-repeat left top;}
/* Thư mục riêng */
#folder h2{
background:transparent url(http://hanamibuu.com/folder.png) no-repeat left top;}
/* Cập nhật ngày */
#update_date h2{
background:transparent url(http://hanamibuu.com/capnhat.png) no-repeat left top;}
/* RSS */
#rss_output .bd a{
height:25px;background:transparent url(http://hanamibuu.com/rss.png) no-repeat left top;}
/* Tìm kiếm */
#search_module h2{
background:transparent url(http://hanamibuu.com/timkiem.png) no-repeat left top;}
Các link ảnh các bạn có thể thay đổi bằng cái icon khác. Khuyên dùng định dạng .PNG với nề trong suốt cho đẹp (kích thước chuẩn là 26x26)
Theo hanamibuu
;color:/#FFFFFF){kind=link}
Bem bem 21:56 27-11-2009
Ha Yen 20:43 25-11-2009
Dang Dieu Hong 12:09 25-10-2009