Trix Editor Rails - Customizing

Question

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

Answer 1

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>

Answer 2

I know that I'm really late to the conversation but I was looking at doing this very issue this morning. There are solutions about replacing the icons that Trix utilizes (Material Design Icons by Google). Someone has a really neat idea replacing them with FontAwesome icons.

These are SVG images so color cannot be changed. For my particular situation I used a webkit filter to change the color from black to gray:

trix-toolbar .trix-button--icon {
   -webkit-filter: invert(50%);
}

This should go in the application.scss. For a reason I have not tracked down yet, putting this in the actiontext.scss file is not working, even though it's being imported into the application.scss.