[TUTs] zzPrefix - Màu nền cho tiền tố trên tiêu đề

  Bài viết hay nhất1
First topic message reminder :

zzPrefix - Màu nền cho tiền tố trên tiêu đề


Bạn nào hay ghé qua các diễn đàn Xenforo sẽ biết cái này, tên gốc là Thread Prefix Listing.
Forumotion thì vốn thiếu thốn sẵn, thấy cái gì hay thì ta mô phỏng lại.

Chức năng

zzPrefix sẽ làm nổi bật các tiền tố đầu tiêu đề bằng cách chuyển các từ đặt trong dấu ngoặc vuông [], sang dạng HTML để mình có thể thêm CSS màu nền cho nó.


Demo


Tiền tố trên Thống kê bài viết


Tiền tố tại các khu vực khác


Hướng dẫn


Bước 1

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In all the pages

Code:
function lang_vi(a) {
   a = a.toLowerCase();
   a = a.replace(/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5/g, "a");
   a = a.replace(/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5/g, "e");
   a = a.replace(/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129/g, "i");
   a = a.replace(/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1/g, "o");
   a = a.replace(/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef/g, "u");
   a = a.replace(/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9/g, "y");
   a = a.replace(/\u0111/g, "d");
   a = a.replace(/\W+/g, "-");
   return a.replace(/^\-+|\-+$/g, "")
}
$(function () {
   $("a[href^='/t'], a[href^='http://" + location.host + "/t']").html(function () {
      var a = $(this).text();
      if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
         return '<span class="prefix ' + lang_vi(a) + '">' + a.slice(1,-1) + "</span>"
      })
   });
});

Lưu ý:
+ Nếu bạn đang sử dụng code trong bài Việt hóa URL thì trong đó đã có sẵn hàm lang_vi, nên bạn hãy xóa hàm này đi (Dòng 1 - 12).
+ Trong code trên là cách dùng giới hạn từ khóa, mỗi từ cách nhau bằng dấu gạch đứng. Nếu bạn không muốn giới hạn, tức là bất kì từ nào đặt trong dấu ngoặc vuông cũng sẽ chuyển sang dạng tiền tố nổi bật, thì bạn thay đoạn code sau:
Code:
if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a))
...bằng:
Code:
if(/^\[([^\[\]]+)\]/.test(a))

