Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Template - CleanMart (SKU# FLEX-00015)

TOPIC: cart button colour change

cart button colour change 10 years 5 months ago #7544

Hi there,

I wish to change current cart button colour from green to blue or any other. Also the font is to big on the cart button.

In chrome the social buttons breaks as well, last one always send to be on bottom.


Can you please help me with that?

Site address: cornilleau.com.pl
The topic has been locked.

cart button colour change 10 years 4 months ago #7582

Hi,

First of disable the "GZIP" compression to see which element is controlled by which CSS file.
Then take a look at this forum thread to make the CSS changes:
www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

You should start using "Firebug" for CSS modification (changing the background of elements or changing the font size).
The CSS file you are going to make the change is this:
cornilleau.com.pl/templates/yoo_capture/html/com_virtuemart/assets/css/flexibleVM2Global.css

And the CSS rules;

- To change the background color of add to cart button:
Change the background: rule. You should better use a Gradient CSS3 background color. To create your own, you can use this website:
www.colorzilla.com/gradient-editor/
.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;
}

- To change the font size of add to cart button:
(change the font-size:14px; and make it smaller)
input.FlexibleCSS3Button-text, a.FlexibleCSS3Button-text, span.FlexibleCSS3Button-text {
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	text-transform: uppercase;
	display: block;
	border: none !important;
	background: none !important;
	width: 100% !important;
	box-shadow: none !important;
	margin: 0px !important;
	padding: 0px 10px 0px 60px !important;
	height: 40px !important;
	z-index: 1;
	position: relative;
}

But "Firebug" will tell you these already. I am just giving you a hint as a start.

I browsed your website with Chrome but didn't see any problem with the "social buttons" layout. Everything looks good to me.

Attachment ScreenShot2013-12-03at6.08.52AM.png not found



Regards,
Support.
Last Edit: 10 years 4 months ago by Support.
The topic has been locked.

cart button colour change 10 years 4 months ago #7606

Hi,

fantastic support, it seems there is much to learn about firebug for me. Thanks for the quick tutorial. Changing the color and font size was fast and pain less. Appreciated!

I am worried about socials though as on my computer and several at work we see mto have the same issue - last icon down. Please see attached screen. Any ideas?


Regards Bart
Attachments:
The topic has been locked.

cart button colour change 10 years 4 months ago #7637

Hi,

there is no reason why the last icon drops below. Very weird. I browsed your website in different browsers and didn't see a problem like that.

But anyway, please do this change. I am sure this will never happen again.

1- Open this CSS file:
cornilleau.com.pl/templates/yoo_capture/html/com_virtuemart/assets/css/flexibleVM2Global.css

2- scroll to the very bottom, and include this rule:
.FlexibleShareItemLeft {
    width: 155px;
}

When you do this change, basically nothing will be changed, but you are defining a "fixed" width value for those social icons. This will eliminate the risk of dropping the last social icon below.

Regards,
Support.
The topic has been locked.

cart button colour change 10 years 4 months ago #7711

Thanks for your support, I have added this line as instructed however problem persists.

Would you have any other ideas how to solve it?




Actually it worked! thanks for support.

PS: file did not upload properly onto to server

Regards
Last Edit: 10 years 4 months ago by Bartosz Warot. Reason: file did not upload properly onto to server
The topic has been locked.

cart button colour change 10 years 4 months ago #7749

I am glad everything works out just fine

Case solved. Topic is closed.

Regards,
Support
The topic has been locked.
Time to create page: 0.146 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo