Theme and CSS

[treelistener]

Hi
I am currently discovering ina theme a requirement or simply a wish like #1931 that can ultimately be solved somehow in the custom CSS. What is the best way to find out what parameters I can adjust in the CSS?

[candidexmedia]

Are you asking:

1. What you can do with CSS and how it works?
2. What ways CSS can be edited in Publii? OR
3. Where to find the stylesheet for your Publii theme, with all the existing rules?

[michaelfluegge]

I'd place my bet on 2.

[treelistener]

Thank you very much for your questions @candidexmedia. also @michaelfluegge, well not quite no. 2;-)

Assuming you take a finished theme and install it in Publii. For example Lignes or simple, while you edit your content in Publii, you will find the theme structure as different hbs files and the config.json file as well as the features supported by the theme. During sync the rendering process is triggered and only then the CSS and the whole website with its folders and file structure is created. i don't mean the customThemeOptionsCss.
How do I find out what options the custom CSS could have from the given theme? Quasi like a catalog which adjustments are possible where and with which parameters. Where can I find out that?

[candidexmedia]

Hi @treelistener :

There are a number of ways of finding this out, and some of it became a bit more complex over the last few releases.

Basically: I would start by consulting the main.css stylesheet to get a good sense of the CSS rules which impact your site's theme. You can find it by going to your sites folder > site-name > themes > theme-name > input > assets > css > main.css

Open that file in the text editor of your choice (ex: VS Codium)

You should be able to make changes there directly (or use theme overrides to be safe). To view those changes, save the file, and preview the site from the Publii GUI.

If you'd like to preview changes in real-time and see how different CSS rules affect different elements in context, I would recommend using your browser's dev tools (just make sure to paste and save your tweaks in main.css or Tools>Custom CSS in the Publii GUI, as any dev tools tweaks will disappear when you refresh the page)

I'm not sure how comfortable you are with CSS in general, but I consult MDN Web docs and W3Schools religiously to learn more about what different CSS properties do.

In recent Publii releases, they added the theme-variables.js, which allows you to map certain config.json parameters to CSS variables (doc reference). I'd give that file a look as well if you want to know which Theme Settings (from the Publii GUI) impact which CSS variables.

If you want to dig deeper into fonts and how to add custom ones, check out the docs on that. That's something that also changed and got more complex in recent Publii releases.

Lastly: some add-on theme functions come with their own stylesheets. For example, some older version of themes that came bundled with the Prism.js syntax highlighter would include stylesheets for the plugin in the same folder as main.css.

I'll leave you with this as one last reading: https://getpublii.com/dev/how-the-theme-is-rendered/

Let me know if this answers your question!

[treelistener]

Absolutely great @candidexmedia. Many thanks for your time you've spend to answer and this great answer. That helps me where to start.