How to tweak CSS easily?

[nanawel]

I like the default theme, but of course I would need to be able to change the way elements are displayed depending on this or that.

Plus I'd like to override the styles applied to the browser's scrollbars because it's buggy with me (no scrollbars at all).

How can I do that?

[lovasoa]

Great to hear that you're enjoying the default theme of SQLPage!

Customizing the display of elements and overriding styles is definitely possible. SQLPage allows you to create your own components by creating a folder in sqlpage/templates and adding .handlebars files to it. This gives you full control over the design and layout of your web application.

You can then define the HTML structure and CSS styling you want for your component in these files. SQLPage uses the Handlebars templating engine, which allows you to dynamically generate HTML based on the data returned from your SQL queries.

You can also override existing components, including the shell component that handles the overall page design. To do this, create a new .handlebars file with the same name as the component you want to override. SQLPage will automatically prioritize your custom component over the default one.

For inspiration, you can see the source for all the default components in the templates directory of this repo. The source for the default shell is in the shell.handlebars file.

And if you think your new components or your changes to the default ones could be of interest to others, don't hesitate to open a pull request here !

Regarding the issue with the browser's scrollbars, I'd be happy to help you debug and maybe resolve the problem directly in sqlpage. Could you provide more information about the specific issue you're facing? Are the scrollbars not appearing at all, or are they behaving unexpectedly? Any additional details or screenshots you can provide would be helpful in diagnosing and addressing the problem.

[nanawel]

Hi, thanks for your quick response.

I've read about the .handlbars thing in the docs but I'm not used to this system, and I thought there was an easier if it was just to tweak the global CSS of the framework. I'll take another look.

As for the scrollbars, here are 2 screenshots that should help you figure out the issue I'm facing:

[lovasoa]

Thank you very much for the screenshots ! I understand the problem now, and can reproduce it.

I reported the issue to tabler, the CSS library sqlpage uses: tabler/tabler#1648

Hopefully it can be fixed soon.

I'll also add a new css attribute to the shell component to allow easier style customizations without creating custom components.

[nanawel]

That's nice, thanks a lot 👍

I also might have a new issue, this time with the chart component. Nothing critical but the fact that its height is fixed (at least I think it is) makes it impossible to work with "large" series (say, more than 10 when set to horizontal).
I'll open a new thread about that if I can't find a proper workaround.

[lovasoa]

Yes ! Feel free to even open an issue if you feel like this is a bug in SQLPage

[lovasoa]

I just pushed a new example illustrating the usage of custom components for styling.

[lovasoa]

I just pushed a fix; invisible scrollbars should be fixed for everyone in the next version.