[Skip to main content](#vessel-content) # \[SOLVED\] Replace + and - b4 "Add to cart" Button ## - **[mike](/forum/user/8167-mike "View mike's Profile")** - [![mike's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8167-mike "View mike's Profile") Topic Author - [ Offline](/forum/user/8167-mike) Less More - Posts: 110 - Thank you received: 4 - - 14 years 1 month ago - 14 years 1 month ago [\#68641](#68641) by [mike](/forum/user/8167-mike "View mike's Profile") *[\[SOLVED\] Replace + and - b4 "Add to cart" Button](/forum/4-how-to/68641-solved-replace-and-b4-add-to-cart-button#68641 "Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): I also used the full path of the icons to ensure, that it is not a problem with the relative path ( www.waffenmarti.ch/shop/images/plus.gif and www.waffenmarti.ch/shop/images/minus.gif ) but still no success. Is there any idea how I can do this? Best regards Mike")* was created by *[mike](/forum/user/8167-mike "View mike's Profile")* Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): Code: \#hikashop_product_quantity_field_change_plus{ width:15px; height:15px; display:block; background-image:url(../../../images/plus.gif); } #hikashop_product_quantity_field_change_minus{ width:15px; height:15px; display:block; background-image:url(../../../images/minus.gif); } I also used the full path of the icons to ensure, that it is not a problem with the relative path ([ www.waffenmarti.ch/shop/images/plus.gif](https://www.waffenmarti.ch/shop/images/plus.gif) and [ www.waffenmarti.ch/shop/images/minus.gif](https://www.waffenmarti.ch/shop/images/minus.gif)) but still no success. Is there any idea how I can do this? Best regards Mike - [ ![add-button-old.jpg](/forum/attachment/6124) ](/forum/attachment/6124 "...button-old.jpg") [ ](/forum/attachment/6124?download=1 "...button-old.jpg") - [ ![add-button-new.jpg](/forum/attachment/6125) ](/forum/attachment/6125 "...button-new.jpg") [ ](/forum/attachment/6125?download=1 "...button-new.jpg") Last edit: 14 years 1 month ago by [mike](/forum/user/8167-mike "View mike's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzY4NjQxLXNvbHZlZC1yZXBsYWNlLS1hbmQtYjQtcWFkZC10by1jYXJ0cS1idXR0b24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 14 years 1 month ago [\#68808](#68808) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Replace "+" and "-" before "Add to cart" Button](/forum/4-how-to/68641-solved-replace-and-b4-add-to-cart-button#68808 "Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): I also used the full path of the icons to ensure, that it is not a problem with the relative path ( www.waffenmarti.ch/shop/images/plus.gif and www.waffenmarti.ch/shop/images/minus.gif ) but still no success. Is there any idea how I can do this? Best regards Mike")* Hi, Your modifications look good. It must be something else: caching on your website caching by your browser your modifications are not saved in the configuration of HikaShop or something like that. We would have to look at the HTML/CSS of your page in order to tell you more precisely. The following user(s) said Thank You: [mike](/forum/user/8167-mike "View mike's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzY4NjQxLXNvbHZlZC1yZXBsYWNlLS1hbmQtYjQtcWFkZC10by1jYXJ0cS1idXR0b24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[mike](/forum/user/8167-mike "View mike's Profile")** - [![mike's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8167-mike "View mike's Profile") Topic Author - [ Offline](/forum/user/8167-mike) Less More - Posts: 110 - Thank you received: 4 - - 14 years 1 month ago [\#69058](#69058) by [mike](/forum/user/8167-mike "View mike's Profile") Replied by *[mike](/forum/user/8167-mike "View mike's Profile")* on topic *[Re: Replace "+" and "-" before "Add to cart" Button](/forum/4-how-to/68641-solved-replace-and-b4-add-to-cart-button#69058 "Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): I also used the full path of the icons to ensure, that it is not a problem with the relative path ( www.waffenmarti.ch/shop/images/plus.gif and www.waffenmarti.ch/shop/images/minus.gif ) but still no success. Is there any idea how I can do this? Best regards Mike")* I made a step: a big mistake from my side was to begin a CSS-Section with a # instead of a .! Don't ask why I did that ![;)](/media/kunena/emoticons/24.png ";)") It seems, that I have no idea what I'm doing in a CSS ![;)](/media/kunena/emoticons/24.png ";)") Then I had to enlarge the size to 25px by 25px and remove the background color from CSS-Section called "hikashop_product_quantity_field_change" (/** background-color:#c10303; */) I also removed the whole section: .hikashop_product_quantity_field_change:hover (since it don't look good) Now there is only 1 problem left: How do I remove this little red "+" and "-"? (see Screenshoot) that is now printed by some code (not the +/- right side of the arrow!). Thanks for your help! Best regards Mike - [ ![plus-minus.jpg](/forum/attachment/6166) ](/forum/attachment/6166 "plus-minus.jpg") [ ](/forum/attachment/6166?download=1 "plus-minus.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzY4NjQxLXNvbHZlZC1yZXBsYWNlLS1hbmQtYjQtcWFkZC10by1jYXJ0cS1idXR0b24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 14 years 1 month ago [\#69176](#69176) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Replace "+" and "-" before "Add to cart" Button](/forum/4-how-to/68641-solved-replace-and-b4-add-to-cart-button#69176 "Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): I also used the full path of the icons to ensure, that it is not a problem with the relative path ( www.waffenmarti.ch/shop/images/plus.gif and www.waffenmarti.ch/shop/images/minus.gif ) but still no success. Is there any idea how I can do this? Best regards Mike")* You can use such CSS: \#hikashop_product_quantity_field_change_plus,#hikashop_product_quantity_field_change_minus{ color: transparent !important; } The following user(s) said Thank You: [mike](/forum/user/8167-mike "View mike's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzY4NjQxLXNvbHZlZC1yZXBsYWNlLS1hbmQtYjQtcWFkZC10by1jYXJ0cS1idXR0b24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[mike](/forum/user/8167-mike "View mike's Profile")** - [![mike's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8167-mike "View mike's Profile") Topic Author - [ Offline](/forum/user/8167-mike) Less More - Posts: 110 - Thank you received: 4 - - 14 years 1 month ago [\#69213](#69213) by [mike](/forum/user/8167-mike "View mike's Profile") Replied by *[mike](/forum/user/8167-mike "View mike's Profile")* on topic *[Re: Replace "+" and "-" before "Add to cart" Button](/forum/4-how-to/68641-solved-replace-and-b4-add-to-cart-button#69213 "Hello there I would like to replace the "+" and "-" Button with my own Buttons (gifs). Because I use the red_style.css, the "+" and "-" is not really visible. In the attached files, you can see what I mean and what I would like todo. I have added in the red_style.css in the following sections the following code (background-image I mean): I also used the full path of the icons to ensure, that it is not a problem with the relative path ( www.waffenmarti.ch/shop/images/plus.gif and www.waffenmarti.ch/shop/images/minus.gif ) but still no success. Is there any idea how I can do this? Best regards Mike")* The final code blocks are: Code: .hikashop_product_quantity_field_change_plus{ width:24px; height:24px; display:block; background-image:url(../../../images/plus.png); color:transparent !important; } ... and... Code: .hikashop_product_quantity_field_change_minus{ width:24px; height:24px; display:block; background-image:url(../../../images/minus.png); color:transparent !important; } In addition, you have to remove the background color from the following code: Code: .hikashop_product_quantity_field_change { background-color: #C10303; color: #FFFFFF; font-size: 12px; font-weight: bold; margin-right: 15px; text-align: center; } They produce something like in the attached picture! Thanks for your help! Mike - [ ![final-quantity-changer.jpg](/forum/attachment/6181) ](/forum/attachment/6181 "...ty-changer.jpg") [ ](/forum/attachment/6181?download=1 "...ty-changer.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzY4NjQxLXNvbHZlZC1yZXBsYWNlLS1hbmQtYjQtcWFkZC10by1jYXJ0cS1idXR0b24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.060 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)