Different layout for each category

[jeyjoo]

Is it possible to have a different layout for each category? Could I use CSS to give a different look to each category in the shop?
Thanks

[Genius WebDesign]

Sure, that is possible.
All you have to do is set classes or IDs on the different wrappers with reference to the current category-name or ID, in order to make this work.

If none of your categories are named the same you can use the "$this->category->category_name" -  reference.

In the default.php template file, located in /templates/your-template´s-name/html/com_virtuemart/category/ go to: <?php // Start the Output    (around line 200)
After this point the code is about how the products are showed in the category view, and from here on out you can change or add div-classes/ID´s ect.

An examlpe (if you want to individually style the "row"-div on each category):

change:

Code Select Expand

// this is an indicator wether a row needs to be opened or not
if ($iBrowseCol == 1) { ?>
<div class="row">
<?php }

to

Code Select Expand

// this is an indicator wether a row needs to be opened or not
if ($iBrowseCol == 1) { ?>
<div class="row" id="<?php echo $this->category->category_name ?>">
<?php }

So if you are in a category called "Computers", the "row"-div will now have the class "row" and ID "Computers", which makes it possible to further CSS-style the row-div for that specific category without bypassing the styling already made for the "row"-class.
If you want to bypass any CSS-styling made to the "row"-class you can alter the code like this:

Code Select Expand

// this is an indicator wether a row needs to be opened or not
if ($iBrowseCol == 1) { ?>
<div class="row<?php echo $this->category->category_name ?>">
<?php }

In this case the row class will be unique for each category (atleast if no two categories are named the same).

Of course you can use this PHP approach on all html tags that support classes and IDs.

Personally I prefer using the category names instead of IDs, if possible, because it makes it easier to systemize your CSS-scheme.

[PRO]

^ if you do the above , you need to trim the spaces in the name

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

[Genius WebDesign]

That´s true.
To avoid whitespaces in the category names from showing up in the class or ID names you can use str_replace().
Something like this example, where whitespaces will be replaced with "_":                     

   

Code Select Expand

<div class="my_styling_<?php echo str_replace(' ', '_', $this->category->category_name) ?>">

If the category name is: "PC Hardware", then the class will be: "my_styling_PC_Hardware"

[Genius WebDesign]

Also, regarding classes, you can assign multible class names to each tag. So if you want to keep an existing class styling (class1) on a specific tag, while adding some extra styling (class2), you can simply put an extra class name in that tag with a white space in between, like this:

<div class="class1 class2">

This doesn´t work for ID´s, though. ID´s have to be unique to each element.

[jeyjoo]

ok thanks fabelmik
A bit more complicated than I had hoped, but the main thing is that it is possible 

[Genius WebDesign]

Yea, it´s a bit complicated.

If you follow the technique, showed by BanquetTables.pro, it becomes more simple. I guess it´s kinda stupid not to do it his way in any case, actually.

Here is what I would do..

As BanquetTables.pro said here, http://forum.virtuemart.net/index.php?topic=94044.0, you simply wrap the entire category code with a div.
Open your default.php, in the override folder, and insert one of these codes in the very beginning:

This one, if you want your class-names to include the category-ID:

Code Select Expand

<div class="h<?php echo JRequest::getInt('virtuemart_category_id'); ?>">

This one, if you want them to include the category-name:

Code Select Expand

<div class="css_<?php echo str_replace(' ', '_', $this->category->category_name) ?>">

then, in the same php-file, add this code in the very end of the file:

Code Select Expand

</div>

Now, when this is done, you can open your template´s css-file and add css-stylings on all the elements in the category view, and have them apply only to specific category-IDs or category-names, of course depending on which code you chose to add in the beginning.

Here is an example of applying css-styling to all divs with the class-name "spacer" in the category default.php, and the styling only applies to the category named "Music":

Open your template css-file, e.g. "template.css", and add the following code at the end of the file:

Code Select Expand

.css_Music .spacer {
height:237px;
}

This method requires the least amount  of coding and should always be used in cases like this, I think.