Tutorial 2x Editor toolbar button icon styling - Tạo kiểu cho biểu tượng nút Editor toolbar XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,842
Được Like
8,544
Editor toolbar button icon styling - Tạo kiểu cho biểu tượng nút Editor toolbar XenForo 2

Hướng dẫn đơn giản này sẽ giải thích cách tạo kiểu cho các biểu tượng nút trên thanh công cụ của trình soạn thảo.

Việc sử dụng trình kiểm tra trình duyệt (F12 -> Elements) sẽ là cần thiết để xác định id và tên dữ liệu ... hoặc phỏng đoán tốt.

Nếu chúng ta kiểm tra mã cho thanh công cụ chuẩn, chúng ta sẽ thấy điều này trong trình kiểm tra trình duyệt:

1611283288507.png

Từ đó chúng ta có thể xác định rằng ba nút đầu tiên có các thuộc tính sau:

Buttonid namedata-cmd name
Remove formattingclearFormatting-1clearFormatting
Boldbold-1bold
Italicitalic-1italic

Chúng ta có thể sử dụng id name và data-cmd name để nhắm mục tiêu các nút cho mục đích tạo kiểu.

Để tạo kiểu cho một nút bằng data-cmd name, hãy sử dụng:
Less:
[data-cmd="clearFormatting"]
{
    color: orange !important;
}

Để tạo kiểu bằng cách sử dụng id name, hãy sử dụng cái này:
Less:
#clearFormatting-1
{
    color: orange;
}

Nếu bạn đã xác định nút là custom bb code editor thì nó sẽ giống như vậy:

1611283767031.png

Ở đây bạn có thể thấy rằng id name là xfCustom_caption-1 và data-cmd name là xfCustom_caption.
Chú thích trong trường hợp này đề cập đến thẻ bbcode được chỉ định khi tạo bbcode:

1611283864353.png

Vì vậy, kết hợp tất cả những thứ đó lại với nhau, đoạn code sau được thêm vào template extra.less:
Less:
[data-cmd="clearFormatting"]
{
    color: orange !important;
}

#bold-1
{
    color: green;
}

#textColor-1
{
    color: blue;
}

[data-cmd="xfCustom_caption"]
{
    color: purple !important;
}

Kết quả sẽ như thế này:

1611283983119.png

Lưu ý rằng đối với các nút có menu thả xuống, việc sử dụng thuộc tính data-cmd để nhắm mục tiêu chúng cũng sẽ dẫn đến việc áp dụng kiểu cho nội dung thả xuống.

Ví dụ:
Less:
[data-cmd="fontSize"]
{
    color: red !important;
}

1611349155501.png

Tuy nhiên, sử dụng id thì lại không như vậy:
Less:
#fontSize-1
{
    color: red;
}

1611349280588.png

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


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom