[url="https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107742"]Ecommerce Templates Version 6.7.0 Major Release[/url] includes revamped Up and Down buttons for the Quantity input box.
Both new button format options do require revised CSS formatting, which you can find in the [purple]ectcart.css[/purple] file included in the [url="https://www.ecommercetemplates.com/updaters.asp"]ECT Updater[/url]. The CSS button formats there are grey scale.

But perhaps you would like to add attractive colours, and some button mouse hover effects ?

[img]https://itzap.com.au/pics/ect/colourful-quantity-up-down-buttons.jpg[/img]

[size=4]Well this is how ...[/size=4]

"[maroon]includes[/maroon]" file parameters required for [url="https://www.ecommercetemplates.com/help/ecommplus/parameters.asp#quantity"]ASP are here[/url] and for [url="https://www.ecommercetemplates.com/phphelp/ecommplus/parameters.asp#quantity"]PHP are here[/url].
And don't forget to include to include "[navy]quantity[/navy]" in your [url="https://www.ecommercetemplates.com/help/css-layouts.asp#proddetailorder"]detailpagelayout[/url].

This example uses the second button layout parameter : [navy]$quantityupdown=2[/navy];
Tinker with this however necessary to suit your layout.

[size=4]Here is the CSS ...[/size=4]
[code][orange]/* The outer container. This suits a center aligned layout. */[/orange]
div.detailquantity {
box-sizing: border-box;
line-height: 1;
text-align: center;
width: 100%;
font-size: 0.95rem;
padding: 0 0 0.8rem 0;
[orange]/* background-color: #F6F6F6; */[/orange]
}

[orange]/* Optional: Hide the word Quantity, don't need to display that. */[/orange]
div.detailquantitytext {display: none}

[orange]/* The button styles. Margin: 0 auto centers the input boxes */[/orange]
div.quantity2div {
width: 105px;
overflow: auto;
font-size: 1.5rem;
height: 32px;
text-align: center;
margin: 0 auto
}

[orange]/* The Quantity Number Box */[/orange]
input.quantity2input {
text-align: center;
height: 100%;
width: 35px;
font-size: 1rem;
border: none;
margin: 0;
padding: 0
}

[orange]/* Class name on this div would be better */[/orange]
div.quantity2div div {
height: 100%;
text-align: center
}

[orange]/* The - Minus button. (Could have given this a class name guys) */[/orange]
div.detailquantity2div div:nth-child(1),
div.detailquantity2div div:nth-child(1):active,
div.detailquantity2div div:nth-child(1):focus {
background-color: #b00000;
color: #fff;
padding: 2px 0 0 0;
border-radius: 3px 0 0 3px
}
div.detailquantity2div div:nth-child(1):hover {
background-color: #960000
}

[orange]/* The + Plus button. (A class name would be better) */[/orange]
div.detailquantity2div div:nth-child(3),
div.detailquantity2div div:nth-child(3):active,
div.detailquantity2div div:nth-child(3):focus {
background-color: #096;
color: #fff;
padding: 3px 0 0 0;
border-radius: 0 3px 3px 0
}
div.detailquantity2div div:nth-child(3):hover {
background-color: #008257
}[/code]

Gary
[img]https://itzap.com.au/pics/logo/itzap-website-design-works-mini-logo.png[/img]

Hi Gary!

I'm using your tweak to the qty buttons and today a vertical scroll bar started appearing in Firefox. I made a few changes to the CSS and it no longer appears in Firefox. BUT - in Chrome and Edge it still does. Can you help? See forum posting under CSS Design: https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=108739

Julie
Browns Summit NC USA

I think this is great and want to use it. I am not sure of what css file to place the coding can you assist? Thank you.

Hi Charles, place it in the _global/_products.css file.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Sinbad, Thanks for the reply I do appreciate it. Hope your holidays were good. I tried what you suggested and I even checked to make sure that my include file had quantityupdown=2 and I cannot get it to work. Any other suggestions? Thanks in advance for your help.

Carles
www.SleepRestfully.com

Hi Charles, the style sheet _global/_products.css looks a bit empty I'm not seeing those classes there, are you sure you uploaded the changes to the style sheet?

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I did upload the code but then after finding that the change did not apply I removed the code so as not to cause any issues.

Charles

Hi Charles, I see you have different style sheets for the different pages, using my browser I added it to the proddetail.css and it worked. I placed the code just after
div.detailquantitytext {
width: auto;
text-align: center;
}

Can you give that a try then browse to a product detail.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I am out of the office at this time working remotely. I do not have access to my FTP or the code till in the morning. I will upload it in the morning and let you know. Thank you so much for your help. You are always my hero.

Charles

Your welcome

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Marlene I tried as you stated today and it did not work. Yes I hit control F5 to clear out the cashe.Any other suggestions? Thank you.

Charles

Hi Charles if you like to send me the ftp I can add that to the style sheet, I actually used a variation of it on a site yesterday Nice work Gary.

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I figured it out. Thanks

After recent changes in the ectcart.css in the updater these changes seem not to work anymore.

jaapg@promanent.com
Promanent b.v.
www.promanent.com | www.vaarwinkel.nl