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

[PVS]

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:

​

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:

Button	id name	data-cmd name
Remove formatting	clearFormatting-1	clearFormatting
Bold	bold-1	bold
Italic	italic-1	italic

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:

[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:

#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:

​

Ở đâ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:

​

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:

[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:

​

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ụ:

[data-cmd="fontSize"]
{
    color: red !important;
}

​

Tuy nhiên, sử dụng id thì lại không như vậy:

#fontSize-1
{
    color: red;
}

​

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

Nguồn: xenforo.com​