I am using a trix editor such as <%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>
Currently the buttons are black and obviously translated english (as well as the alt texts).
How am I supposed to change the colors of the buttons? Everything Ive tried didn't seem to work.
Is there any way to provide german translations? I need my full application to be completely german.
Best regards
You can change the background color of the buttons with css.
trix-toolbar .trix-button-group button {
background-color: green;
}
The button icons are images, so you would have to replace them in order to customize icon color, etc. For example, to remove the bold button icon with css:
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
You can change the button tooltips (for translation or otherwise) with javascript by referring to the data-trix-attribute for the button you would like to change. For example, to change the bold button where the data-trix-attribute is set to "bold" (due to browser inconsistencies, it is best to set both the Trix.config.lang and the element title attribute):
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
Following snippet illustrates the various changes above.
// hover over the now blank bold button in the toolbar to see the tooltip
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');trix-toolbar .trix-button-group button {
background-color: green;
}
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
<trix-editor></trix-editor>