I have been trying to find a solution for hours... Any comment / guidance would be very much appreciated!.. Thanks... I created an extension for listing different products by category. what I am trying to accomplish is changing the background of the entire site according to the category that is set, for example: electronics would be blue background, fashion would be red background etc...
I have a few problems: 1. The sorting function for the categories is dynamic, (dropdown list / submit button) so the page doesn't change (only what it shows in the module changes) so I cannot use different templates for different pages, 2. I cannot use page suffix to define a new template.
A good solution would be a php statement like: if ($categoryId == X) --> set_new_background, but the class for the site background is set outside of the php file I am working on. Also setting a background for the DIV will not change the sites background.
Any ideas and help would be very much appreciated! Thank you!
Report this post
Please refer to @Theodeore's answer above, it's quite complete; the only addition I would make is to just use classes at the template level instead, so you can define your colours in the css and have classes for each category.
This will be fastest (you don't need lookup tables): so just add the folloowing $catClass to body:
if ($option=='com_content' && $view=='category')
$catClass = ' cat'.JRequest::getVar('id');
after this, $catClass will contain something like ' cat16' which you can append to your
So you can insert the above code in your template before "
<body class="your classes <?php echo $catClass; ?>">
which will output something like:
<body class="your classes cat16">
Then in a single css you will have rules:
body.cat16 {background-image:url(../image1.jpg);}
body.cat18 {background-image:url(../image2.jpg);}
this will be better than having separate css files because it will be much faster to load for browsers.
There are several approaches to your problem
1)You can use template overrides for each category, loading different templates in your component
2)You can load different css styles
$document =& JFactory::getDocument();
If ($cat==1){
$document->addStyleSheet("/mybluetheme.css");
}
else
{
$document->addStyleSheet("/myredtheme.css");
}
3)You can add specific classes to the body of your document using a custom plugin http://www.rockettheme.com/magazine/jan-2012/1342-creating-a-simple-macro-replacement-plug-in
4)Least but not last you can echo a hidden div in your body specifying the color
<?php
if($category==1){
$color="#ffffee";
}
else{
$color="#eeeeee";
}
echo "<div class='hiddencolor' style='display:none'>".$color."</div>";
?>
Then use some jquery code
$(document).ready(function() {
var mycolor = $(".hiddencolor").text();
alert(mycolor);
// change the body background css
$("body").css("background", mycolor);
});
You can try this method of editing the template code. Just have to make it dynamic. http://forum.joomla.org/viewtopic.php?p=2271520
or
you can save the category's color in a table. Query it when the page loads and use it to color the site's background if a value is returned. Basically putting the code in the template.