Search our site
Forum Search
Google Site Search
|
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, etcTo 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, etcA 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, etcAnd 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, etcNow 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 SoftwareClick Here to sign up for our newsletterClick 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
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 12/22/2020 : 14:59:48
Edited by - dbdave on 12/22/2020 15:00:22
|
|
|
Shopping Cart Software Forum for Ecommerce Templates |
© 2002-2022 ecommercetemplates.com |
|
|
|