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


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Colourful Quantity - and + Buttons
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 06/20/2017 :  19:43:51  
Ecommerce Templates Version 6.7.0 Major Release 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 ectcart.css file included in the ECT Updater. The CSS button formats there are grey scale.

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



Well this is how ...

"includes" file parameters required for ASP are here and for PHP are here.
And don't forget to include to include "quantity" in your detailpagelayout.

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

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

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

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

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

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

/* The - Minus button. (Could have given this a class name guys) */
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
}

/* The + Plus button. (A class name would be better) */
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
}


Gary

Positivek9
Ecommerce Template Guru

USA
3992 Posts

Posted - 10/12/2017 :  16:01:27  
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

Edited by - Positivek9 on 10/12/2017 16:02:58

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/24/2018 :  14:29:53  
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.

Sinbad
Administrator

65669 Posts

Posted - 01/24/2018 :  14:58:29  
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

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/25/2018 :  09:54:33  
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

Sinbad
Administrator

65669 Posts

Posted - 01/25/2018 :  11:53:26  
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

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/25/2018 :  13:03:01  
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

Sinbad
Administrator

65669 Posts

Posted - 01/25/2018 :  13:16:58  
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

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/25/2018 :  13:25:37  
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

Sinbad
Administrator

65669 Posts

Posted - 01/25/2018 :  14:15:51  
Your welcome

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

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/26/2018 :  08:26:52  
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

Sinbad
Administrator

65669 Posts

Posted - 01/26/2018 :  11:38:20  
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

C4009
Ecommerce Template Expert

USA
562 Posts

Posted - 01/26/2018 :  11:43:36  
I figured it out. Thanks
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000