Changing Backround Color or Images based on Product Category selection

gore · April 08, 2013, 12:11:03 PM

Dear All,

I am new to this forum, and Joomla development as well. Tha task required a completion is that, I would like to change the backround color or Image, based on selection of product category.
Is there any idea or technique ? Is there any other post related to this case

I am using Joomla 2.5 and VM 2.xxx

Thanks in advance
Greg

jenkinhill · April 08, 2013, 16:08:24 PM

You could probably do this using some JavaScript to change applied css files, or use in-line styles in template overrides which are assigned to specific categories. Not doe it myself, though, as I have never needed anything like that.

gore · April 08, 2013, 21:13:34 PM

Thank you for your answer. Could you tell me what do you mean by saying "in-line styles in template overrides"? I know that it will sounds funny, but I dont have a clue about it. Actually I have 5 product manufacturers. These are shown in a list box. The task is, when select Prada or Dolce & Gabbana manufacturer change the backround image.

I had checked Product Categories or Manufacturers and I can not find something in order to set stylesheet. \

These that you mentioned before is a property? (in-line styles in template overrides)

Tnks

PRO · April 08, 2013, 22:50:18 PM

?
http://forum.virtuemart.net/index.php?topic=94044.0

gore · April 09, 2013, 16:06:50 PM

Actually I did not understand what you meant. I have the code below

   
<?php echo $text_before ?>
<form action="<?php echo 'index.php?option=com_virtuemart' ?>" method="post">
   <font color="#000000"><b> Επιλογή Brand </b></font>
   <?php echo JHTML::_('select.genericlist', $manufacturers, 'virtuemart_manufacturer_id', 'class="inputbox" onchange="this.form.submit()"','virtuemart_manufacturer_id', 'mf_name', 1 ) ; ?>
<input type="hidden" name="view" value="manufacturer"/>
</form>
------------------------------------------------------------------------------------------
The think that I want is, for example by selecting something from virtuemart_manufacturer_id to change the backround colour .
Where do I have to put the code

Thanks again fro your time

PRO · April 09, 2013, 22:18:40 PM

Quote from: gore on April 09, 2013, 16:06:50 PM
Actually I did not understand what you meant. I have the code below

   
<?php echo $text_before ?>
<form action="<?php echo 'index.php?option=com_virtuemart' ?>" method="post">
   <font color="#000000"><b> Επιλογή Brand </b></font>
   <?php echo JHTML::_('select.genericlist', $manufacturers, 'virtuemart_manufacturer_id', 'class="inputbox" onchange="this.form.submit()"','virtuemart_manufacturer_id', 'mf_name', 1 ) ; ?>
<input type="hidden" name="view" value="manufacturer"/>
</form>
------------------------------------------------------------------------------------------
The think that I want is, for example by selecting something from virtuemart_manufacturer_id to change the backround colour .
Where do I have to put the code

Thanks again fro your time

background color of the module? or the whole page?

gore · April 09, 2013, 23:15:36 PM

I want to change the backround either the color or the image. It depends on what is the best suitable and shown

PRO · April 10, 2013, 16:42:13 PM

of the module or of the whole webpage?

gore · April 10, 2013, 20:10:39 PM

Of the page

PRO · April 10, 2013, 20:48:37 PM

to do the whole webpage,

this will go in your template

This is the php function
it works with manufacturer id, & category id

<?php function vPageClass(){
if ( JRequest::getInt('virtuemart_category_id') !=0){
$class='c'.JRequest::getInt('virtuemart_category_id');
}
elseif ( JRequest::getInt('virtuemart_manufacturer_id') !=0){
$class='m'.JRequest::getInt('virtuemart_manufacturer_id');
}
return $class;
}?>

THEN: in your <body tag>

You have to add this
<?php echo vPageClass() ?>

Here is an example, of how I just tested this on my site

<body class="blue firefight <?php echo vPageClass() ?>" id="firefight">

THEN:

what that does is add a class like

c12 to the body, When the category id is 12.
if you were viewing category id 25, it would be c25

The same with the manufacturer ID, BUT is m12, and m25

THEN,

You will have to add the css to your template css file , then you can choose the color you want etc.

I sure hope you can figure it out from here

&& ofcourse, you should backup any file before editing it

News:

Changing Backround Color or Images based on Product Category selection