Virtuemart Support :: Topic: change the color of the button (1/1)

Welcome, Guest

TOPIC: change the color of the button

change the color of the button 10 years 2 months ago #8593

Stefano Mastruzzi	Hi, I want to change the color of the "Buy" button is this possible? if so, how? thanks Attachments: BASSOBassm...0-29.png (166KB)
	The administrator has disabled public write access.

change the color of the button 10 years 2 months ago #8626

Support

Hi,

With using FireBug, this kind of CSS modifications are extremely easy:
www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

To change the background color of Add to Cart button, open this CSS file:
/templates/YOUR_TEMPLATE/html/com_virtuemat/assets/css/flexibleVM2Global.css

Look for this CSS rule:

.FlexibleCSS3ButtonInner {
	overflow: hidden;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	position: relative;
	display: block;
	height: 40px;
	background: rgb(143,200,0);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhmYzgwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NjhlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(143,200,0,1)), color-stop(100%, rgba(102,142,0,1)));
	background: -webkit-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
	background: -o-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
	background: linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#668e00', GradientType=0 );
	-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
	-moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
	box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
	-webkit-transition: box-shadow 0.3s ease-in-out;
	-moz-transition: box-shadow 0.3s ease-in-out;
	-o-transition: box-shadow 0.3s ease-in-out;
	transition: box-shadow 0.3s ease-in-out;
}

and change the "Background" rule. We have used Gradient Color to generate the background color. You can create your own from this address below:
www.colorzilla.com/gradient-editor/

Regards,
Support

The administrator has disabled public write access.