how to stylize product listing box (Atomic template)

[guybr]

This should be easy for me to figure out but I'm having a hard time finding the correct css callups to edit:

I'm using the Atomic template, which displays the product title, then image, below it the price and finally at the bottom the "product details" button.

Specifically I want to add a background color to the product title; ideally I'd like to add color/styling to the whole product listing itself.

If this is what I see using firebug, and the product title rests on <h3> - how do I add a background color (or any styling at all) so that only on a product listing it takes hold? I tested changes on <h3> in general - and of course it affects any location where <h3> is called up, but not restricted to just the product listing... :

<div class="product floatleft width25 vertical-separator">
<div class="spacer">
<h3>
<a title="MY PRODUCT TITLE" href="/productdetailsurl/name.html">product title</a>
</h3>
<div>
<a class="modal" href="fullurltoproductimage.jpg" title="imagename">
</div>
<div class="product-price">
<div class="PricevariantModification" style="display : none;">
<div class="price-crossed">
<div class="PricesalesPriceWithDiscount" style="display : none;">
<div class="PricesalesPrice" style="display : block;">
<div class="PricepriceWithoutTax" style="display : block;">
<div class="PricediscountAmount" style="display : none;">
<div class="PricetaxAmount" style="display : none;">
</div>
<div>
<a class="product-details" title="productname" href="/urltoproductdetails/name.html">Product details</a>
</div>
</div>
</div>

<h3> is referenced in blueprint/screen.css and in the VM file vmsite-ltr.css. I see a specific reference to it here in the VM file - is this where I make the changes? :

.featured-view .spacer h3, .latest-view .spacer h3, .topten-view .spacer h3, .recent-view .spacer h3, .related-products-view .spacer h3, .browse-view .row .product .spacer h2 {
    font-size: 14px;
}

Thanking anyone ahead of time for any help they can give me...

[jenkinhill]

Current category vie (product listing) template does not include modal - is that an old VM version? Current is 2.6.10

You can edit the cat view file, components/com_virtuemart/views/category/tmpl/default.php to add an additional class for the title and use the edited file as a template override.
Then you have something to hang the css to.

http://docs.virtuemart.net/tutorials/templating-layouts.html

[guybr]

I'm using VM 2.6.6; but the snippet I posted is from the store homepage (which display the categories on top, then recent items and then most popular below) - the default appearance for the page...

[guybr]

...I created a new class in vmsite-ltr.css (.producttitle - to display a background color behind the product name) and assigned it some values, and saved it in mytemplate/css
then I called up the new class in default_products.php and saved in mytemplate/html/com_virtuemart/virtuemart/

and I disabled the virtuemart css option in the CP.

The html in the php file looks like this:
<div class="spacer">
<div call="MYNEWCLASS">
<h3>
<a title="MY PRODUCT TITLE" href="/productdetailsurl/name.html">product title</a>
</h3>
</DIV>
<div>

The end result is two-fold: my callup doesn't show up when I use firebug (i.e. my changes don't appear) and the display in general is way off. Instead of displaying in grid form as it had till now, everything is in list form (on the store homepage products, categories, latest products are in list form, the page numbers are displayed vertically; on the product detail page even the additional images are in vertical display images) and the category title text size is quite large.

2 questions:
* any idea what I did wrong with my own override, and
* is it usual for disabling the VM css to have such far reaching consequences on the rendering of the site?

This is the only override I've done, so there shouldn't be any other effects to the site's rendering -?

Better yet - should I just copy all the relevant VM files into my template even if I didn't make changes to them - would that at least, prevent the overall wierd rendering of the site if I deactivate VM css?

[GJC Web Design]

if u

and I disabled the virtuemart css option in the CP.

then all the styles in the VM css won't load. hence what you see

read  http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html

[guybr]

...but doing what is suggested in that link only addresses the image files - don't I need to add more css files to my template directory, to fix the rendering problem (list form instead of the grid display)?

indeed: I did copy and place the image files in my template directory - but the rendering of the site remains messed up. Should I also be uploading there the rest of the components etc. even if I didn't alter anything in those files?

[jenkinhill]

