Tổng hợp Code Trang trí BẢNG TIN NHẮN


Module Bảng Tin nhắn (#feature_link_gb ) là module khi click vào sẽ dẫn đến 5 lời bình quick comment.

Module Bảng tin nhắn (#feature_link_gb) có 3 phần ảnh chính, ta sẽ bám vào 3 phần này để đặt code.

Phần 1: Phần mái của module Bảng Tin Nhắn:
Các bạn có thể gắn ghép những hình ảnh đẹp nhất ở code này
( Hint: Chiều cao tùy ý, chiều rộng mặc định là 140~150 px)

#feature_link_gb .rc {background:transparent url(Link ảnh) no-repeat center top;height:Apx;}

Ví dụ akj có ảnh thế này

với chiều cao ảnh là 40px , ta có code:

#feature_link_gb .rc {background:transparent url(http://i698.photobucket.com/albums/vv348/hinhanhaki/message.png) no-repeat center top;height:40px;}

Module Bảng tin nhắn lúc này sẽ có dạng:

Phần 2: Code cho phần tiêu đề module Bảng Tin Nhắn:
<2.1> Đặt ảnh nền cho tiêu đề:
( Hint: Chiều cao mặc định là 25px, rộng mặc định là 140~150px)

#feature_link_gb .hd .titlebar .hd{background:transparent url(link ảnh) center;}

<2.2> Làm trong suốt tiêu đề:

#feature_link_gb .hd .titlebar .hd{background:transparent;}

<2.3> Chỉnh màu cho chữ tiêu đề Bảng Tin nhắn:

#feature_link_gb h2{color:#FFFFFF;}

<2.4> Làm cho chữ cái đầu dòng đổi màu và nổi bật hơn

#feature_link_gb h2:first-letter {color:#FFFFFF;font-size:large;}

Minh họa:

<2.5> Căn chỉnh chữ Bảng Tin nhắn trong tiêu đề:

#feature_link_gb .hd .titlebar .hd h2{text-align:right;font-size:15px}
Mặc định là canh trái, muốn canh phải thỉ dùng right, canh giữa thì center. Thay kích thước chữ theo ý muốn.

<2.6> Đặt icon trong tiêu đề module Bảng Tin nhắn

#feature_link_gb h2{background:transparent url(link ảnh) no-repeat right top;}

Minh họa:

<2.7> Làm biến mất tiêu đề:

#feature_link_gb .rc_bd .rc_bc .hd .titlebar, #feature_link_gb .rc_bd .rc_bc .hd .titlebar h2 {height:0;font-size:0;}

Phần 3: Code cho phần đuôi module Bảng Tin nhắn: ( Phần đuôi này nằm bên dưới border nên nếu có dùng border thì ko làm phần này)
(Hint: chiều cao tùy ý, rộng 140~150px)

#feature_link_gb .rc_ft{background:transparent url(link ảnh) no-repeat left top;height:Apx;}

Minh họa:

Phần 4: Code xóa đường viền module Bảng tin nhắn:

#feature_link_gb .rc, #feature_link_gb .rc div, #feature_link_gb .rc_bd, #feature_link_gb .rc_bd .rc_bc, #feature_link_gb .rc_ft, #feature_link_gb .rc_ft div, #feature_link_gb .rc_bd .rc_bc .hd, #feature_link_gb .rc_bd .rc_bc .hd .titlebar {background:transparent;}

Phần 5: Code làm trong suốt phần bên trong Bảng tin nhắn khi click vào:
( Mô tả: khi click vào chữ Bảng Tin Nhắn sẽ hiện ra 1 Bảng các tin nhắn)

#gb_msg .rc_bd .rc_bc .hd .titlebar .hd,
#gb_msg .rc_bd .rc_bc .hd .titlebar
{background:transparent;}

#gb_msg .rc {background:transparent;}
#gb_msg .rc_ft {background:transparent;}
#gb_msg .rc_bd {background:transparent;}
#gb_msg .rc_bd div.rc_bc, #gb_msg .rc_ft div, #gb_msg .rc div {background:transparent;}
#gb_msg .rc_bd .rc_bc .bd {background:transparent;}
#gb_msg .ft {background:transparent;}

Mặc định trong các code là mã màu trắng #FFFFFF , các bạn thay mã màu tùy ý nhé 🙂 . Với những code hỗ trợ trên sau khi thiết kế theo ý bạn thì module Bảng Tin nhắn sẽ nổi bật hơn. Còn không biết cám ơn mình nữa.

Advertisements
This entry was posted on 10.12.2009, in Khác. Bookmark the permalink.