[TYPO3-templavoila] override HTML Header Parts in Templavoila

Tue Jul 3 06:15:49 CEST 2007

Hi Ron, all,

Ron Hall wrote:
> Personally, I generally include css using TS instead of mapping them.  
> Here is a blog entry as to why:
> 
> http://www.busynoggin.com/blog/blog-item/archive/2007/january/article/why-i-seldom-map-css-files-in-templavoila/

I tried to add a comment on your site, because I find the following info
useful too, but could not (comments section closed); please consider
adding an excerpt of this to your article.

Another advantage of using TS to include the CSS is the possibility
to use conditional comments to fix IE's various bugs, which is _not_
possible with TV's mapping. Here is a (working) example from a life
site:

page.headerData.10 = TEXT
page.headerData.10.value (
   <style type="text/css">
     @import 'fileadmin/templates/css/standard.css';
     @import 'fileadmin/templates/css/popup.css';
     @import 'fileadmin/templates/css/menu.css';
     @import 'fileadmin/templates/css/pages.css';
   </style>
   <!--[if lte IE 6]>
     <style type="text/css">
       @import 'fileadmin/templates/css/iefix.css';
     </style>
   <![endif]-->
)

Note the use of '( ... )' instead of '=' in ...10.value; not really
neccessary, but it looks nicer in the generated pages. Also note
the inclusion of several different CSS files, each tailored to a
specific job (the site has a CSS image popup feature, see below).

If you need special CSS imports/inclusions on specific branches of your
site you always can overwrite page.headerData.10.value either by some
condition in the central TS, or by a different specification in the TS
field of the topmost page of that branch. Then you often might want to
clear the derived settings with:

   page.headerData.10.value >

before resetting it to different imports/includes.

The only thing lost with the TS approach is the (half-) automatic
inclusion of CSS files, when just a specific DS needs special handling.
Then talk to your designer, most often there is a solution, not
requiring that (remember, that CSS files are typically only read once
in a while and cached then by the browser, thus beeing available for
other pages without a reread, unless you request it)!

Besides, the above .../pages.css deals with special handling for very
specific pages to be formatted differently than the rest of the site.
This works by giving _every_ page a unique body id and using more
specific CSS selectors for the pages needing special attention. The
unique body id attribute is derived from the pages uid and generated by
this TS setup (could be the page alias for more readable CSS selectors):

   # Let's have a special <body> tag with an id attibute,
   # so that we can have special CSS formatting applied not only to the
   # body, but also to any descendant element of that body (everything)
   page.bodyTagCObject = TEXT
   page.bodyTagCObject {
     # We want the 'value' property to have 'getText' behaviour
     insertData = 1
     value = <body id="page_{page:uid}">
   }

And though this list definitely isn't about CSS (and my info might get
lost altogether, unless Google picks it up):

I mentioned that 'CSS popup' feature above and I think it is worth to
have a look at that '..../popup.css' file, if you ever have run into
that nasty 'z-index bug in IE', see:

http://www.aplus.co.yu/lab/z-pos/

I think, I've found a valuable workaround to that bug beeing a better
solution as at the mentioned link. It is well documented (in german) in
that file.

The life site (with working popups) is found at e.g.

http://www.schoppe-freiraumplanung.de/Gerdauring.48.0.html

I won't discuss the design here (it is, what the designer/customer
wanted to have, I just did the XHTML/CSS) but feel free to use the
CSS workaround to the IE z-index bug.

regards, Georg
-- 
   ___   ___
  | + | |__    Georg Rehfeld      Woltmanstr. 12     20097 Hamburg
  |_|_\ |___   georg.rehfeld.nospam at gmx.de    +49 (40) 23 53 27 10

               (Delete .nospam from mail address)