Hello,
I think i can suggest a simpler way to you. But this will work on different components only and not on different content. For content I am not sure how to achieve that.
Step 1:
Create a css file in the css folder of the template or for that matter anywhere you want.
Step 2:
Open your template’s index.php file. In the head code add this tag:
[PHP]PHP Code:
<?php if( JRequest::getVar( ‘view’ ) == ‘contact’ ) { ?>
<link href=”<?php echo $tmpTools->templateurl(); ?>/css/colors/blue_copy.css” rel=”stylesheet” type=”text/css” />
<?php } ?>[/PHP]
Step 3:
The blue_copy.css can be changed into any of the files. i suggest creating a copy of the original file. Then open it, and convert after every css tag add an important tag.For example:
div.maincontainer{
width: 100%;
font-family: Verdana !important;
color: #ccff00 !important;
}
What the IMPORTANT tag does is, it over rides all other values. Which means if there are 2 css’es there which are styling the same element, the above code will become the one that is followed. And we have already used the php code to make it a component specific css , so you dont need to worry, about the css getting loaded on any other page.
Hope this helps,
Regards,
Mihir Chhatre.