Question : Best Way to Add CSS Code to a Joomla Template

I have a purchased Joomla template that looks great out of the box. It's a three-column layout with the two outside columns being the traditional right and left sidebars.

I want to add a custom-made html module that creates a special hover effect as seen in the image below.

I have placed the code to do this in a separate css file called workshops.css. I then added a link reference to it in the index.php file of the template. I placed the link reference as the final one in a list of other such links in the <head> section of the php file.

The css code makes use of the module class suffix of the custom module and adds _workshops which is attached automatically by Joomla to the moduletable class.

Wow, I didn't realize it would take this much to explain my problem. I hope that all made sense so far.

Here's the thing: The code works perfectly for doing what I want it to do for the custom module. But it throws all the other hyperlinks in both the right and left sidebars out of whack, and this is spite of the fact that I tried to be very specific in my referencing path.

My question is this: What is the best way to add this kind of code so that it does not disturb the code in the primary template? What am I doing wrong in this case? I thought that this css code was so specific that it wouldn't affect the template.css code.

 
workshops.css (978 bytes) (File Type Details) 
workshops.css
 


 
workshops-screenshot.jpg (68 KB) (File Type Details) 
screenshot
332290
 

Answer : Best Way to Add CSS Code to a Joomla Template

Maybe it's the div that's throwing things off.  On a web page, nothing really stands by itself.  Do you have before and after screen shots?  A link we can look at?
Random Solutions  
 
programming4us programming4us