Custom Add to Cart Button?

[ricewing]

I'm using Virtumart 3.0.12 and want to replace the css "Add to Cart" button with a .png button image. How can I create an Over Ride to replace this image.  I tried adding the below code into the vm-ltr-site.css file, and the button displays, but when I hover over the button it jumps up. The button I'm using is attached.

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:125px;background:url(../images/vmgeneral/btn_add.png);color:#fff;border:solid #00a000 0px;border-radius:0px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:0px;cursor:pointer;height:40px;text-align:center;letter-spacing:1px;padding:4px 5px;}

Suggestion?

[SnakeFFM]

local machine or already online?

Add a class for 'hover', for instance:

span.addtocart-button input.addtocart-button:hover,span.addtocart-button input.notify-button:hover {
width:125px;background:url(../images/vmgeneral/btn_add.png);color:#fff;border:solid #00a000 0px;border-radius:0px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:0px;cursor:pointer;height:40px;text-align:center;letter-spacing:1px;padding:4px 5px;
}

also dont change the initial vm-ltr-site.css, as your changes ll be wiped away once you update VM...add a new css file and import the vm-ltr-site.css into this one bq @import ... and save your changes there...

hope that helps...

[ricewing]

Thank you SnakeFFM. I added your code below the button code I had. But it only made the button jump down rather than up. Basically it seems to be rolling the image up or down.

Also, I liked your idea about putting that in a place that won't get overwritten with upgrades but did not understand the part that said "add a new css file and import the vm-ltr-site.css into this one bq @import". I'm not sure what you meant by "bg @import". Sorry.

[SnakeFFM]

Hi,

I always enjoyed when people helped me out and... be sure u ll always find at least some kind of solutions, so dont worry.
(jumbo from one page checkout is a fantastic example for good support) 

(you should read and understand:
https://docs.joomla.org/JDocument/addStyleSheet
http://www.inmotionhosting.com/support/edu/joomla-3/create-template/add-css-and-js
http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html
)

You should set up a new .css file, lets call it 'ricewing_custom.css' or 'virtuemart_custom.css'... save it in your css folder in your template folder...

Go to your template folders -> open index.php in this index.php you should reference to your new css file, you can do this, for instance, by using this code:

<?php JFactory::getDocument()->addStyleSheet($this->baseurl . '/templates/' . $this->template . 'ricewing_custom.css'); ?>

Now, you can just write your 'changes' into this custom.css - what I meant by @import is to first of all @import the standard virtuemart css file into your new css file. Never done before? Please check: http://stackoverflow.com/questions/147500/is-it-possible-to-include-one-css-file-in-another.

Alternatively, if that is all too complex for you, just do it this way: http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html

Ok?

The reason why your button jumps is not that its a lucky rabbit, though this might be cool. The reason is that there are standard css rules left which you didnt overrite with your new rule... Do you use firebug? If not, please get it (google for it).

Lets see what Virtuemart does in the standard layout:

Code Select Expand



span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button {
    background: none repeat scroll 0 0 #0077b3;
    border: 1px solid #00669a;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 0;
    max-width: 100%;
    padding: 12px;
    text-align: center;
}


As far as I can see, there is no hover class for the button (http://demo.virtuemart.net/pagination/ceg-0-03-detail)

So... thats the next learning experience for you, always write your code that way:

Code Select Expand


span.addtocart-button input.addtocart-button:hover, span.addtocart-button input.notify-button:hover {
width:125px;
background:url(../images/vmgeneral/btn_add.png);
color:#fff;
border:solid #00a000 0px;
border-radius:0px;-webkit-border-radius:4px;-moz-border-radius:4px;
font-size:0px;
cursor:pointer;
height:40px;
text-align:center;
letter-spacing:1px;
padding:4px 5px;
}


Well, if it still jumps...there must be other rules (hopefully no javascript/jquery) why it jumps, maybe related to margin, width or whatever....as I dont see it, its quite difficult to figure it out...however, as we already made the hover class equal to our normal hover class... try to add the following to your ':hover'

{ margin: 0; }

Alternatively, please get firebug and inspect the element in hover state..then show us the code...

[Spiros Petrakis]

Hi ricewing,

put your button image in components\com_virtuemart\assets\images folder and add the following css at the end of vm-ltr-site.css 

Code Select Expand


span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button {
background: url(../images/btn_add.png) center no-repeat transparent;
border: none;
color: transparent !important;
width: 125px;
}

span.addtocart-button input.addtocart-button:hover, span.addtocart-button input.notify-button:hover, input.highlight-button:hover, a.highlight:hover {
background-position: center;
}


this will only work for the default virtuemart theme , if you are using any template that overrides virtuemart css files and views it will not work.

The correct way would be to override the vm-ltr-site.css and images as explained in the link SnakeFFM mentioned so your changes will not deleted when you update virtuemart.