Templavoila: Add the CSS file to the Templavoila template

Templavoila ignores the stuff that you've put in the header of your HTML template by default. If it needs to include lines, you'll have to configure that.

So, you're going to make sure that the line that includes the CSS file will be automatically included when you use the template you have created. This also can be done with Typoscript, which probably will be your choice in the future, as you have more control on the position of the CSS file in the header, in case you use more than one CSS file. Moreover, when updating your template, you will have to re-set the CSS file again.

Anyway. We have one CSS file now. And we're going to include it with Templavoila. Click on "Templavoila", click on "Storage folder" and click on the "Update mapping" button:

TYPO3 Templavoila Update mapping - TYPO3 template tutorial

Next, click on the "Header parts" tab. Check the box which indicates the line that includes the CSS file. Click on "Set". Click on "Save and return":

TYPO3 Templavoila: add CSS to data structure - TYPO3 template tutorial

Next step: set the template as default page template for all pages of the website >

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.