[TYPO3-english] Add conditional CSS through Templavoila

[Erik Svendsen]

Hello Nathan,

> I see that conditional CSS is not supported in Templavoila:
> 
> <!--[if IE 6]><link href="/myfile/path/ie6.css" rel="stylesheet"
> type="text/css" /><![endif]-->
> 
> because the Typo3 HTML parser doesn't support it.
> http://lists.netfielders.de/pipermail/typo3-project-templavoila/2008-M
> arch/002964.html
> The obvious solution would be to add it using Typoscript:
> 
> page.headerData.100 = TEXT
> page.headerData.100.value = <!--[if IE 6]><link
> href="/myfile/path/ie6.css" rel="stylesheet" type="text/css"
> /><![endif]-->
> However, that puts it above the standard style sheets included by
> Templavoila.  This means the style sheets don't cascade properly. I
> can force it by adding !important to all the styles in the ie6.css,
> but that seems ugly.
> 
> Is there a way to add content to the header right above the </title>
> tag?
> 
> (I know I could just not set the styles in Templavoila and add them
> all through typoscript and headerData, but I do different Templavoila
> designs based on _only_ the style sheet includes... so this would take
> away the nice aspect of changing designs to change css includes.)
> 
> Thanks for any advice,
> 
> --Nathan
>

Not as I know!

But I will advise you to not include the stylesheet through Templavoila. 
I think it's better to use page.HeaderData beacuse it gives you better controll 
over the order of CSS-files and also other elements in the header. Also the 
use of page.includeCSS is possible to have the CSS-files in correct order. 
But it don't give the possibility to use conditional comments. But condition 
in TYPO3 gives you the possibility to serve different stylesheets to different 
browsers.

Personaly I use something like this.
<---code snippets-->

page.headerData >
page.headerData = CARRAY
page.headerData {
    10 = TEXT
    10.value = <link href="some css" rel="stylesheet" type="text/css" />
    20 = TEXT
    20.value = <link href="some other css" rel="stylesheet" type="text/css" 
/>
    30 = TEXT
    30.value (
         <!--[if IE 6]>
              <link> href="/myfile/path/ie6.css" rel="stylesheet" type="text/css" 
/>
         <![endif]-->
    )
    40 = TEXT
    40.value = som javascript
}

<--- end code -->

If I'm going to change the CSS i only change the file referense. For instance 
if page 15 should have another colour theme than the other, but the HTML 
are identical i don't have to use another TV template. I only make an ext 
template on that page and using following TypoScript code.

page.headerData.20.value = <link href="my green css" rel="stylesheet" type="text/css" 
/>

The possibility for different combinations and finetuning of the header are 
nearly endless. And it gives you perfect controll.

 
WBR,
Erik Svendsen
www.linnearad.no