Đầ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(http://hanamibuu.com/cat9_4.gif);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.
1. Hình nền cho blog (theme):
Nếu bạn muốn để theme là ảnh tràn khắp màn hình:
BODY.blog_my {background:url(URL ảnh) #000000 fixed;}
Nếu bạn muốn làm theme của mình gồm 2 mảnh Top và Bottom như blog 360 cũ (Chú ý kích thước chiều rộng nên là 1004px):
body{background:#000000;}
#doc2, #doc{background:#000000 url(URL ảnh Top) no-repeat center top;}
#bd{background:transparent url(URL ảnh Bottom) no-repeat center bottom;}
2. Hình nền cho các Module :
Cấu trúc mã CSS đơn giản dùng cho các Module là :
#ModuleName.bd {background:url(URL ảnh) màu nền ;}
Với màu nền là số thứ tự trong
bảng mã màu, có thể thay đổi từ #000000 đến #ffffff hoặc trong suốt: transparent.
ModuleName là tên module. Tên các Module như sau :
- module thông tin cá nhân:
profile_highlight_module
- module fiendlist:
friendlist_module
- module Bài Mới:
article_new
- module Thư Mục Riêng:
folder
- module Comment mới:
comment_new
- module Thống Kê:
statistic
- module Blog yêu thích:
subscribe_highlight
- module Lịch:
calendar
- Các Module tự tạo sẽ có số từ 10001->10010 (module thứ 1 có số là
10001, module thứ 2 có số 10002,...),tuỳ theo đó là Module thứ mấy mà
các bạn điền số thích hợp. VD: Module tự tạo thứ 1 :
user_mod_10001
3. Ảnh nền Bảng tin nhắn:
BODY.guestbook {BACKGROUND:url(URL ảnh) #000000 fixed;}
4. Ảnh nền của trang Profiles:
BODY.profile_view {BACKGROUND:url (URL ảnh) #000000 fixed;}
5. Ảnh nền trong mỗi Entry:
.mod-alist-full .main-bd{background:#FFFFFF url(URL ảnh);}
6. Ảnh nền của tiêu đề mỗi Entry: nên chọn 1 ảnh nhạt, hoa trái hay họa tiết trừu tượng:
.mod-alist-full.mail-hd{background:#FFFFFF url(URL ảnh)}
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)
