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
Forum Search
Google Site Search
 All Forums
 General
 Off topic, News and Updates
 Making all your buttons the same
Author « Topic »  

Vince
Administrator

Spain
42785 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
409 Posts

Pre-sales questions only
(More Details...)

Posted - 01/11/2020 :  04:30:17  
Thanks for this, Vince. Very clear.

Vince
Administrator

42785 Posts

Posted - 12/22/2020 :  14:43:25  
As the <button> tag is now also used in the cart, add this also to the list so you would have for instance...

button.ectbutton, input.ectbutton, input.continueshopping, input.printversion, input.applycoupon...

...and...

button.ectbutton:hover, input.ectbutton:hover, input.continueshopping:hover, input.printversion:hover, input.applycoupon:hover...

Vince

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

dbdave
ECT Moderator

USA
10426 Posts

Posted - 12/22/2020 :  14:59:48  
Vince has a post here that will help with the new tags
https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=113454

David

Edited by - dbdave on 12/22/2020 15:00:22
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000