How to modify header information with typoscript

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
         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
     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.

Get future articles by E-mail