[TUTs] Việt hóa Post option

Đây là cách để đưa các nút Quote, Edit, Delete,... từ dạng hình ảnh về dạng văn bản thuần.

Lưu ý: Tut này được viết dựa trên mã nguồn mặc định của viewtopic_body trên tất cả các version. Nếu bạn đã đổi template này thì phải kiểm tra lại phần tử bọc ngoài của các nút này.

Đây là kết quả bạn có được:
https://jsfiddle.net/maclucpham/Lgk8rh1u/embedded/result/

Hướng dẫn

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Chèn đoạn này vào CSS:

Code:

/* Việt hóa postOption */
a[href^="/"][href*="mode="][href*="p="] {display:inline-block;padding:2px 8px;}
a[href^="/"][href*="mode="][href*="p="] .optionpLink {padding-left:5px;}

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : Việt hóa postOption
Placement : In the topic
Javascript Code * :

Code:

$(function() {
  var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];
  var topicOption = {
    'edit': {
      text: "Sửa bài viết",
      icon: "pencil"
    },
    'delete': {
      text: "Xóa bài viết",
      icon: "times"
    },
    'quote': {
      text: "Trích dẫn",
      icon: "comment"
    },
    'ip': {
      text: "Xem IP",
      icon: "flag"
    }
  };
  $.each(topicOption, function(mode, val) {
    $(selection).find('a[href*=' + mode + ']').html('<i class="fa fa-' + val.icon + '"></i><span class="optionpLink">' + val.text + '</span>');
  });
});

Ghi chú:

Trong hướng dẫn trên ở dòng thứ 2, các bạn sẽ thấy số 0:

Code:

 var version = 0;

Đây là phiên bản Forumotion của bạn. Mặc định mình để là invision
Thay vào đó là một trong các giá trị sau tùy theo phiên bản của forum bạn:
0 : Invision
1 : punBB & phpBB2
2 : phpBB3

Nếu template viewtopic_body của bạn đã thay đổi thì dòng thứ 2 và 3:

Code:

 var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];

Các bạn sử thành

Code:

 var selection = "selector";

Thay selector thành Phần tử bọc ngoài của postOption


Nếu forum bạn chưa có bộ Font Awesome thì vào over_header đặt sau

Code:

{CSS}

đoạn code này:

Code:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

Để tìm hiểu về bộ font này, mời các bạn xem qua bài viết: [Tips] Huớng dẫn sử dụng Font Awesome

Nguồn

KirigayaKazuto (Mạc Lục Phàm) - devs.forumvi.com

---

Tags: #mod #tutorial #tut #việt-hóa #post-option

rất tiện

Thế thì khác gì CSS hóa button?

vi01239984564 wrote:Thế thì khác gì CSS hóa button?

Kết quả giống, còn cách làm khác.
Nếu chỉ dùng CSS thì sẽ tốn nhiều CSS hơn mới có thể vừa thêm Icon, vừa Việt hóa, nếu bạn cần trang trí thì tốn thêm một khoản CSS nữa.
Cách của @KirigayaKazuto thì JS sẽ làm phần Việt hóa và thêm Icon nên bạn chỉ cần thêm một ít CSS để trang trí là đẹp.

Forumotion giới hạn lượng CSS được thêm vào nên bạn thấy cách nào thuận lợi thì dùng.

e có thử thêm newtopic nhưng ko thành công :( có giải pháp nào ko ạ, hay chỉ việt hóa đc quote,edit,del

Kelvin_Kingleon wrote:e có thử thêm newtopic nhưng ko thành công :( có giải pháp nào ko ạ, hay chỉ việt hóa đc quote,edit,del

Code:

$(function() {
  var $selectionForums = $('.posting-buttons');
  var forumsOption = {
    'Gửi bài mới': {
      text: "Gửi bài mới",
      icon: "share"
    },
    'Trả lời chủ đề này': {
      text: "Trả lời",
      icon: "quote-right"
    },
    'bị khóa': {
      text: "Đã khóa",
      icon: "minus-circle"
    }
  };
  $.each(forumsOption, function(mode, val) {
    $selectionForums.find('a[href^="/post"] > img[alt*="' + mode + '"]').replaceWith('<i class="fa fa-' + val.icon + '"></i><span class="optionpLink">' + val.text + '</span>');
  });
});

@KirigayaKazuto not work :(

Quăng cái link forum lên xem.

http://studentroom.ace.st/
acctest: Tester
mk: devs.forumvi.com123