Improve "Custom CSS" Setting (Full Width)

[stpaultim]

We borrowed code from the Pelerine theme to provide a custom CSS block in Tatsu.

However, this UI is not very nice, because of the narrow width of the field. It would be nice to make it full width as it appears in Pereline.

I don't think we can use the same solution, because Pereline is not using the color module and has solved this problem by creating it's own custom preview and putting it in the same column as the other settings - then using CSS to float left and right.

By default, we can't do the same with the color module preview, because it is rendered in a different div by default.

Any ideas on how to fix this that will work with the Color Module preview?

[Wylbur]

If it's any consolation, when the color module is disabled or not installed, the custom CSS window is full screen. For the most novice users, the color module provides a good level of customization. For more advanced beginners, the CSS block is available to cut and paste into a the small block. And for even more advanced users, Color can be disabled, and the CSS block is full size.

[stpaultim]

@Wylbur That is all true and this is not an urgent issue. It's also possible to install CSS Injector or CSS Editor for a better experience with custom CSS.

But, I'd still like to improve this.

My current thought is that we could break out the custom css from the other config options and put it on it's own page or tab.