HD-Custom CSS module for Joomla 2.5 & 3

 

 

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

 

 

 

 

 

Download Custom CSS module

Download for Joomla 2.5 & 3

-Older versions-

 


what is this? | what's the point? | after installing | how does it work? | will it work on all templates? | module position? | articles? | images?


 

What is this?

Custom CSSHD-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 this instruction 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.

 

 

Will it work on all templates?

Admittedly I haven't tested it on every template but the simple answer is... Yes.

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

 

 

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 </body> tag at the bottom of the page.

 

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

 

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...



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 (or other javascript 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 http://www. prefix)

Web Design & Development
07845 950063
This email address is being protected from spambots. You need JavaScript enabled to view it.