If you saved the modified vmsite-ltr.css file to your Atomic template css directory then you should still leave "Using the VirtueMart CSS " switched on, or VM won't try to look for the file. You can delete or rename the vmsite-ltr.css left in the VM assets directory.

[guybr]

Thanks! I tried that too now - and still the same end result: even without disabling the virtuemart css, the pages render in list format (including the page numbers), and my customized changes don't appear - even with firebug I don't see them in the code.

I placed the altered php file here - it's the only one there: myurl.com/subdirectory/templates/my-template/html/com_virtuemart/virtuemart/default_products.php
and the css file here: myurl.com/subdirectory/templates/my-template/css/vmsite-ltr.css
(I have VM+Joomla set up in myurl.com/subdirectory/ for my store - the rest of the site at the moment does not run on a CMS)

Any ideas what I'm not doing right? If I upload my edited files in place of the originals (i.e. without doing an override) then I do see my edits...


Another thought that came up is this: in the CP, 'VM configuration' sub menu (VM 2.6.6) there are 3 dropdown menu options "category layout", "product layout" and "layout for your homepage" - all are presently set to "no override". Am I supposed to change something there?

[GJC Web Design]

really don't understand what your trying to do - and I guess without live urls no one else will

myurl.com/subdirectory/templates/my-template/html/com_virtuemart/virtuemart/default_products.php is the VM home page prod listing

is that what your try to change cos above cat views are mentioned

[guybr]

yes, I'm trying to change the appearance of the VM store homepage, starting first with the product listing. That's why only that file is in the override folder (along with the vmsite-ltr.css in the /css file)

What I tried to mention above - if it helps with solving my problem with the unrecognized override - is that I have VM and Joomla installed in a subdirectory on the site, because I'm using them at the moment only for my store.

I mentioned that, because I thought maybe the fact that they are not in the root directory is a reason why my overrides aren't being seen by VM...

[GJC Web Design]

but is a simple case of a bit of debugging - find out if the css file that has the rules is being loaded - if not find out why
if it is check yiur rules are be 1. applied (no syntax mistakes) 2. not over ridden

[guybr]

As best I can see, the override itself isn't being recognized by VM:

a) when I create the override files (and change the names of the original files), I get very odd rendering of the whole VM site (list style, not grid display) - and my edits don't appear when checking with Firebug, but
b) if I simply overwrite the existing files in their existing locations, VM does see and render the site as I want

So my problem is, why isn't the override procedure working? Jenkinhill wrote earlier that for the Atomic template (which I'm using), I should *not* disable the VM css - but is there some additional that I have to do in order to get the override 'seen' by VM?

One thought I had was that maybe I need to take all of com_virtuemart and place it in my override file?

[GJC Web Design]

this just works... so you have to check your putting your over rides in the correct folder paths

when I create the override files (and change the names of the original files)

don't change the names - completely un-nesscesary

I should *not* disable the VM css - but is there some additional that I have to do in order to get the override 'seen' by VM

correct - don't - and no  - nothing more needed

One thought I had was that maybe I need to take all of com_virtuemart and place it in my override file?

definitely not - only over ride what your over riding

[guybr]

Thanks GJC, at least you've laid out the parameters I need to use for the QA.

As I'm using the Atomic template, which didn't require that I disable the VM css, can you confirm that I don't need to change anything as far as the location of the override files? For example, if I placed my edited php file here:
myurl.com/subdirectory-for-VM-Joomla/templates/my-template/html/com_virtuemart/virtuemart/default_products.php - is that correct?

And if I place the css file here: myurl.com/subdirectory-for-VM-Joomla/templates/my-template/css/vmsite-ltr.css - is that also correct? Specifically here, Atomic has a subdirectory for 'blueprint', so I just want to make sure I don't have to put my css file there...

[GJC Web Design]

myurl.com/subdirectory-for-VM-Joomla/templates/my-template/html/com_virtuemart/virtuemart/default_products.php

correct

myurl.com/subdirectory-for-VM-Joomla/templates/my-template/css/vmsite-ltr.css

correct - but it is simple enough to look in the source code or with Firebug to see if it loads