- Compatible XF 2.x versions
- 2.x
This simple guide will explain how to style the editor toolbar button icons.
The use of the browser inspector (F12 -> Elements) will be necessary to identify the id and data names ... or good guesswork.
If we check the code for the standard toolbar we see this in the browser inspector:
From that we can determine that the first three buttons have the following attributes:
We can use the id names and data-cmd names to target the buttons for styling purposes.
Buttons
To style a button using the data-cmd name use this:
To style it using the id name use this:
The use of the browser inspector (F12 -> Elements) will be necessary to identify the id and data names ... or good guesswork.
If we check the code for the standard toolbar we see this in the browser inspector:
From that we can determine that the first three buttons have the following attributes:
| Button | id name | data-cmd name |
| Remove formatting | clearFormatting-1 | clearFormatting |
| Bold | bold-1 | bold |
| Italic | italic-1 | italic |
We can use the id names and data-cmd names to target the buttons for styling purposes.
Buttons
To style a button using the data-cmd name use this:
Less:
[data-cmd="clearFormatting"]
{
color: orange !important;
}
Less:
#clearFormatting-1
{
color: orange;
}
