Custom CSS
Version
1.1
Rating
Compatibility
Reviews
33
License
GPLv2 or later
Non-Commercial
Type
Date Added
17 September 2010
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.
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.
Thanks!
Thanks!
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!
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
:)
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
:)
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
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.
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!
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!
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.
Love in it already!
Great job thanks for the share.
Cool, have been hanging to find out an easy way to change my background pages-dependant and other minor modify according to the page displayed by my visitors...
This took 2 minutes: just add ur cusom code.. and it just work!! :) great work bro!
This took 2 minutes: just add ur cusom code.. and it just work!! :) great work bro!
Page 2 of 2
