[TYPO3-english] Add conditional CSS through Templavoila
erik at linnearad.no
Mon Feb 23 12:02:18 CET 2009
> 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.
> 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"
> 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>
> (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,
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
Personaly I use something like this.
page.headerData = CARRAY
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
<!--[if IE 6]>
<link> href="/myfile/path/ie6.css" rel="stylesheet" type="text/css"
40 = TEXT
<--- 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.
More information about the TYPO3-english