Search code examples
phpjoomlajoomla2.5joomla-extensions

Change JOOMLA site background according to IF condition


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


Solution

  • 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.