Developer Center Gain more control of your CSS Joomla! pages
December 16th, 2006With some of the recent projects we’ve been working on we have had to come up with a way to control css on a page by page basis. It would seem that the only way around this would be 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 could have a unique id for each page that I could just add that id to my css class and it would only affect that one page. After talking with Steven about this we 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 would make your footer white on only the opening page, if your opening page id is 1. As you can imagine, this unlocks all kinds of possibilities. I have even used it for a completely different layout for an opening page than the rest of the site without having to manage two different templates.
One thing to remember is that not all components or Joomla! pages have unique id’s attached to them. The login page has an id of 9999 which is used by other special pages. If you need a unique id to them then you 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 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?
