Phía trên là một số CSS hiện tại đang dùng trên 360+ của 360themes. Xin phép được đóng góp một chút những gì mình biết.
Đầ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.
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)
Trên đây là một số vấn đề mìnn đã nghiên cứu dựa trên CSS của một
số blog 360+ VN và HK. Ngoài ra trong đoạn code phí trên bài này còn có
1 phần làm trong suốt phần Blash nhưng mà tôi thấy điều đó không cần
thiết nên không liệt kê cụ thể trên đây! Mọi thắc mắc và yêu cầu các
bạn có thể hỏi tại 360+ của tôi (LINK dưới Sign)
Trích từ bài của hanamibuu trên 360themes.comThật ra canh phải tiêu đề hoàn toàn tất cả các module cũng ko hẳn là
cách hay, vì tiêu đề của mỗi module có độ dài ngắn khác nhau, cho nên
với module có tiêu đề ngắn nhìn ko đc hay lắm. Các bạn có thể tùy vào
từng module mà canh phải hoặc canh giữa cho phù hợp, đồng thời có thể
tùy chỉnh vị trí của ảnh nền cho phù hợp hơn nữa bằng cách thay đổi giá
trị của 2 tham số phía sau url của ảnh:
Code:
background:transparent url(http://***.***) no-repeat X Y;text-align:{left/right/center};
X là chiều thằng đứng, Y là chiều ngang tính theo đơn vị pixel.
Như bình thường mọi người thường để X Y là "
left top" để căn vào góc trên bên trái. Chẳng hạn giờ tôi muốn icon chèn vào lùi vào trong (dịch sang bên phải) 5 pixels thì code là:
Code:
background:transparent url(http://***.***) no-repeat 5px top; //hoặc: 5 0
Trích:
Originally Posted by hienkhanh_becks
Chèn
icon vào background thì ko thể làm thanh bả dạng glass giống mình được,
dù sao thì 360team đã cố gắng hết sức, mình xài FireBug tìm code CSS
cũng cả nửa ngày trời  |
Nếu bạn chèn icon vào thẻ
h2 còn background của title bar chèn vào class
.hd
thì 2 cái này hoàn toàn có thể sử dụng đồng thời, chỉ có điều là độ
trong suốt của background sẽ tăng lên một chút tùy vào độ opacity của 2
ảnh icon và background
.
Trích từ bài của Swirl trên 360themes.com
