Replace editor icons with Font Awesome - Thay thế các icon editor bằng Font Awesome

[PVS]

Replace editor icons with Font Awesome - Thay thế các icon editor bằng Font Awesome

Đây là một chỉnh sửa đơn giản để thay thế các biểu tượng trong trình soạn thảo mặc định của XenForo thành biểu tượng Font Awesome. Trông rất tuyệt trên điện thoại di động, và cho phép bạn dễ dàng thay đổi màu sắc

​

Bước 1.)
Bạn cần phải bao gồm Font Awesome trừ khi phong cách của bạn đã được đi kèm với nó hoặc bạn có plugin chính thức XenForo Gallery cài đặt (nó thêm Font Awesome cho bạn trên tất cả các trang).

Mở PAGE_CONTAINER
Tìm:

<!--XenForo_Require:CSS-->

Thêm đoạn code sau đây trên nó

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Bạn có thể tìm phiên bản mới nhất tại đây.

Bước 2.
Bây giờ mở EXTRA.CSS của bạn
Thêm code dưới vào:

.Responsive .redactor_toolbar li a
{
text-indent: 0px;
text-align: center;
background-image: none !important;
}
.Responsive .redactor_toolbar li a:before, html .redactor_dropdown a:before
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: @textCtrlText;
line-height: 24px;
}
html .redactor_toolbar li a:hover
{
background-image: none !important;
}
html .redactor_dropdown a
{
padding-left: 0 !important;
background-image: none !important;
}
html .redactor_dropdown a:before
{
margin-right: 10px;
}
html .redactor_toolbar li a.redactor_btn_bold:before       {content: "\f032";}
html .redactor_toolbar li a.redactor_btn_italic:before       {content: "\f033";}
html .redactor_toolbar li a.redactor_btn_underline:before     {content: "\f0cd";}
html .redactor_toolbar li a.redactor_btn_fontcolor:before     {content: "\f042";}
html .redactor_toolbar li a.redactor_btn_fontsize:before     {content: "\f034";}
html .redactor_toolbar li a.redactor_btn_fontfamily:before     {content: "\f031";}
html .redactor_toolbar li a.redactor_btn_createlink:before     {content: "\f0c1";}
html .redactor_toolbar li a.redactor_btn_unlink:before       {content: "\f127";}
html .redactor_toolbar li a.redactor_btn_alignment:before     {content: "\f036";}
html .redactor_toolbar li a.redactor_btn_unorderedlist:before     {content: "\f0ca";}
html .redactor_toolbar li a.redactor_btn_orderedlist:before     {content: "\f0cb";}
html .redactor_toolbar li a.redactor_btn_outdent:before       {content: "\f03b";}
html .redactor_toolbar li a.redactor_btn_indent:before       {content: "\f03c";}
html .redactor_toolbar li a.redactor_btn_smilies:before       {content: "\f118";}
html .redactor_toolbar li a.redactor_btn_image:before       {content: "\f03e";}
html .redactor_toolbar li a.redactor_btn_media:before       {content: "\f008";}
html .redactor_toolbar li a.redactor_btn_insert:before       {content: "\f067";}
html .redactor_toolbar li a.redactor_btn_custom_gallery:before     {content: "\f030";}
html .redactor_toolbar li a.redactor_btn_draft:before       {content: "\f0c7";}
html .redactor_toolbar li a.redactor_btn_undo:before       {content: "\f0e2";}
html .redactor_toolbar li a.redactor_btn_redo:before       {content: "\f01e";}
html .redactor_toolbar li a.redactor_btn_removeformat:before     {content: "\f12d";}
html .redactor_toolbar li a.redactor_btn_switchmode:before     {content: "\f0f6";}
html .redactor_dropdown a.alignLeft:before         {content: "\f036";}
html .redactor_dropdown a.alignCenter:before         {content: "\f037";}
html .redactor_dropdown a.alignRight:before         {content: "\f038";}
.redactor_dropdown a.quote:before           {content: "\f10d";}
.redactor_dropdown a.spoiler:before           {content: "\f024";}
.redactor_dropdown a.code:before           {content: "\f121";}
.redactor_dropdown a.strikethrough:before         {content: "\f0cc";}
.redactor_dropdown a.saveDraft:before           {content: "\f0c7";}
.redactor_dropdown a.deleteDraft:before           {content: "\f014";}

Và bạn đã hoàn tất!

Thay đổi màu sắc
Theo mặc định nó sử dụng: @textCtrlText cho màu sắc của tất cả các biểu tượng editor. Bạn có thể thay đổi tất cả các màu sắc bằng cách thay đổi nó trong phần này của CSS:

.Responsive .redactor_toolbar li a:before, html .redactor_dropdown a:before

Thay đổi màu sắc riêng
Bạn cũng có thể thêm màu sắc riêng cho mỗi biểu tượng nếu bạn chọn:

Bạn có thể làm điều này bằng cách thêm màu sắc cho bộ chọn cụ thể, trong trường hợp này ở trên tôi đã thêm nó vào sự thay đổi màu sắc của:

html .redactor_toolbar li a.redactor_btn_fontcolor:before {
color: #00BDC1;
content: "\f042";
}

BB Code bên thứ ba
Tùy thuộc vào thiết lập của bạn, bạn có thể có các biểu tượng bổ sung mà bạn sẽ cần phải thêm code của riêng bạn (css của tôi bao gồm các biểu tượng soạn thảo mặc định)

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

Nguồn: xenforo.com​

 

[MacKen]

Mình đã đọc bài này lâu rồi..... nhưng chua test bởi vì ie<9 vẫn còn dùng trong cuộc sống người nghèo .... liệu có hiện trên ie ko?

 

[zzvenuszz]

Thề là không hiểu gì luôn. PAGE_CONTAINER ở đâu?

 

[tuna]

Có cách nào thay thế cái editor mặc định của xenforo hoặc chỉnh nó cho gọn lại ko các bác, kiểu như chỉ khi nào click vào thì nó mới hiện full thanh công cụ ấy