[Typo3] Add css with ts on a single page

[Vlatko Šurlan]

Hi list. I need to add simple css on one specific page. Can anyone
please give me an instruction on how to do it, or, even better, point me
to the documentation where I could figure this out my self. Thanks!

[Mathias Schreiber [wmdb]]

Post by Vlatko Å urlan
Hi list. I need to add simple css on one specific page. Can anyone
please give me an instruction on how to do it, or, even better, point me
to the documentation where I could figure this out my self. Thanks!

Check conditions.
You can do numerous cool things with them.

Example:
[globalVar = TSFE:id = 10]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]

This works, but only on your page with the ID 10.
If an editor changes the UID (by deleting and re-creating the page) your
condition wil (of course) not work.

So you could use something like this:
[globalVar = TSFE:page|layout = 1]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]

This would make the CSS load whenever the layout switch in the page
header is set to "Layout 1".

What if you have used the layout switch already?
Build an extension with the kickstarter that adds a new field to the
table "pages" and make it of the type "checkbox".

In the pageheader you will have a checkbox then (sounds clear, I guess).
Then modify your condition:
[globalVar = TSFE:page|tx_myExtension_fieldname = 1]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]

see?
Conditions are cool.

all the best
Mathias

[Vlatko Šurlan]

Post by Mathias Schreiber [wmdb]
Check conditions.
You can do numerous cool things with them.
[globalVar = TSFE:id = 10]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]
This works, but only on your page with the ID 10.
If an editor changes the UID (by deleting and re-creating the page) your
condition wil (of course) not work.
[globalVar = TSFE:page|layout = 1]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]
This would make the CSS load whenever the layout switch in the page
header is set to "Layout 1".
What if you have used the layout switch already?
Build an extension with the kickstarter that adds a new field to the
table "pages" and make it of the type "checkbox".
In the pageheader you will have a checkbox then (sounds clear, I guess).
[globalVar = TSFE:page|tx_myExtension_fieldname = 1]
page.includeCSS = fileadmin/templates/myOtherCssFile.css
[end]

This all works but is not appropriate for my case. I need to add a
<style>little css</stile> in the header of a single page. I think there
is a more suitable way to do this than create an entire css file and
modify the root template. Is there a way to do it with an extension
template or page header template?

[Mathias Schreiber [wmdb]]

Post by Vlatko Å urlan
This all works but is not appropriate for my case. I need to add a
<style>little css</stile> in the header of a single page. I think there
is a more suitable way to do this than create an entire css file and
modify the root template. Is there a way to do it with an extension
template or page header template?

[globalVar = TSFE:id = 10]
page.headerData.5 = TEXT
page.headerData.5.value (
<style>
body {
font-size:2000em;
}
)
[end]

Get the point?

[Vlatko Šurlan]

Post by Mathias Schreiber [wmdb]
[globalVar = TSFE:id = 10]
page.headerData.5 = TEXT
page.headerData.5.value (
<style>
body {
font-size:2000em;
}
)
[end]
Get the point?

This is exactly what I wanted. One more question. How can I make sure I
do not overwrite something in page.headerData? Or in other words how do
I make sure page.headerData.5 is not used already?

[Ries van Twisk]

Post by Vlatko Å urlan

Post by Mathias Schreiber [wmdb]
[globalVar = TSFE:id = 10]
page.headerData.5 = TEXT
page.headerData.5.value (
<style>
body {
font-size:2000em;
}
)
[end]
Get the point?

This is exactly what I wanted. One more question. How can I make sure I
do not overwrite something in page.headerData? Or in other words how do
I make sure page.headerData.5 is not used already?
_______________________________________________

You can't (as far as I know), also you cannot add to header data liek
you would do in a string.

What I do is this structure:

page.headerData.PID = TEXT

where PID is the page ID on which I want to add the CSS.
This helps me, but not prevent of adding duplicate entry's.

Ries

[Jean-David Gadina]

Hello Vlatko,

You can do this without TypoScript with a little extension:
http://typo3.org/extensions/repository/search/css_select/

It adds a field in the page headers that let you select one or many stylesheets from your server.
Hope it will help you,

--
Jean-David Gadina (macmade)
www.gadlab.net - Multimedia Network

[Dimitri Tarassenko]

Vlatko,

Post by Vlatko Å urlan
Hi list. I need to add simple css on one specific page. Can anyone
please give me an instruction on how to do it, or, even better, point me
to the documentation where I could figure this out my self. Thanks!

I typically just add an HTML content element to the page and do it
there. Keep it simple;))

--
Dimitri Tarassenko

[Christopher]

Post by Jean-David Gadina
Vlatko,

Post by Vlatko Å urlan
Hi list. I need to add simple css on one specific page. Can anyone
please give me an instruction on how to do it, or, even better, point me
to the documentation where I could figure this out my self. Thanks!

I typically just add an HTML content element to the page and do it
there. Keep it simple;))

Err...simple _and_ invalid.


-Christopher

[Dimitri Tarassenko]

Post by Christopher

Post by Dimitri Tarassenko
I typically just add an HTML content element to the page and do it
there. Keep it simple;))

Err...simple _and_ invalid.

Let's rephrase that - not fully standards compliant. Invalid is when
something doesn't work. There are so many other things in TYPO3
extensions that are not compliant to HTML/XHTML DTD that I don't
really care. ;)

--
Dimitri Tarassenko

[Mathias Schreiber [wmdb]]

Post by Dimitri Tarassenko
Let's rephrase that - not fully standards compliant. Invalid is when
something doesn't work. There are so many other things in TYPO3
extensions that are not compliant to HTML/XHTML DTD that I don't
really care. ;)

Thanks!
I see it exactely this way.
Invalid is, what does not work.
If some weird HTML Code produces the layout I need and the customer pays
for, it's valid

[Christopher]

Post by Vlatko Å urlan

Post by Dimitri Tarassenko
Let's rephrase that - not fully standards compliant. Invalid is when
something doesn't work. There are so many other things in TYPO3
extensions that are not compliant to HTML/XHTML DTD that I don't
really care. ;)

Thanks!
I see it exactely this way.
Invalid is, what does not work.
If some weird HTML Code produces the layout I need and the customer pays
for, it's valid

I'd love to see an example of some truly necessary 'weird HTML code'.
Given how generally good the current generation of web browsers are at
interpreting the standards, invalid html code almost always means
someone doesn't know what they're doing...

Dimitri's suggested method breaks validity for no good reason and
should be avoided.

-Christopher

[Dimitri Tarassenko]

Christopher,

Post by Christopher
Given how generally good the current generation of web browsers are at
interpreting the standards, invalid html code almost always means
someone doesn't know what they're doing...

Arguably, the fully compliant HTML code could point to someone being a
bit anal retentive and willing to spend either their time (fixed bid)
or customer's money (time-and materials) on something having very
little value in the real world.

Post by Christopher
Dimitri's suggested method breaks validity for no good reason and
should be avoided.

So does a lot of HTML produced by RTE HTMLarea. Let's stay away from that too.

Until http://www.google.com validates through the validator you are
using, any attempts to build standards-compliant code are just trying
to be holier than the Pope.

--
Dimitri Tarassenko