The Joomla! Extensions Directory ™

Download

Demo

sumerhil

Extensions(0)
Reviews(1)
Favourites(0)
 
Results 1 - 1 of 1
Custom CSS
Wish I had this before!
bysumerhil, October 21, 2010
Custom CSS
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!

Support Joomla!