How to reduce with length of Quantity number field

scarney
Topic Author
Offline

11 years 7 months ago #190964 by scarney

How to reduce with length of Quantity number field was created by scarney

-- HikaShop version -- : 2.3.5 Essential
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.3.29
-- Error-message(debug-mod must be tuned on) -- : no error message

I want to reduce the width of the Quantity number field in all my two column layouts since it is making the plus and minus symbols very crowded and tight between the data field and the Add to cart button.

Here is a page where I do not like the spacing:
apf.cloudaccess.net/dvd

On the actual product pages I am happy with the spacing. Here is one of them:
apf.cloudaccess.net/dvd/scripture/produc...-the-forgotten-dream

If you could give me a little override to put into my custom.css file I would be grateful! :-)

Thanks, Sean Carney

Please Log in or Create an account to join the conversation.

lousyfool
Offline

11 years 7 months ago #190994 by lousyfool

Replied by lousyfool on topic How to reduce with length of Quantity number field

Try this:

Code:

.hikashop_products_listing input.hikashop_product_quantity_field {
  width: 50px;
  text-align: center;
}

Note that I added the center alignment... keep it or leave it...

To eventually make the +/- better accessible, use this:

Code:

.hikashop_products_listing a.hikashop_product_quantity_field_change {
  font-size: 24px;
  padding: 0 10px;
}

Thanks to the class "hikashop_products_listing", all of this applies to product listings only, not to the product pages. If you want it there, too, just leave that class away.

As far as I can tell, you're not using any HikaShop CSS file, so add it to your template's custom.css file.

Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

The following user(s) said Thank You: scarney, d1bro

Please Log in or Create an account to join the conversation.

Xavier
Offline

11 years 7 months ago #190979 by Xavier

Replied by Xavier on topic How to reduce with length of Quantity number field

Hi,

Here are the properties:

Code:

.hikashop_product_quantity_field_change{
    font-size: 22px !important;
}
.hikashop_products_listing .hikashop_product_quantity_field{
    width: 95% !important;
}

But I really think that the best way to help you, is to give you that link:
www.hikashop.com/support/support/documen...ize-the-display.html

It explain how to customize the display

The following user(s) said Thank You: scarney

Please Log in or Create an account to join the conversation.

scarney
Topic Author
Offline

11 years 7 months ago #191082 by scarney

Replied by scarney on topic How to reduce with length of Quantity number field

would you also have a little magic to also make the + and - symbol fit within the height of the text field box. I see there appear to be a couple classes for the lining of of those symbols.

An example is at apf.cloudaccess.net/dvd/product/the-forgotten-dream

Please Log in or Create an account to join the conversation.

Xavier
Offline

11 years 7 months ago #191111 by Xavier

Replied by Xavier on topic How to reduce with length of Quantity number field

Hi,

Please read our doc about layout customization, you can too find many sources to learn some css on the web

You can too try to use another layout for the input quantity field thanks to the option "Quantity layout on product page" in Configuration > Display > Products or in the settings of your menu/modules directly.

Please Log in or Create an account to join the conversation.

scarney
Topic Author
Offline

11 years 7 months ago #191197 by scarney

Replied by scarney on topic How to reduce with length of Quantity number field

Thank you for showing me that setting. I prefer your default setting. Wish I had more time to learn CSS. :-)

Please Log in or Create an account to join the conversation.

Time to create page: 0.275 seconds