Bước 2

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Code:
.prefix{background:#008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /* Mặc định cho các tiền tố chưa đặt style riêng */
.prefix.code{background:#16499a} /* Màu riêng cho tiền tố code */
.prefix.tool{background:#60a917} /* Màu riêng cho tiền tố Tool */
.prefix.thong-bao{background:#fa6800} /* Màu riêng cho tiền tố Thông báo */
.prefix.zzbaivong{background:#4390df} /* Màu riêng cho tiền tố zzbaivong */

Lưu ý:
+ Ngoài dòng css đầu tiên - mặc định, bạn có thể thêm màu tùy ý theo số tiền tố thường gặp trong diễn đàn của bạn.
+ Khi đặt css, bạn đặt như sau .prefix.TÊN-TIỀN-TỐ.
Tên tiền tố đặt theo nguyên tắc: Viết thường, Không dấu, Ký tự đặc biệt thì thay bằng gạch ngang. Ví dụ:

  • [Thông báo] => .prefix.thong-bao
  • [CODE] => .prefix.code


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất51
http://boomonline3.forumvi.com/
Ko hiểu sao cứ post cái link này thì nó lại mất chữ o là sao nhỉ :(
  Bài viết hay nhất52
Do bộ gõ tiếng Việt.
Xóa background chỗ .prefix nữa(dòng css đầu tiên).
  Bài viết hay nhất53

@Zzbaivong wrote:Do bộ gõ tiếng Việt.
Xóa background chỗ .prefix nữa(dòng css đầu tiên).

Có xoá rồi đó ad ui, xoá hết chừa mỗi có prefix. Code thôi mà vẫn ko đc, nó hiện màu xanh lá là màu nền ko @@
  Bài viết hay nhất54
Đó là màu mặc định mà, xóa nó nữa mới hết :v
  Bài viết hay nhất55
Đã gửi nick admin rùi ad vào xem hộ với @@
  Bài viết hay nhất56
Trong bài hướng dẫn, ở bước 2, dòng 1, ngay đoạn đầu tiên:
Code:
.prefix{background:#008287;
Xóa:
Code:
background:#008287;
Thì nó sẽ mất màu nền.

Xem thêm: http://www.w3schools.com/css/css_background.asp
  Bài viết hay nhất57
Hơi phiền ad tí nhưng đã xoá rùi mà vẫn còn hiện màu

CSS đoạn đó mình thử xoá luôn thành

Code:
.prefix.code{color:#000000} /* Màu riêng cho tiền tố code */
.prefix.tôl{background:#60a917} /* Màu riêng cho tiền tố Tôl */

Nhưng cũng còn bị màu :v chả biết mà đaau mà nó hiện nữa :v

Update: tes thử forum khác đc ùi :3 chắc forum đó bị cái gì rồi :b
  Bài viết hay nhất58
Ở trên khung sửa CSS ấy, có ô Search in CSS, nhập vào: .prefix và bấm Tìm kiếm
  Bài viết hay nhất59
Sao forum này nó ko hiện màu nhỉ

http://vngiaitri.123.st/
  Bài viết hay nhất60
Làm đúng hướng dẫn bài này: http://devs.forumvi.com/t141-oldeditor-editor-thuan-bbcode?showpost=p900
Minh ghi script nào đặt ở đâu thì hãy đặt đúng vị trí như thế.
  Bài viết hay nhất61

@Zzbaivong wrote:Làm đúng hướng dẫn bài này: http://www.devs.cf/t141-oldeditor-editor-thuan-bbcode?showpost=p900
Minh ghi script nào đặt ở đâu thì hãy đặt đúng vị trí như thế.

Thanks ad ^^ cái vị trí khung màu tiền tố trên last nó hơi bị dính xuống mép dưới, cách cách nào cho nó ở giữa ko ad :3
  Bài viết hay nhất62
Thêm vào CSS:
Code:
#left .prefix {
   font-size: 11px;
   margin: 2px 5px 2px 0;
   float: left;
}
  Bài viết hay nhất63
Ad ơi khi vô box thì bị lỗi ntn :(
http://vngiaitri.123.st/f38-forum

  Bài viết hay nhất64
Thế thì thêm #left và trước.
  Bài viết hay nhất65
Thêm index box đúng ko ad và dùng đoạn nào nhỉ :(

Và trên chỗ thanh Diễn đàn >> thế giới di động >> điện thoại >> xyz khi bấm vào topic thì prefix bị chuyển ra ngoài, ko đi cùng với tên topic :(
  Bài viết hay nhất66
http://www.devs.cf/t95p60-tuts-mau-nen-cho-tien-to-tren-tieu-e?showpost=p5304
  Bài viết hay nhất67
hiền m làm theo y như hướng dẫn nhưng ko hiện màu nền tiền tố ?

ai biết facebok ,emai,l yahoo, của zzbaivong cho m xin vs
  Bài viết hay nhất68

@huynh.tan.338 wrote:hiền m làm theo y như hướng dẫn nhưng ko hiện màu nền tiền tố ?

ai biết facebok ,emai,l yahoo, của zzbaivong cho m xin vs

Bạn muốn hỏi hay nhờ người khác sửa. Thì nên để lại demo và nick test. Để pro vào giúp nhé.
  Bài viết hay nhất69
bạn làm cái đó thành công ko vào lam giúp m vs ?
  Bài viết hay nhất70

@huynh.tan.338 wrote:bạn làm cái đó thành công ko vào lam giúp m vs ?

Demo đâu mà giúp.
  Bài viết hay nhất71

@markai30 wrote:
@huynh.tan.338 wrote:bạn làm cái đó thành công ko vào lam giúp m vs ?

Demo đâu mà giúp.

demo tai369.forumvi.com
  Bài viết hay nhất72
sap phpbb3 bị lỗi này vậy ?



demo online : http://gamelau.umbb.net/
  Bài viết hay nhất73

@AnChina wrote:sap phpbb3 bị lỗi này vậy ?



demo online : http://gamelau.umbb.net/
thêm vào css:
Code:
dd.lastpost span {display: compact!important;}
  Bài viết hay nhất74

@anhdausai wrote:
@AnChina wrote:sap phpbb3 bị lỗi này vậy ?



demo online : http://gamelau.umbb.net/
thêm vào css:
Code:
dd.lastpost span {display: compact!important;}

Vẫn thế thui ? có thay đỗi gì đâu huynh ?
  Bài viết hay nhất75
Em đã làm theo hướng dẫn nhưng không thấy hiện màu
Demo online: iterforum.forumvi.com
nick test: memtest001
mật khẩu: Bang942850
You cannot reply to topics in this forum