Gain more control of your CSS Joomla! pages

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?

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.

2 thoughts on “Gain more control of your CSS Joomla! pages

  1. Jesse Nicola

    You made one very minor mistake!

    You first must declare the following in index.php, as the $Itemid variable is not available quite yet:

    Thanks for sharing!

  2. Jesse Nicola

    Whoops, it wasn’t displaying the code I said is required:

    global $Itemid

    That is what you need to output in order to make $itemId available for usage!

Comments are closed.