VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: subang_vet on January 13, 2012, 08:55:08 AM

Title: Categories displayed vertically.
Post by: subang_vet on January 13, 2012, 08:55:08 AM
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

Title: Re: Categories displayed vertically.
Post by: tobisagt on January 13, 2012, 09:46:49 AM
I'am also waiting for a "nice" virtuemart menu solution.
Title: Re: Categories displayed vertically.
Post by: ShowLiFE on January 13, 2012, 10:23:46 AM
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
Title: Re: Categories displayed vertically.
Post by: subang_vet on January 13, 2012, 11:56:17 AM
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.
Title: Re: Categories displayed vertically.
Post by: tobisagt on January 13, 2012, 13:00:16 PM
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;
}
Title: Re: Categories displayed vertically.
Post by: subang_vet on January 13, 2012, 14:13:56 PM
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
Title: Re: Categories displayed vertically.
Post by: tobisagt on January 13, 2012, 14:26:26 PM
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;"
Title: Re: Categories displayed vertically.
Post by: PRO on January 13, 2012, 14:27:29 PM
what do you have set to "default categories per row" ???
Title: Re: Categories displayed vertically.
Post by: 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.

[attachment cleanup by admin]
Title: Re: Categories displayed vertically.
Post by: tobisagt on January 13, 2012, 15:16:21 PM
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!
Title: Re: Categories displayed vertically.
Post by: subang_vet on January 13, 2012, 16:12:30 PM
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.
Title: Re: Categories displayed vertically.
Post by: tobisagt on January 13, 2012, 16:15:26 PM
You'll find it here:

templates/yougrids/css/joomla16.css