VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: germar74 on May 02, 2012, 11:27:51 AM

Title: Add to Cart Button is Always Green and Huge - How to change?
Post by: germar74 on May 02, 2012, 11:27:51 AM
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
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: germar74 on May 02, 2012, 13:59:14 PM
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
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: germar74 on May 02, 2012, 14:09:43 PM
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
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: leahRae on July 04, 2012, 03:00:45 AM
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
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: Sophia23 on February 24, 2013, 18:23:27 PM
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 (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
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: jjk on February 24, 2013, 19:52:39 PM
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:

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'
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: Sophia23 on February 24, 2013, 20:47:21 PM
Quote from: jjk on February 24, 2013, 19:52:39 PM
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:

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.
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: Sophia23 on March 06, 2013, 13:18:18 PM
*bump
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: jenkinhill on March 06, 2013, 13:24:50 PM
http://forum.virtuemart.net/index.php?topic=112999.0
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: alquemius on March 07, 2013, 15:44:25 PM
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!
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: Sophia23 on March 07, 2013, 18:37:17 PM
Quote from: jenkinhill on March 06, 2013, 13:24:50 PM
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.

Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: jillymot on April 08, 2013, 09:19:30 AM
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 (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:

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.

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'
Title: Re: Add to Cart Button is Always Green and Huge - How to change?
Post by: jjk on April 08, 2013, 09:51:15 AM
This tutorial might be of interest to you too: http://docs.virtuemart.net/tutorials/33-templating-layouts/106-override-vmsite-ltr-css.html