backdrop-contrib / tatsu

A basic flexible theme inspired by Basis theme in Backdrop CMS Core
GNU General Public License v2.0
2 stars 5 forks source link

Improve "Custom CSS" Setting (Full Width) #72

Open stpaultim opened 11 months ago

stpaultim commented 11 months ago

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

image

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.

image

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 commented 11 months ago

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 commented 11 months ago

@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.