Thay thế các biểu tượng soạn thảo với Font Awesome

[PVS]

Vnxf.vn - Đâ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 với 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 include Font Awesome trừ khi style của bạn đã được đi kèm với nó hoặc bạn có plugin cài đặt XenForo Gallery chính thức (nó sẽ thêm Font tuyệt vời 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 vào:

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

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

Bước 2:
Bây giờ mở EXTRA.CSS của bạn

Dán vào nó đoạn code sau:

.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 soạn thảo. Bạn có thể thay đổi tất cả các màu sắc bằng cách thay đổi nó vào phần này của CSS:

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

Thay đổi màu sắc cá nhân
Bạn cũng có thể thêm màu sắc cá nhân vào 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 mình đã thêm nó vào color changer:

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

BBCodes 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 mình bao gồm các biểu tượng soạn thảo mặc định)

Nguồn: xenforo.com​

 

[Nguyễn Phú Hưng]

Dùng mặc định vẫn đẹp hơn

 

[PVS]

chỉ là up lên cho bạn nào muốn sự khác biệt thôi mà

 

[THB]

9 người 10 ý. Ai thấy đẹp thì làm.