Design Individual Joomla Pages With HD-Custom CSS

HD Custom CSSHD-Custom CSS is a simple module that allows you to add CSS styles to individual Joomla pages.

Without editing your template files, HD-Custom CSS makes it possible to quickly and easily apply CSS changes.

In this tutorial, we'll show you how to alter the background color and font for just one page.

Step 1. Installation

Step 2: Assign to Selected Pages

  • Go to the Module Manager and open the HD-Custom CSS module.
  • Enable the module.
  • Place the module in any module position on the menu item(s) you require. I used the "debug" position, but I could have picked any other one. For more information on positions, see the module's website.
tutuploadsmedia_1342133474385.png
 

Step 3: Add CSS

  • On the right-hand side of the page, look under Basic Options.
  • Enter the CSS you want to use into this area.
  • The image below shows the window with the first example already typed into it. We're going to make the background blue.
  • Save the module.
tutuploadsmedia_1342134779191.png

Step 4: View the Changes

  • When you first look at the result, it doesn't look like anything changed. 
tutuploadsmedia_1342134698658.png
  • However, let's zoom out and look at the whole page:
tutuploadsmedia_1342134929197.png

It did change! But it's only half-blue. Let's go to Firefox and Firebug and see if we can figure this out.

If you haven't done so yet, I highly recommend you read Editing Joomla Templates with Firebug.

tutuploadsmedia_1342135893172.png

Checking Firebug, I see that there is more to this CSS than just the color. There is also a background image. So I am going to have to account for that as well. I will need to modify the background directive to:

body {
 background: none repeat scroll 0 0 blue;
 }

Step 5: Change the Font

Now let's change the font face. At the moment the font is Arial. We're going to change the Times New Roman, but only for our article text.

  • Go the Module Manager and re-open the module.
  • Paste this code into the window to change the page text.

body {
 background: none repeat scroll 0 0 blue;
 font-family: "Times New Roman";
 }

  • Here's how the change appears:

 

tutuploadsmedia_1342136498651.png
  • Again that CSS change worked, but not perfectly. All the text in the menu is transformed as well and the article headings are unaffected.
  • Go back to Firebug and inspect the individual elements.
  • Inspecting just the text in the article, we find that there is a definition for .item-page on the page.
tutuploadsmedia_1342136617515.png
  • Go to the Module Manager, open the module and put the body tag back the way it was.

body {
 background: none repeat scroll 0 0 blue;
 }

  • Make a new entry:

.item-page {
 font-family: "Times New Roman";
 }

tutuploadsmedia_1342136817383.png

Success! There's not that much you need to know to actually work the module. You do need some CSS skills. I know if I were a beginner and installed this I would run into these problems and scratch my head over them for hours, probably. To use this successfully you have to dig into the CSS and make sure you understand exactly what it is you want to change.

Load the CSS From an External Style Sheet

Instead of using the window, you could create, or copy from an existing site, a stylesheet and include it by typing in the url to the style sheet. This is great if you want to make the same changes on lots of different sites.

tutuploadsmedia_1342138675491.png

Make the Changes Browser Specific

For those people who are having trouble with browser compatibility, you can make your styles conditional to the browser:

tutuploadsmedia_1342138691561.png