Add to Cart Button is Always Green and Huge - How to change?

[germar74]

Hi all
I have been hunting and hunting for days and it is time now to ask
I am using J 1.5 and VM 2.0.4 and a custom Artisteer made template

My problem is is that the Add to Cart Button is Aussie Aussie Aussie Green .... can this colour be changed? is it in a CSS somewhere or a setting to change this?
Plus the button is the size of a small house (well the size of my little finger) .... can this also be changed? to make it smaller.

Thank you in advance
Cheers Gerard

[germar74]

Ok I have found a green at the bottom of backgrounds.png in /components/com_virtuemart/assets/images/vmgeneral
there are 3 colours down this swatch with the bottom being the green so I changed this with no luck of changing the colour of the add to cart button

[germar74]

yay it eventually updated now to change the outline

you need to edit the css file vmsite-ltr.css in /components/com_virtuemart/assets/css
do a Ctrl + F for the line with 00a000 in it and you will have the code to change .... I even shortened the button too

[leahRae]

Thank you soooooooooo much, this green was the bane of my existence this last update. It was driving me insane that I could change the VM featured products Add to Cart button on every page except the front page.

The color is awful, but now I know what to look for on the next update 

Thanks!!!!!!

L

[Sophia23]

My mothers website has this problem again.
First I could work around it by downgrading back to 2.015 as described here http://forum.virtuemart.net/index.php?topic=111379.0
but would get this error after a few days:

Error: Exception in loadConfig for unserialize hidemainmenu b:0;

I tried all of the solutions posted here:
http://forum.virtuemart.net/index.php?topic=112999.0

And they work, but the green buttons are back every single time.
I tried all of the fixes described in all of the "green button" treads here on the forum, with no luck.

I found the only way to get the default template buttons working is by switching VM CSS of in the control panel
but this brings Exception in loadConfig for unserialize hidemainmenu b:0; back.

So I'm stuck between green buttons or this error message.

Max, I've mentioned this problem last week to you, I really don't know what else to try at this point.

Thanks.

Joomla 2.5.8
VM 2.0.18a

[jjk]

The color of the 'Add to Cart' button is controlled by (approximately line 52) in the file ...\components\com_virtuemart\assets\css\vmsite-ltr.css:

Code Select Expand

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}

It looks at the image file ...\components\com_virtuemart\assets\images\vmgeneral\backgrounds.png, which consists of shades of white/red/green. You can change the selected color spot by adjusting the default '...background position:0 -160' i.e. to -90 to get a dark red button. If you want a color different from white/red/green, you would have to exchange the 'backgrounds.png'

[Sophia23]

The color of the 'Add to Cart' button is controlled by (approximately line 52) in the file ...\components\com_virtuemart\assets\css\vmsite-ltr.css:

Code Select Expand

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}

It looks at the image file ...\components\com_virtuemart\assets\images\vmgeneral\backgrounds.png, which consists of shades of white/red/green. You can change the selected color spot by adjusting the default '...background position:0 -160' i.e. to -90 to get a dark red button. If you want a color different from white/red/green, you would have to exchange the 'backgrounds.png'

I'd much rather have the theme colored button that i have currently working (albeit with the error "Exception in loadConfig for unserialize hidemainmenu b:0; " displayed on the site. It was working fine over a year and there is no reason it should not continue to do so. I need to find the cause of the problem.

Thank you for the suggestion tho.

[Sophia23]

*bump

[jenkinhill]

http://forum.virtuemart.net/index.php?topic=112999.0

[alquemius]

EXCELLENT  I've been wanting to change that bloody color for a loong time!

This is one of the details that should be included on configuration editing options!

Thanks guys!

[Sophia23]

http://forum.virtuemart.net/index.php?topic=112999.0

I actually posted that link myself in the post above, explaining that I have tried these solutions.
It works, but the horrendous green buttons are the result.
That error message is actually less scary looking than those buttons, tho I'd like to resolve both.

[jillymot]

Just wondering whether if you change the colour of the buttom in the stylesheet in the following file, will it be overridden when upgrading to a new version?

\components\com_virtuemart\assets\css\vmsite-ltr.css

If so, what is the correct method to use to prevent this from happening?

Using Joomla 2.5 VirtueMart 2.0.20b

UPDATE:  Found the answer to my question here:  http://forum.virtuemart.net/index.php?topic=90935.0

To be specific, I copied the following line of code from \components\com_virtuemart\assets\css\vmsite-ltr.css:

Code Select Expand

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}

and pasted into the end of the css file \templates\[joomla default template name]\css\template.css

then made the modifications required.

In my case, I just wanted to change to a solid colour and adjust the button size and font-size to be more in line with buttons on the rest of the site.

Code Select Expand

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:130px;background:#15BCEF;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;cursor:pointer;height:28px;text-align:center;letter-spacing:1px;padding:4px 5px;}

Ensure that in Configuration > Templates  that the Select the default template for your Shop is set to 'Use Joomla default'

[jjk]

This tutorial might be of interest to you too: http://docs.virtuemart.net/tutorials/33-templating-layouts/106-override-vmsite-ltr-css.html