Why I seldom map CSS files in TemplaVoila

By: Ron Hall

I moved to TemplaVoila templating earlier this year in order to take advantage of FCE's and local processing in individual templates. I originally connected my CSS files using the "Select HTML header parts" feature of TV. However, I have recently changed that practice. Let me first explain what I do now and then why I do it. By the way, I would recommend you also consider this approach even if you use the "modern template building" approach instead of TV.

Currently, instead of selecting the CSS file in TV, I add the HTML code for the stylesheet link to my page object. For example:

page = PAGE
page {
  headerData = TEXT
  headerData.value = <link rel="stylesheet" type="text/css"
    href="/fileadmin/styles/base.css" />
  typeNum = 0
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page
}

Why do I do this? It makes it much easier to tweak or completely rework the CSS in future updates of the site. Let's say in the given example that you want to rework the CSS for a live site. After setting up a test section within the site, you can add the following to a template on the top page of the test section:

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

This will allow you to test all of your current templates using the new CSS file on the pages in the test section of the site. Once everything is perfect then just adjust the code on the main template to the new CSS and the entire site is changed--all without having to remap any templates.

Do I ever map CSS files in TV? Yes, particularly if the CSS is unique to that template. But for the main CSS used throughout the site I use the method just detailed.

---