[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ất26
@tinhcoanhgapem wrote:Chào Anh! Em làm giống như hướng dẫn những chỉ đổi màu được chữ "Soft" thôi, còn chữ THÔNG BÁO, Hướng dẫn, Thủ thuật ...Nó không đổi màu theo ý mình được! Mong Anh giúp đỡ! Thanks!
Demo: http://thegioi-tinhoc.forumvi.com/
trong hướng dẫn ở đoạn cuối có
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

và cái bạn viết là
Code:
.prefix.Thủ thuật{background:#16499a}
.prefix.Hướng dẫn{background:#60a917}
.prefix.THÔNG BÁO{background:#fa6800}
như thế là sai
phải viết thế này mới đúng
Code:
.prefix.thu-thuat{background:#16499a}
.prefix.huong-dan{background:#60a917}
.prefix.thong-bao{background:#fa6800}
viết k dấu - k viết hoa - thay "khoảng trắng" bằng "-"
  Bài viết hay nhất27
Cảm ơn Anh anhoang_qn nhiều! Mới được Anh giải đáp về vấn đề rê chuột xong! Hi quá vui!
  Bài viết hay nhất28
Tất cả đều ok hết! Nhưng tới chữ : "Giải trí" sao nó không hiện màu vậy! giúp em với! Thanks Anh!
http://thegioi-tinhoc.forumvi.com/
  Bài viết hay nhất29
@tinhcoanhgapem wrote:Tất cả đều ok hết! Nhưng tới chữ : "Giải trí" sao nó không hiện màu vậy! giúp em với! Thanks Anh!
http://thegioi-tinhoc.forumvi.com/
kiểm tra xem đã thêm js "giải trí" chưa
xem đã thêm css .prefix.giai-tri{background:hex} chưa
nếu chưa thêm thì thêm vào - vì mình view trang của bạn chả thấy cái js vs css của nó @@
  Bài viết hay nhất30
@tinhcoanhgapem wrote:Tất cả đều ok hết! Nhưng tới chữ : "Giải trí" sao nó không hiện màu vậy! giúp em với! Thanks Anh!
http://thegioi-tinhoc.forumvi.com/
Code:
$("a[href^='/t'],a[href^='http://" + location.host + "/t']").html(function () {
   var a = $(this).text();
   return a.replace(/^\b(Thủ thuật|Hướng dẫn|Th|Soft|Phần mềm|PSD|crack|Tin tức|Windows|Ghost)\b|^\bGiải trí\B/i, function (a) {
      return '<span class="prefix ' + lang_vi(a) + '">' + a + "</span>"
   })
});
  Bài viết hay nhất31
Thanks hai anh đã giúp đỡ nhiệt tình! Nhưng em làm nó vẫn không hiện! Em úp code js và css của em

Code js:

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']").html(function(){var a=$(this).text();if(/\b(Thủ thuật|Hướng dẫn|Ghost|Windows|Phần mềm|Soft|Thông báo|Tin tức|PSD|Giải trí)\b/i.test(a))return a.replace(/\b(Thủ thuật|Hướng dẫn|Ghost|Windows|Phần mềm|Soft|Thông báo|Tin tức|PSD|Giải trí)\b/i,function(a){return'<span class="prefix '+lang_vi(a)+'">'+a.replace(/[\[\]]/g,"")+"</span>"})})});

Code css:

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.thu-thuat{background:#008287}
.prefix.huong-dan{background:#60a917}
.prefix.thong-bao{background:#ff0000} 
.prefix.soft{background:#db5fdc}
.prefix.phan-mem{background:#0080ff}
.prefix.psd{background:#fa6800}
.prefix.crack{background:#ffd557}
.prefix.tin-tuc{background:#4fc1c0}
.prefix.windows{background:#253f94}
.prefix.ghost{background:#946ac7}
.prefix.giai-tri{background:#b2b2b2}
  Bài viết hay nhất32
thay đoạn js trên bằng đoạn js này thử
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, "")
}
$("a[href^='/t'],a[href^='http://" + location.host + "/t']").html(function () {
  var a = $(this).text();
  return a.replace(/^\b(Thủ thuật|Hướng dẫn|Th|Soft|Phần mềm|PSD|crack|Tin tức|Windows|Ghost)\b|^\bGiải trí\B/i, function (a) {
      return '<span class="prefix ' + lang_vi(a) + '">' + a + "</span>"
  })
});
(lấy từ replay của admin)
  Bài viết hay nhất33
Thay bằng đoạn js trên thì nó mất hết hiệu ứng luôn anhoang_qn
  Bài viết hay nhất34
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();
      return a.replace(/^\b(Thủ thuật|Hướng dẫn|Th|Soft|Phần mềm|PSD|crack|Tin tức|Windows|Ghost)\b|^\bGiải trí\B/i, function (a) {
         return '<span class="prefix ' + lang_vi(a) + '">' + a + "</span>"
      })
   })
});
  Bài viết hay nhất35
Thanks Anh baivong!
  Bài viết hay nhất36
Cái này em không hiểu lắm! Em thêm vài cái tiền tố nữa thì nó lại không hiện! giúp em với bác ơi!
Cho em xin code js: Thủ thuật,Đồ họa,Thông báo,Soft,Phần mềm,PSD,crack,Tin tức,Windows,Ghost,Giải trí,Hỏi đáp

Demo: http://thegioi-tinhoc.forumvi.com/
  Bài viết hay nhất37
Chỉ cần để tiền tố trong ngoặc vuông, và thêm CSS theo hướng dẫn.
  Bài viết hay nhất38
Ok! Thanks bác! Đã hiểu vấn đề
The author of this message was banned from the forum - See the message
  Bài viết hay nhất40
Thêm vào CSS của prefix
Code:
.prefix{display:none;}
Muốn hiện ở đâu thì thêm vào display:inline-block, ví dụ:
Code:
#recent_topics .prefix{display:inline-block}
The author of this message was banned from the forum - See the message
  Bài viết hay nhất42
sao em làm nó k hiện vậy anh.
demo http://hd-game.5forum.net/
  Bài viết hay nhất43
@DuyKyo wrote:sao em làm nó k hiện vậy anh.
demo http://hd-game.5forum.net/
Đọc phần lưu ý.
  Bài viết hay nhất44
@Zzbaivong wrote:
@DuyKyo wrote:sao em làm nó k hiện vậy anh.
demo http://hd-game.5forum.net/
Đọc phần lưu ý.
em làm đúng theo hd mà vẫn k đc
  Bài viết hay nhất45
Đúng thì nó thế này:
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 (/^\[(Thông Báo Từ BQT|Tuyển dụng)\]/i.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
         return '<span class="prefix ' + lang_vi(a) + '">' + a.slice(1, -1) + "</span>"
      })
   })
});
  Bài viết hay nhất46
Thanks bác
  Bài viết hay nhất47
Làm sao đễ hiện trong TAB nhỉ ? demo : http://gamelau.5forum.net/
  Bài viết hay nhất48
Gửi đoạn code màu nền bạn đang dùng và đoạn code tải 2 chuyên mục lên, mình sửa lại cho.
  Bài viết hay nhất49
Không biết làm sao mà thử bỏ background đi rồi mà nó vẫn còn màu là sao nhi :v
http://bomonline3.forumvi.com/
  Bài viết hay nhất50

boom wrote:Không biết làm sao mà thử bỏ background đi rồi mà nó vẫn còn màu là sao nhi :v
http://bomonline3.forumvi.com/
Không truy cập được.
  Bài viết hay nhất51
You cannot reply to topics in this forum