Have you ever had the need for inserting extra stylesheet or javascript files in your TYPO3 template? I am used to having a TemplaVoila setup, which has the nice feature of mapping part of the header as part of the template, but this is not really that flexible when using extension template and etc.

An easy way of controlling this, is to setup the javascript and css files from the template configuration. There are some different ways of doing this and I will demonstrate two of them here.

The template configuration examples should be self-explainable, so I will not comment them futher:

Javascript option 1 – headerData:

page.headerData.230 = TEXT
page.headerData.230.value = <script type="text/javascript" src="/fileadmin/myjavascript.js"></script>

Javascript option 2 – includeJS:

page.includeJS {
  file1 = fileadmin/myjavascript.js
  file1.type = application/x-javascript
  file2 = fileadmin/myjavascript2.js
}

CSS option 1 – headerData

page.headerData.231 = TEXT
page.headerData.231.value = <link rel="stylesheet" type="text/css" href="/fileadmin/stylesheet.css" />

CSS option 2 – includeCSS

page.includeCSS {
  file1 = fileadmin/stylesheet.css
}

CSS option 3 – page.stylesheet

page.stylesheet = fileadmin/stylesheet.css

Hope this tip can be helpful. Please notice that the CSS option 3 only enables you to set 1 stylesheet, where the other examples support multiple files.