Categories displayed vertically.

[subang_vet]

Hi all, I am new to Virtuemart and I am currently using joomla 1.7 and VM 2.0.

My categories are displayed vertically, but I want them to display horizontally. I have tried changing it in Configuration as well as in Product Categories, the 'Default Number of Products per Row' doesn't seem to have any effect on Categories page and it only applies to the Product display page.

I have tried to look for other posts that face similar situation, but they use older version of VM. Any suggestions is appreciated.

This is the website I am working on:
http://sllcommy.pandandesign.com/index.php?option=com_virtuemart&view=categories&virtuemart_category_id=2&Itemid=469

[tobisagt]

I'am also waiting for a "nice" virtuemart menu solution.

[ShowLiFE]

Hello
I think the problem is in the template, the template Beez_20 try and you will find the problem or suggestions or anything else.
Best regards Show LiFE

[subang_vet]

Hi ShowLiFE,

Thank you for replying my post.

Do you mean changing the Category Template within the Configuration? I have tried every templates in that drop down menu ( Use Joomla Default, atomic, beez5, beez_20), but none of them works.

Any more suggestions will be appreciated. Thank you again.

[tobisagt]

Hi ShowLife,

its not a perfect solution but it works if you dont need a drop down menu!

Just put this to your CSS:


/* Changes the menu to horizontal */
ul.VMmenu li {
   float: left;
}

/* Makes the subitems invisible */
li.VmOpen ul {
   display: none;
}

[subang_vet]

Hi tobisagt,

I wasn't talking about the menu, I meant the product categories. From my website, you can see the Indoor Tools (the image) is beneath the Outdoor Tools and what I want is to have Indoor Tools NEXT to Outdoor Tools, preferably on the right of it.

http://sllcommy.pandandesign.com/index.php?option=com_virtuemart&view=categories&virtuemart_category_id=2&Itemid=469

[tobisagt]

ok,

with firebug in use i see:

.category {
    width: 100%;
}

this overwrites:

.width20 {
    width: 20%;
}

Solution:

Delete the "100%" in ".category" or put an "!important" after the "width: 20%" -> "width: 20%!important;"

[PRO]

what do you have set to "default categories per row"

[subang_vet]

Hi BanquetTables.pro,

It's 5

As you can see from my attached screen capture.

[attachment cleanup by admin]

[tobisagt]

Hi BanquetTables.pro,

It's 5

As you can see from my attached screen capture.

I told you:

Its a template problem. Just delete the 100%! You overwrite the 20%. 20% x 5% = 100%.

I tried this with firebug and it worked!

[subang_vet]

Hi tobisagt,

I couldn't find .category but I found this:


.category-view .row .category .spacer h2 a img {
  height:auto;
  margin-top:6px;
}

and I deleted the width:100px it was there; but it didn't work.

[tobisagt]

You'll find it here:

templates/yougrids/css/joomla16.css