Introduction

Code Display, Custom Code in content, Style & Design, Templating

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.

You can target the specific menu item, article, page, browser or an URL that contains a specific element. You can even use the module publishing dates to apply the change on a specific date range.

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.

Awesome



Posted on 28 June 2011
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

:)

Great module!!



Posted on 26 May 2011
easy to install, and it works like a charm!!! you rock ! :)

Amazing!



Posted on 23 April 2011
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

great work!



Posted on 11 March 2011
Great Module! i had been killing myself trying to get custom css. Nothing worked until i saw this. Thank you so very much.

Love it!



Posted on 23 February 2011
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!
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!
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 call in my article and everything works beautifully. So, thank you again.
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!

What a great solution



Posted on 18 September 2010
This is an excellent way to add dynamic css changes targeted at specific page loads.



Love in it already!



Great job thanks for the share.
HD-Background Selector
Free

HD-Background Selector

By Hyde-Design
Page Background
HD-Background Selector is a simple module that allows you to apply a different background style to individual pages on your Joomla website. You can select background colours, images or repeated patterns. It can be applied to the main background or to specific elements on your site (eg. module positions, columns, headers, footers, main content box, etc). You can also use this to apply random backg...
HD-Date
Free

HD-Date

By Hyde-Design
Time
HD-Date is a simple plugin that inserts the current date into your Joomla website. Just enter {date} at the point where you want the current date to be rendered or {year} for the current year. The plugin works within any content (including articles, modules, components or within any template HTML). Great for automatically updating copyright footer dates. You can also select whether the date/year...
HD-Responsive Slides
Free

HD-Responsive Slides

By Hyde-Design
Slideshow
A jQuery powered responsive image slideshow for Joomla 2.5. This module scales the images to fit the screen and caters for different browsers and mobile devices. It is was built primarily to be used on responsive templates, meaning it can resize the images depending on which screen it is viewed on. It also includes a browser/device sniffer function so you can select which device or browser it sho...

Custom CSS

Version:
4.01
Developer:
Hyde-Design
Last updated:
Dec 16 2021
3 years ago
Date added:
Nov 18 2014
License:
GPLv2 or later
Type:
Free download
Includes:
m
Compatibility:
J3 J4
Download

Uses Joomla! Update System

Score:


Write a review