VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Grafica on September 23, 2013, 10:52:31 AM

Title: template creation and CSS classes
Post by: Grafica on September 23, 2013, 10:52:31 AM
Hi, first time I'm trying to create/edit a VirtueMart template. I have some trouble due to the fact that LOTS of markup hasn't a class associated to it.

for example, the DIVs containing the image and the one containing the "product details" button in the shop home/frontpage, don't have a class, while the DIV for the price has it.


[...] div#main_cont div.latest-view div.row div.product div.spacer div

[...] div#main_cont div.latest-view div.row div.product div.spacer div.product-price

[...] div#main_cont div.latest-view div.row div.product div.spacer div


the above are CSS paths for the DIVs containing (in order) image, price, product details button.
as you can see, there's no way to apply a CSS rule to the first withouth applying it to the last one, and vice-versa.

this "problem" is spread on all the code. Am I missing something? Am I proceeding with the wrong approach?

Thanks in advance.
Title: Re: template creation and CSS classes
Post by: Grafica on September 23, 2013, 12:43:05 PM
I've found a checkbox labeled "Using the VirtueMart CSS" in Configuration/Templates. If I un-check it the shop design will lose any style, but the markup will gain lots of CSS classes assigned to every element

This would partially solve my issue, but:
1) I would prefer to modify the existing style, instead of re-doing everything from scratch. There isn't a way to add classes to the markup without losing the current styling?
2) but the online help suggest to keep the forementioned element checked:
http://docs.virtuemart.net/manual/21-configuration-menu/62-configuration.html#templates
Title: Re: template creation and CSS classes
Post by: jenkinhill on September 23, 2013, 12:58:09 PM
To add classes/ids to page elements edit the view templates and set the edoted files as template overrides. If adding new css descriptors it is better to either add them to your Joomla templae.css or create a custom.css file. The aim here is that the layout changes do not get overwritten by the next VM update.
Title: Re: template creation and CSS classes
Post by: Grafica on September 23, 2013, 14:27:40 PM
Thank you very much for reply.

The override is done in the same way as for other Joomla components, right?

Thanks again!
Title: Re: template creation and CSS classes
Post by: jenkinhill on September 23, 2013, 15:45:03 PM
Yes.  http://docs.virtuemart.net/tutorials/33-templating-layouts.html and http://www.ostraining.com/blog/joomla/overrides