[TUT] Icon riêng cho từng box bằng CSS3 cho PunBb và PhpBB2

by **Bui Minh Phong™** 30/3/2013, 8:55 pm

DEMO:

[TUT] Icon riêng cho từng box bằng CSS3 cho PunBb và PhpBB2 Dkd10

b1 :
vào Display TemplatesQuản Lý Tổng Thể index_box tìm :

Code:: [img]http://diendan.chinhphuc.info/%7Bcatrow.forumrow.FORUM_FOLDER_IMG%7D[/img]

Sửa lại thành :

Code:: [img]http://diendan.chinhphuc.info/%7Bcatrow.forumrow.FORUM_FOLDER_IMG%7D[/img]

b2 :
Vào Picmanagerment Mã mở rộng icons for the forum :

Thay mục icons url theo bảng dưới đây

Phần tử giao diện	Pictures	Icon url (Internet address)
Nhóm chuyên mục :		[You must be registered and logged in to see this link.] class="readico"
Nhóm chuyên mục - New :		[You must be registered and logged in to see this link.] class="unreadico"
Nhóm chuyên mục - Khoá :		[You must be registered and logged in to see this link.] class="lockico"
Diễn Đàn :		[You must be registered and logged in to see this link.] class="readico"
Diễn Đàn - New :		[You must be registered and logged in to see this link.] class="unreadico"
Diễn Đàn - Khoá :		[You must be registered and logged in to see this link.] class="lockico"

(Lưu ý : thay xong hết mới nhấn nút
Chấp nhận
)

b3 :
Vào CSS Chèn code dưới đây vào dưới cùng trong mục CSS Stylesheet

Code:: .readico, .unreadico, .lockico { width: 17px; height: 17px; background: url('http://2img.net/i/fa/punbb/status.png') no-repeat center } .readico { opacity : 0.7; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .unreadico { background-image: url('http://2img.net/i/fa/punbb/status_unread.png'); opacity: 1 } .lockico { background-image: url('http://2img.net/i/fa/m/category_locked1.gif') }

b4 :
Muốn chèn thêm icon cho 1 box thì bạn thêm phần dưới đây vào CSS

img[alt="ten box"] {
background: url('link icon');
background-size: 17px
}

trong đó :
ten box là tên của box muốn thay icon
link icon là icon cần thay cho box đó.

chỉ dùng dc trên các trình duyệt hỗ trợ Css3: chrome , firefox , opera ,safari , >= IE9 ...

Ligerv.

[You must be registered and logged in to see this link.]