HD-Custom CSS module for Joomla 4

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

What is this?

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.

What's the point?

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 or rollover effects.

What to do after installing?

Install the zip file via the administration install manager as per any other extension. Once it has installed go to the module manager and select Custom CSS. Enable the module and allocate to any module position on the menu item(s) you require. Either enter your inline CSS in the panel or choose to load an external stylesheet and enter the file's URL.

How does it work?

Style sheets cascade so the last CSS instructions to be loaded on the site are the ones that will be rendered in the browser. For example if the background colour for the template is blue, you are likely to have an instruction similar to this in the main template CSS file...

body {background-color: blue;}

Adding the following instruction to the CSS module...

body {background-color: red;}

...will override the previous instruction for which ever page the module appears on.

As the CSS file is loaded last the instructions should take precedent over any prior style sheets.

Advanced Settings

The advanced settings tab gives you the option to target specific browsers only.

There is also an url sniffer option allowing you to target URLs that contain a specific string (more details about the URL sniffer are available here).

You can even use the module publishing fields (start publishing / finish publishing) to target a specific date range. So if you want to turn all your text red over the Christmas period or have a green background on St Patrick's day, enter your dates here!

Does it matter which Module Position I set it to?

If you have any problems setting the module to appear in a specific module position try creating a new module position. Go to Template Manager > choose your template > Edit HTML. Then insert the following line before the closing </head> tag near the top of the page.

<jdoc:include type="modules" name="css" />

Then when allocating a module position to Custom CSS module, type "css" in the module position box.

Alternatively if there are no inline styles to overide you could position the CSS module within the <head> tags of the HTML (instead of the body tag). To do this insert the following line in your template's index.php file before the closing </head> tag.

<jdoc:include type="modules" name="css" />

Then when allocating a module position to Custom CSS module, type "css" in the module position box. If this does not work then check that there are no inline styles within the body section that would overide your CSS instructions.

How do I apply the CSS to an Article rather than a Menu Item?

In the article content include the following line at some point on your page...

{loadposition x}

Replacing X with a unique identifier of your choice.
Then when allocating a module position to Custom CSS module, type the identifier in the module position box, set the module to appear on "all pages" then apply or save.

I can't get background images to appear!

If you are using CSS copied from your template CSS then don't forget that the module CSS will be stored in a different location. So any relative URL links to image files will need to be updated.

For example, if the URL from the template CSS was...

'../images/file.jpg'

then the link in the CSS module should be updated to...

'./templates/template-name/images/file.jpg'

Replacing template-name with the name of your template. If all else fails use the full URL (including the https://www. prefix).

We also built a background selecter module that deals specifically with background images (as well as gradients and slideshows).

Where is the Joomla 3 version?

This module should work for both Joomla 3 and Joomla 4, however the older version can be downloaded here.