[SOLVED] Customizing Camino Theme

I just setup a new (classic) installation of TYPO3 14.1 and choose to give the new Camino theme a try as a quick solution to start the site. That worked very well and and looks like a really good way for smaller projects. The customization options for that theme (logo and four colour schemes) itself are somewhat basic, I think that’s ok for the intended use cases. Unfortunately, none of the predefined color schemes were particularly suitable. I know how to use CSS, so I quickly identified the vars for the colors to override and defined new colours.

But I could not find an easy way to include my custom CSS file into the site. Can anyone please give a hint how to do this with 14.1 and site sets?

For now, Camino is still under heavy construction. The current scope was not to provide extensibility for the theme, but to provide a first frontend layout to play with.

Having said that, you can add custom CSS styling on top of this to manipulate the color schemes. In this case you would use “normal” TYPO3 functionality to overlay CSS themes. You can do that via TypoScript inside your config/sites/your_site/setup.typoscript and includeCSS like rules, or or course with an overlay “sitepackage” that provides this.

I’ve tried to draft https://review.typo3.org/c/Packages/TYPO3.CMS/+/92613 for some examples, but that’s also a work in progress now.

1 Like

You saved my day. Thank you very much for that quick reply and the detailed documentation!

I would’t make any heavy modifications to that theme this way, if the theme is not “stable” yet, agreed.I’ll need to keep an eye on it after every update, but any accidental colour change will be easy to detect and correct.

Just a note to anyone else who tries this also: the CSS file gets included before the one from the theme. So if you try to overwrite something you need to add !important to your values, otherwise the values from the theme will still take precedence.

You can control the order of included css files. That depends on your choosed method for the include. TypoScript, SiteSet, Fluid ViewHelper. Be sure your override css file is included after that css file from the theme. Than no `!important` is needed.