The Joomla! Extensions Directory ™

Custom CSS Module

Give each page on your Joomla website an individual and unique style with a Custom CSS module.

HD-Custom CSS is a simple module that allows you to style pages individually from the rest of the site. Just as the Custom HTML module allows you to insert HTML on a specific page, the Custom CSS module allows you override styles for a specific page.

Joomla's template structure assigns the same CSS file(s) to each and every page resulting in a framework of similar looking pages. With a custom CSS module you can broaden the scope of your design by having a different background image on every page, varying the module position sizes, applying different fonts, font colours, hyperlink behaviours, rollover effects or column widths.

Report Extension



Reviews: 12
I am not a css expert and this did EXACTLY what I wanted it to do so easily! I needed different article pages to display differently than the category listing page due to module position changes and this worked perfectly.
Reviews: 1
Perfect! This is a much better option than what I was previously doing, which was manually modifying the CSS and hoping it didn't get overwritten on the next template upgrade. Only trouble I had was figuring out that I needed to select a module position (for CSS to be published on every page).
Reviews: 1
I love Joomla, but sometimes seemingly simple HTML or CSS tasks are overly difficult. I was about to install three different versions of the same template just to change the background image on a few different pages.

I am glad I stumbled upon this extension. It solved my problem perfectly and simply. I also think having it will allow a lot more CSS flexibility on future sites. Great job!
Reviews: 2
It's a straight forward tool and did exactly what I needed it to do. The loadposition did the rest!
Thank you!
Reviews: 19
I have a client with a 5 page website, they wanted a different background image on each page. I didn't want to have to build this with 5 different templates, because I didn't want to update 5 templates each time I needed a code change.

This extension is awesome! It solved my problem, and I thank you for that. I experienced no problems with it.

Joomla!, thank you for the awesome framework. Developers, thank you for the awesome extensions!
Reviews: 1
I'm just amazed at how simple and wonderfully functional this extension is. It worked perfectly within seconds of having installed it. Kudos to the developer, and thanks for making it available to the community for free.
Reviews: 2
Very userful extension and couldn't be easier to use!
Reviews: 7
Shortly: excellent extension! Works great on my site under J 2.5. Simple installation, simple customization and fast results. Many thanks to the developers!
Reviews: 5
I had a real problem, my client wanted to display a different background image in every page.
I did try to duplicate template and some other stuff but Custom CSS has been the solution.
Easy to install, easy to configure and it works!
So, fantastic! Thanks.
Reviews: 2
As simple as anything should be in Joomla! Where other modules for custom code failed, this one worked right away. Just paste in your code (in my case css) and publish the module - that's it.

Reviews: 2
Ok this is really great!! working everyhitng just install and run it, but I have a little issue that my changes are not visible in IE9, does anyone has the same prob? If yes how did you solve it? Could you help please, i contacted the author 2 times but never received an answer...thanks!
Reviews: 3
very easy to use, does exactly what I need, add a css stylesheet to the pages I want for a per-page custom look, thanks.
Reviews: 46
What a fantastic extension.
Far easier to use this then make several templates
Very easy to use, add your module to the index.php
Create a module and start styling.
Massively impressed with this.
Should be in the Joomla core its so good.
Many thanks to the developer, Stunning Job
Reviews: 5
easy to install, and it works like a charm!!! you rock ! :)
Reviews: 4
I now use this module for every site I do. Its very useful if you do a lot of custom templates. Allows you to insert css on a page by page basis.... thank you so much for releasing this for free
Reviews: 4
Great Module! i had been killing myself trying to get custom css. Nothing worked until i saw this. Thank you so very much.
Reviews: 14
I am used to making my own CSS files when I want something special, but with this extension it only takes 2 minutes to get what I want! I simply love this simple but effective module!
Reviews: 4
After pulling my hair out for a few days trying to do a few simple changes, I found this gem. Voila!
In five minutes, I had redefined the fonts, color scheme and alignment on two pages. Highly recommended even if you are afraid of CSS.

Thank you!
Reviews: 11
I had a simple need for an overflow call on a couple of pages on one of my sites. The design is rigid and works for all the other pages, but some areas the site needs to have more information than the rigid design can hold. Once I had created my custom CSS I just used the {loadposition ...} call in my article and everything works beautifully. So, thank you again.
Reviews: 1
This is a great tool! If I had discovered this a month ago I could have saved myself at least a solid week of work. One of the most frustrating things for me in Joomla is figuring out how to target specific elements I want to style. In an article, you can put your stuff in a , give it an ID and modify a style sheet by hanging the CSS on the ID, but if you want to target stuff that’s outside the scope of the article (or module) and you only want to target specific pages, you’re out of luck. Until now.

The workflow couldn’t be easier. I use Firebug to experiment with the CSS in the browser until I stumble on the right settings, then I copy my modified CSS from Firebug and paste it into the CSS window of the module, tell the module on what pages (menus) I want it work and bam! There it is. What’s more, you can do all this without actually modifying a style sheet – No chance of messing up your template!

Here are a couple things the documentation didn’t tell me (or were unclear).

When you create a new module with this, you must tell it the menu pages you want to target as well as the specific position you want to target. That is, if you want to affect the CSS in the main content of a page, you have to assign the module to the same position as your main content.

The module isn’t visible on the rendered page, however it does seem to take up space; I figure about 30px high. In my current project, this caused the content below the module to be pushed down on the page. I got around this by making sure the CSS module was last in the order list.

Thanks to Hyde-Design for an excellent product!
Owner's reply

Thanks for the great review and glad you find it as helpful as I do.

If you declare divs and classes within the css then there should be no need to allocate them to individual module positions.

eg. instead of applying "color: #000;" to the left module position you could apply "#left {color: #000;}" to any module position. This will speed the process up even more!

Also, it shouldn't take up any space when rendered to the screen unless that template is set to add padding or a margin to that particular module position. A simple way around this is to apply it to a different module position or create your own one (details at the bottom of the documentation page).

Hope that's of help!

Page 2 of 3