Recmtly, weve had to come up with a way to control CSS on a page by page basis. It might seem that the only way around this is to create a new template for each of these pages, but we have come up with an invaluable piece of code that will change the way your do your CSS with Joomla! forever.
I actually got the idea from when I first started doing static tableless web sites. I found that if I created a unique ID for each page, I could just add that ID to my CSS class and it would only affect that one page. After some thought, Steven and I came up with a short piece of php code that grabs the page ID and inserts it into your body tag.
<body id="body-< ?php echo $Itemid; ?>“>
You may now use the ID in conjunction with your CSS class to control just one page of your layout.
#body-1 #footer {background:#fff;}
This makes your footer white on just the opening page, if your opening page ID is 1. As you can imagine, this unlocks all kinds of possibilities. I even used it when I wanted a completely different layout for an opening page, and I didn’t have to manage two different templates.
One thing to remember is that not all components or Joomla! pages have unique IDs attached to them. The login page has an ID of 9999 which is used by other special pages. If you need a unique ID and there isn’t one, you’ll have to hack into the component and add a unique class to them. You loose some control, but at least you can change the content area’s CSS.
We hope this helps you with your Joomla! tableless designs. I know it has completely changed how I think about and create my pages. More power with less code – how can you go wrong?
