[TUTs] Việt hóa Post option

  Bài viết hay nhất1
Đâ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
  Bài viết hay nhất2
rất tiện
  Bài viết hay nhất3
Thế thì khác gì CSS hóa button?
  Bài viết hay nhất4

@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.
  Bài viết hay nhất5
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
  Bài viết hay nhất6

@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>');
  });
});
  Bài viết hay nhất7
@KirigayaKazuto not work :(
  Bài viết hay nhất8
Quăng cái link forum lên xem.
  Bài viết hay nhất9
http://studentroom.ace.st/
acctest: Tester
mk: devs.forumvi.com123
  Bài viết hay nhất10
You cannot reply to topics in this forum