Thay thế Prefixes bằng icon cho xenforo

[PVS]

Sau đây mình sẽ hướng dẫn các bạn thay thế prefix bằng icon cho xenforo.

1. Upload file đính kèm lên host, ngang admin.php

2. Vào Admin CP -> Applications -> Thread Prefixes -> Create New Thread Prefix

Ví dụ: Ở đây bạn có 1 prefix tên là PS3 và mình sẽ hướng dẫn tạo icon cho prefix này. Chú ý tick vào "Other, using custom css class name" để chuyển prefix sang ảnh icon nhé.

​

3. Bước tiếp theo, bạn vào templates EXTRA.css và thêm vào bên dưới

.icon-ps3 {
background: transparent url(tags/ps3.png) no-repeat top left;
}

* Bạn có thể phải điều chỉnh một số css nếu bạn không sử dụng những hình ảnh dưới đính kèm.

Đây là css cho tất cả các biểu tượng dưới đính kèm.

/* ICONS */
.icon {
display: block;
text-indent: -3000px;
width: 60px;
height: 15px;
}
.icon-games {
background: transparent url(tags/games.png) no-repeat top left;
}
.icon-pcgames {
background: transparent url(tags/pcgames.gif) no-repeat top left;
}
.icon-photoshop {
background: transparent url(tags/photoshop.gif) no-repeat top left;
}
.icon-****post {
background: transparent url(tags/****post.jpg) no-repeat top left;
}
.icon-art {
background: transparent url(tags/art.jpg) no-repeat top left;
}
.icon-photo {
background: transparent url(tags/photos.png) no-repeat top left;
}
.icon-rant {
background: transparent url(tags/rant.gif) no-repeat top left;
}
.icon-en {
background: transparent url(tags/en.gif) no-repeat top left;
}
.icon-computers {
background: transparent url(tags/computers.gif) no-repeat top left;
}
.icon-news {
background: transparent url(tags/news.png) no-repeat top left;
}
.icon-stupid {
background: transparent url(tags/stupid.gif) no-repeat top left;
}
.icon-repeat {
background: transparent url(tags/repeat.gif) no-repeat top left;
}
.icon-science {
background: transparent url(tags/science-posticon.png) no-repeat top left;
}
.icon-politics {
background: transparent url(tags/politics.gif) no-repeat top left;
}
.icon-request {
background: transparent url(tags/request.png) no-repeat top left;
}
.icon-movies {
background: transparent url(tags/movies.gif) no-repeat top left;
}
.icon-help {
background: transparent url(tags/help.gif) no-repeat top left;
}
.icon-humour {
background: transparent url(tags/humour.png) no-repeat top left;
}
.ticon-gross {
background: transparent url(tags/gross.gif) no-repeat top left;
}
.icon-wip {
background: transparent url(tags/wip.png) no-repeat top left;
}
.icon-beta {
background: transparent url(tags/beta.gif) no-repeat top left;
}
.icon-postyour {
background: transparent url(tags/postyour.png) no-repeat top left;
}
.icon-question {
background: transparent url(tags/question.png) no-repeat top left;
}
.icon-steam {
background: transparent url(tags/steam.png) no-repeat top left;
}
.icon-wii {
background: transparent url(tags/wii.jpg) no-repeat top left;
}
.icon-360 {
background: transparent url(tags/360.jpg) no-repeat top left;
}
.icon-youtube {
background: transparent url(tags/youtube.jpg) no-repeat top left;
}
.icon-music {
background: transparent url(tags/music.gif) no-repeat top left;
}
.icon-ps3 {
background: transparent url(tags/ps3.png) no-repeat top left;
}
.icon-love {
background: transparent url(tags/love.jpg) no-repeat top left;
}
.icon-release {
background: transparent url(tags/release.png) no-repeat top left;
}
.icon-tv {
background: transparent url(tags/tv.gif) no-repeat top left;
}
.icon-map {
background: transparent url(tags/map.jpg) no-repeat top left;
}
.icon-nsfw {
background: transparent url(tags/nsfwpng) no-repeat top left;
}
.icon-school {
background: transparent url(tags/school.gif) no-repeat top left;
}
.ticon-link {
background: transparent url(tags/link.gif) no-repeat top left;
}
.icon-tutorial {
background: transparent url(tags/tutorial.png) no-repeat top left;
}
.icon-cpp {
background: transparent url(tags/cpp.png) no-repeat top left;
}
.icon-php {
background: transparent url(tags/php.png) no-repeat top left;
}
.icon-html {
background: transparent url(tags/html.png) no-repeat top left;
}
.icon-csharp {
background: transparent url(tags/csharp.png) no-repeat top left;
}

Demo bộ icon đính kèm

​

Chúc bạn thành công.

Nguồn: muaban47.net​

 

[hungnpna]

Cảm ơn bqt. Để tối về mình test thử.

 

[sdfsdfosdmk]

thanks