News:

Support the VirtueMart project and become a member

Main Menu

Categories displayed vertically.

Started by subang_vet, January 13, 2012, 08:55:08 AM

Previous topic - Next topic

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

#6
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

Quote from: subang_vet on January 13, 2012, 15:13:05 PM
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