Textbox.io: Can change color for UI toolbar?

Question

I am currently testing on different text editor system for my company website. I have just downloaded the text editor, TextBox.io but i want to change the UI colour toolbar as I want the editor to blends in with my website well. Could anybody help me please?

TextBox.io editor

Regards,

Nuriin

as in i want to change the toolbar colour instead of the background text box. I do not want it to be in black colour. Btw thanks for the suggestion samayo — Nuriin A BMZ, Jul 01 '16 at 07:58
@NuriinABMZ I have added below some of the classes that you have to change in order to change the color. — miquelarranz, Jul 01 '16 at 08:01
@miquelarranz Thanks for the ans. Will do test on it right now — Nuriin A BMZ, Jul 01 '16 at 08:07

miquelarranz · Answer 1 · 2016-07-01T08:00:17.927

I think that the easiest solution is to change the css manually. So using your browser inspector search the div that contains the style and force it to be the color you want.

I think that the style is this one:

.ephox-polish-editor-container .ephox-chameleon-toolstrip {
    background-color: yourcolor !important; // I am not sure if you will need !important
}

And if you want to change the shadow:

.ephox-polish-editor-container .ephox-chameleon-toolbar:first-child {
    box-shadow: inset 0 -.5em 1em yourcolor !important; // I am not sure if you will need !important
}

You may need to change more styles probably depending of what you want to do, but I hope it may help you to understand how to change the colors.

score 0 · Accepted Answer · answered Jul 31 '16 at 20:02

Version 2.0 of Textbox.io includes a supported way to change the UI colours. We have greatly simplified the colour specification from our previous release down to a handful of variables. There is no longer any need to override our CSS as in the answer from @miquelarranz.

Textbox.io: Can change color for UI toolbar?

2 Answers2