Adding Css and Javascript to the html header tag
Sometimes is useful to add your css or your javascript costum code to the header of the HTML Template.
So the main question here is how that should be done with typoscript?
Well that is less complicated that it may look...since TypoScript has these configurations set in the PAGE object.
So we can do that basically in two ways. adding it directly in the configuration of the PAGE object:
page = PAGE
page{
stylesheet = path/to/your/style.css // for the Css
includeJs = path/to/your/script.js // for the Javascript
}
but this way is just if you want to add one stylesheet on the page,what if you need more than one?? Then you should do the second way for that :
page = PAGE
page.includeCss {
file1 = path/to/your/style1.css
file2 = path/to/your/style2.css
file3 = path/to/your/stylen.css
}
also for the Javascript :
page = PAGE
page.includeJs {
file1 = path/to/your/script1.js
file2 = path/to/your/script2.js
filen = path/to/your/scriptn.js
}
Sometimes is necessary to include an external file from another host,like google,yahoo etc. Javascript frameworks,fonts etc,are loaded faster when they are in another faster server. to do that with typoscript you should add the external property. It works this way :
page = PAGE
page.includeCss{
file = url
file.external = 1
}
That way you can include as much files on page header html as you like,and they will appear automatically without doing extra programming.