[TYPO3] custom css styles per page

Mon Mar 10 22:43:06 CET 2008

Luka Mrovlje wrote:
> I have a html template that has <div class="foo">bar</div>. It's loaded 
> with plugin.tx_automaketemplate_pi1.
> Since every page has some specific two color theme - I would like to set 
> a custom background-color on every page for class foo in constants and 
> have those constants generate page specific inline style. I would not 
> like to add a raw html content to every page. How can I do that with typo3?
>   
Hi Luka,

You can go to the Template module, create an extension template on each 
page.  (Note - read on before typing.)

In the "setup" field, you can add more information to the <head> section 
like this:

    page.headerData.42 = TEXT
    page.headerData.42.value =  <link rel="stylesheet" type="text/css" 
href="foo1.css" />

Or if you want to just define a style:

    page.headerData.42.value =  <style type="text/css"> .foo {     
background-color: #FF1FAA; } </style>

(The 42 is fairly random - it works like a line number in old style 
BASIC programming.  If you used it twice in one template, the second one 
overwrites the first.)

To expand on that - since you mentioned "constants" in your post, you 
could put a single copy of the following into your root template (or 
other ancestor template) (so it inherits to all pages):

    page.headerData.42 = TEXT
    page.headerData.42.value =  <style type="text/css"> .foo {     
background-color: #{$fooBackgroundColor}; } </style>

Then in the "constants" section on extension templates for each page, 
define the color:

    fooBackgroundColor = FF1FAA

Two thoughts:
    1. You probably need to define a default fooBackgroundColor in your 
root template (to not break the style syntax)
    2. I am aware that style tags in headers often include comment 
delimiters like this:
        <style type="text/css">
        <!--
        .foo {     background-color: #FF1FAA; }
        -->
        </style>

       I am not sure why, but I think that might be to keep some older 
browsers from breaking, or for accessibility. 

    So you could use parenthesis to set a multiple line value, like this:

    page.headerData.42.value (
        <style type="text/css">
        <!--
        .foo {     background-color: #{$fooBackgroundColor}; }
        -->
        </style>
    )

Hope that helps,
Curt