[TYPO3-english] Add conditional CSS through Templavoila
Erik Svendsen
erik at linnearad.no
Mon Feb 23 12:02:18 CET 2009
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
More information about the TYPO3-english
mailing list