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

[ligerv]

DEMO:

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

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Sửa lại thành :

Code:

                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.FORUM_NAME}" />

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 :		https://2img.net/i/fa/empty.gif" class="readico"
Nhóm chuyên mục - New :		https://2img.net/i/fa/empty.gif" class="unreadico"
Nhóm chuyên mục - Khoá :		https://2img.net/i/fa/empty.gif" class="lockico"
Diễn Đàn :		https://2img.net/i/fa/empty.gif" class="readico"
Diễn Đàn - New :		https://2img.net/i/fa/empty.gif" class="unreadico"
Diễn Đàn - Khoá :		https://2img.net/i/fa/empty.gif" 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.

[Lowie]

Bài viết rất cụ thể và mình lại là người bóc tem.

[Kid Knight]

học css mấy bửa h mà chưa biết đến cái này á

[handsomevip007]

Code B3 có tác dụng gì thế bác ligerv

[Ocean Sapphire]

tuyệt thật like

[ligerv]

Code B3 có tác dụng gì thế bác ligerv

ah để nhũng bõ nào k chèn icon và trình duyệt nà k hỗ trợ css3cũng có icon mặc định , và icon riêng phân biệt có bài mới với k có bài mới .

[baivong]

Mình thì dùng cái icon trong phần giới thiệu chuyên mục luôn, nếu là ảnh trong Image URL thì selector là .tcl img[style="float:left"], cho nó lệch qua trái chút là thành icon chuyên mục, phân biệt bài mới thì dùng js tìm icon mặc định rồi tô màu tương ứng, dùng cho version nào cũng được

[Sponsored content]