Can I seperate/line break the product categories in VM?

I would like to do this to my product categories found in virtuemart (see img)
I want to seperate the categories based on certain details so that each certain set of categories is on its own line. Therefore I want to make spaces between some of the category items.

Is this possible in css?

Hi,
sure if you know CSS a little bit and use our tips, please read them, you will learn how to use firebug + custom css:

1) http://www.gavick.com/documentation/joo ... -size-etc/
2) http://www.gavick.com/documentation/joo ... -template/

p.s.
This is your navy border color

Code: Select all

border:1px solid #203152;

p.s.
This is your navy border color

Code: Select all

border:1px solid #203152;

Thank you for all your help Pawel

I have read over those tips and that is exactly how I am editing this website. However with my current issue, I am still having trouble setting specific category's onto the next line.

I need to target the end items of the rows and place them on the next line, but I am not quite sure how I would do that.

I'm not sure it's possible to use different border color for each category without php code customization.

By the way, Are you using VM views (from Menu Manager) or module to show products ?

I'm not sure it's possible to use different border color for each category without php code customization.

By the way, Are you using VM views (from Menu Manager) or module to show products ?

I am using Virtuemart Views - my menu item is set to show the virtuemart category layout.
However the only thing I want to accomplish with this page is to make large spaces between some of the items so that I can categorize them on that page.

The image in this post is what I have now. All of the product categories are side by side in lines.
The image above in previous posts is what I would like to finish with - where I have square spaces after some categories so that I can organize them instead of having them all squished together in lines.

How would I do this with css? Would it be a matter of making a new div with custom padding/margins to produce the space?

Sorry for delay,
to reduce space between products box you have to also override css.


Default value:

Code: Select all

.row .product.width50, .row .product.width33, .row .product.width25, .row .product.width20 {
    padding: 0 10px;
}

I suggest to use 5px if you want less paddings between VM items.

p.s.
Please use firebug next time