Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?


Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site

 All Forums
 General
 Off topic, News and Updates
 Making all your buttons the same
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Vince
Administrator

Spain
39437 Posts

Posted - 01/11/2020 :  01:44:06  
In v7.1.7 we introduced the "ectbutton" class for all buttons in the cart and this means that it is now much easier to get a common theme across your entire website. However, this also means we have to choose a default which we've made a smart blue button with a hover effect, but this may differ from your styled buttons and so this is how to make them all the same.
What you need to do is find where your buttons are styled, so using preferably FireFox or Google Chrome go to a page on your website where you see one of the buttons that you want the new "ectbutton" styled buttons to look like.
Chrome and FireFox have an "object inspector" so you can see information about how an object is styled. In FireFox, right click the button and choose "Inspect Element (Q)". In Chrome, right click the button and choose "Inspect Ctrl+Shift+I"
In Chrome you should now see a new panel with "Elements -> Styles" and in FireFox "Inspector -> Rules" and you should see a long list of buttons that are styled with your site's button style, something like this...
input.continueshopping, input.printversion, input.applycoupon, input.configbutton, input.reviewsubmit, input.efsend, input.efclose, input.cartaccountlogin, input.forgotpassword, etc, etc, etc
To the right of this, it will say the name of the style sheet and the line number. If you put the mouse over the style sheet name it will give you the full path. All you need to do is open that style sheet in a text editor and add the ectbutton class to the beginning of the list, for example in this case...
input.ectbutton, input.continueshopping, input.printversion, input.applycoupon, input.configbutton, input.reviewsubmit, input.efsend, input.efclose, input.cartaccountlogin, input.forgotpassword, etc, etc, etc

A few lines below that normally there will be a similar line for the hover classes, for instance...
input.continueshopping:hover, input.printversion:hover, input.applycoupon:hover, input.configbutton:hover, input.reviewsubmit:hover, input.efsend:hover, etc, etc, etc
And again, add the hover class for the ectbutton to the beginning of that, for example in this case
input.ectbutton:hover, input.continueshopping:hover, input.printversion:hover, input.applycoupon:hover, input.configbutton:hover, input.reviewsubmit:hover, input.efsend:hover, etc, etc, etc

Now upload that new style sheet to your website and give the page a <Ctrl>+F5 to force a refresh and you should see the same colored buttons across the whole website.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

John Nolan
Advanced Member

Canada
366 Posts

Posted - 01/11/2020 :  04:30:17  
Thanks for this, Vince. Very clear.
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2020 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000