Custom Buttons with images

  • Posts: 441
  • Thank you received: 24
12 years 11 months ago #32156

is it possible to change cart button for an image?
whe i change it on the css it changes the rest of the buttons, like log in.

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 11 months ago #32166

Yes it's possible.

If it does the change everywhere, that's because you don't use a CSS selector like on our demo website:
.hikashop_product_quantity_main .hikashop_product_stock .button {
color: #167E93;
font-weight: bold;
background-image: url(../images/add_cart.png);
background-repeat: no-repeat;
background-position: right;
height: 32px;
padding-right: 40px;
background-color: transparent;
cursor: pointer;
}

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

  • Posts: 218
  • Thank you received: 6
12 years 9 months ago #37618

Sorry but i cannot get this to work.

I added the above css to my frontend template but it did not change the + and - in the product detail page.

I would like to change the + and - for 2 images like





or






or even





how can i do that?

thanks

Attachments:

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

  • Posts: 441
  • Thank you received: 24
12 years 9 months ago #37640

I think it is not possible as the + and - symbols in the example of hikashop is just one image, so the thing i did was create one image and try to center the plus and minus inside it

.hikashop_product_quantity_main .hikashop_product_stock td a {
background-color: transparent;
background-image: url("../images/add_icono.png");
background-repeat: no-repeat;
color: #FFFFFF;
font-weight: bold;
margin-top: 3px;
padding: 3px 7.5px;
}
you can see an example here
http://www.lacestamagica.com/cestas-bebes/cestas-bebe-mantita.html

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

  • Posts: 218
  • Thank you received: 6
12 years 9 months ago #37645

@condorazul

how did you get your thumbnail images below main product image to be so big?

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

  • Posts: 441
  • Thank you received: 24
12 years 9 months ago #37658

changin the thumbnail size in the system/configuration/files there in thumbnail vidth i choose 330 and i height 250

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 9 months ago #37780

For the plus and minus buttons, you can use these CSS classes:
hikashop_product_quantity_field_change_plus and hikashop_product_quantity_field_change_minus

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

  • Posts: 218
  • Thank you received: 6
12 years 6 months ago #50090

nicolas wrote: For the plus and minus buttons, you can use these CSS classes:
hikashop_product_quantity_field_change_plus and hikashop_product_quantity_field_change_minus


could you please put up the css code to have the icons instead of the + and -

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 6 months ago #50146

Like that for example:

.hikashop_product_quantity_field_change_plus{
background-image: url("../images/add_icon.png");
color: transparent;
}

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

  • Posts: 218
  • Thank you received: 6
12 years 6 months ago #50280

sorry to be a pain, but i have managed to get the icons to show but they are cut off. i have sent a link to u via PM for my other issue.

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 6 months ago #50379

Since your images are bigger than the text, you need to add some additional CSS like that:
.hikashop_product_quantity_field_change_plus{
width: 16px;
display: block;
height: 16px;
}

The following user(s) said Thank You: woonydanny

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

  • Posts: 218
  • Thank you received: 6
12 years 6 months ago #50506

thanks i added:

.hikashop_product_quantity_field_change_plus{
background-image: url("../images/cart_add.png");
color: transparent;
width: 16px;
display: block;
height: 16px;
}

.hikashop_product_quantity_field_change_minus{
background-image: url("../images/cart_delete.png");
color: transparent;
width: 16px;
display: block;
height: 16px;
}


and it now works :)

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

  • Posts: 7
  • Thank you received: 0
12 years 3 months ago #59212

Hi,

I could not find the CSS file used, do I look for it through the View or just go directly to the file, can you please tell me the name of the file or view.

Thanks

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 3 months ago #59287

You need to look at the Display tab of the configuration. Not the Display->Views menu.
There are only two CSS files to edit, you can't miss them:
www.hikashop.com/en/support/documentatio...shop-config.html#css

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

  • Posts: 7
  • Thank you received: 0
12 years 3 months ago #59700

Thanks for your excelent help, I added the following code but only the minus image is appearing and I dont know why??


.hikashop_product_quantity_field_change_plus{
background-image: url("../images/hkgeneral/quantity-add.png");
color: transparent;
width: 16px;
display: block;
height: 16px;
}

.hikashop_product_quantity_field_change_minus{
background-image: url("../images/hkgeneral/quantity-minus.png");
color: transparent;
width: 16px;
display: block;
height: 16px;
}

Thanks Again

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

  • Posts: 82819
  • Thank you received: 13366
  • MODERATOR
12 years 3 months ago #59769

That code looks fine. Maybe the image is not there ?
Could you give a link to that page ?

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

  • Posts: 7
  • Thank you received: 0
12 years 3 months ago #59854

Sorry I do not have it public. But the problem is already fixed :D

Thanks

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

Time to create page: 0.119 seconds
Powered by Kunena Forum