Typo3 and CSS: Style Your Pages based on their Alias or UID

Submitted by Hannes Schmidt on Wed, 03/23/2005 - 12:46.

If you look at all the pages of a particular site, you will notice that most pages share common parts. These common parts typically include navigation, header, footer, styles and so on. Of course, you can duplicate the common part in every html file on that site. But as the site grows, making a change to one of the common parts ends up in a lot of tedious work: you need to apply the change to every single HTML file on the site. Now imagine your site has 1000 pages! You don't want to do that.

Just like in so many other areas of computing, duplication is bad. In order to prevent duplication on your site (unlessyou have a really tiny website) you need to use either a CMS or a template-based offline authoring tool like Macromedia Dreamweaver MX or Adobe GoLive. CMSes and offline editors are completely different things, but how they deal with the duplication issue is very similar: templates. Typo3 has them, Drupal has them, Dreamweaver and GoLive have 'em too. Now, I'm not going to tell you why using a CMS is good for you. You wouldn't have visited this page if you weren't already using Typo3 or at least planning to do so. Let's get down to business.

Sometimes the templated parts of pages aren't completely identical — a different word here, this text in bold and that picture over there should only be shown on the top level pages. If the differences justify it, you could simply create an extension template of your main template and apply the changes to it. If the differences are small, a whole new template isn't always necessary. A commonly used trick with CSS and template-based sites is to assign different IDs to each of the pages' body tags:

<body id="products_body">
<a id="home_link"     href="/home.html">Home</a>
<a id="products_link" href="/products.html">Products</a>
<a id="support_link"  href="/support.html">Support</a>

and then use these IDs to create styles that only apply to individual pages:

#products_link                { color:blue }
#products_body #products_link { color:red }

This makes the link to the products page blue, except when it occurs on the products page itself, where it will be shown in red. There are other ways to achieve this result, for example, using styles embedded in the header of each page in addition to an external style sheet, but we'll focus on the id body id solution because it is a really useful mechanism for Typo3 as well.

Now, how can we employ this technique on our Typo3 site? Put the following TypoScript in your root template. Typo3's body tag handling is a bit convoluted when used in conjunction with "Modern Template Building" (extensions CSS Styled Content and Template Auto Parser), so if you're already doing some kind of body tag magic, you'll need to fuse your magic with mine. ;-)

body = TEXT
body.field = alias // uid
body.wrap = <body id="body_|">
page.bodyTagCObject < body

Clear your cache, go to a page on your Typo3 site and look at its source. The body tag will now look like

<body id="body_2">


<body id="body_home">

in case the page has an alias (highly recommended).

That's basically it. Surprised that it's over already? Well, you'll need to write your own CSS style rules. For example, on one of my sites, I hide certain images on the home page:

#body_home #images-header img { visibility: hidden }

It's up to you. The sky is the limit.

( categories: Typo3 | Webmaster )
Submitted by Anonymous on Mon, 06/27/2011 - 07:44.
Hello! Thanks for this tutorial - very helpful. I found that I need same styling for set of pages, f.e. one style for General and subpages and other for Auto and subpages. Any one know how make this? General - Subpage 1 - Subpage 2 Auto - Subpage 1 - Subpage 2
Submitted by Anonymous on Tue, 11/17/2009 - 04:19.
Awesome. Thanks. I was looking for how to just dynamically add a class but this was more like what I was actually looking for and a crap ton easier. Thanks again. You saved my employer a bunch of money. Aaron
Submitted by Anonymous on Tue, 10/07/2008 - 01:58.
Hi, This is a good technique. Does anybody knows how to add a class attribute depending on the config.language variable ? I would like something like that : ... ... Because I need to customize several styles depending on the selected language (config.language variable). I tried something like : body = TEXT body.field = config.language body.wrap = page.bodyTagCObject But my class attribute remains empty (class=""), no matter what the config.language value can be... Besides, this doesn't handle the id attribute. Thank you. druide@akiway.com
Submitted by Anonymous on Tue, 01/29/2008 - 09:33.
Thanks. Very good method, exactly what I looked for. Feo
Submitted by Anonymous on Mon, 12/05/2005 - 10:01.

Forum to discuss TYPO3 technologies:


Submitted by Hannes Schmidt on Tue, 06/28/2005 - 05:49.

Jeez - it took so long to realize that it's you, Dave! Tabs had to point me to it. You must have looked at the site right after it got spammed. I had a captcha check for anonymous comments but that wasn't active for replies. I hope I got it right this time. Changing the comments form path is a good idea as it keeps the site off the spammers' radar. Allowing only registered users to comment isn't sufficient, though. I got hit in the past by spammers that used throw-away email addresses for registration.

Submitted by Anonymous on Wed, 06/08/2005 - 04:09.

I previously had simply just overridden any of the default CCS styles on the local file for the individual pages whenever I needed to. This looks more useful.

Also, with drupal, just allow users to register and then give them permissions to comment or else just change the comments form path.
For example typing: inurl:"drupal/comment/reply" into google lets advertisers easily find and abuse unsecured comments forms.

Dave Blair

Submitted by Hannes Schmidt on Fri, 04/15/2005 - 03:15.

that site uses Modern Template Building. No magic necessary at all. I forgot to mention that this technique really only makes sense with MTB anyway.

Submitted by Michael Perkins (not verified) on Thu, 04/14/2005 - 01:26.

Might save me some time in trying to merge the magics!