Making all your buttons the same

Author	« Topic »
Vince Administrator Spain 42743 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	Posted - 01/11/2020 : 04:30:17 Thanks for this, Vince. Very clear.
Vince Administrator 42743 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 10405 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 »