Tutorial 2x Status icon with text - Biểu tượng trạng thái có văn bản cho XenForo 2

[PVS]

Status icon with text - Biểu tượng trạng thái có văn bản cho XenForo 2

Các biểu tượng trạng thái hiển thị cho chúng ta một loại chủ đề hoặc chỉ khi một chủ đề được ghim, đã xem, v.v. Chúng có thể hữu ích.

​

Nhưng chúng ta có thể mở rộng tùy chỉnh hơn một chút để có như sau:

​

Như bạn có thể thấy, biểu tượng có thể trông giống như một nhãn có văn bản. Có lẽ bạn có thể thấy điều này hữu ích cho diễn đàn của bạn. Nếu không, chỉ cần bỏ qua nó.

Để đạt được điều này, chỉ cần thêm code sau vào template extra.less của bạn:

/* Status icon with text */
.structItem-statuses .fa-question-circle:before { /* icon */
    color: #fff !important;
    background: #007bff;
    padding: 2px 0px 2px 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    line-height: ((@xf-lineHeightDefault) * .9);
}

.structItem-statuses .fa-question-circle:after { /* text after icon */
    content: "Question";
    color: #fff;
    background: #007bff;
    padding: 1px 4px 2px 2px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-family: @xf-fontFamilyUi;
}
/*********/

Để thay đổi văn bản thành bất kỳ thứ gì khác, chỉ cần tìm đến thuộc tính content và chỉnh sửa nó. Nó không phải là lý tưởng cho các diễn đàn đa ngôn ngữ (trong trường hợp đó, mọi ngôn ngữ nên sử dụng phong cách riêng và dán mã khác nhau vào đó).

Phụ thuộc vào tất cả các cài đặt khác của bạn, bạn có thể cần điều chỉnh.

Kiểm tra biểu tượng trạng thái và thuộc tính của nó và thay đổi .fa-question-circle trong đoạn code trên. Hoặc chỉ cần sao chép-dán code và thêm tùy chỉnh cho biểu tượng trạng thái khác với văn bản và màu sắc khác.

Một số ví dụ khác về biểu tượng trạng thái có văn bản và tiền tố chủ đề:

​

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

Nguồn: xenforo.com​

 

[Mai Cuong]

Ngon... Đúng cái đang tìm thank b