Skip to main content

Custom Buttons with images

More
14 years 9 months ago #32156 by condorazul
Custom Buttons with images was created by condorazul
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.

More
14 years 9 months ago #32166 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 8 months ago #37618 by woonydanny
Replied by woonydanny on topic Re: Custom Buttons with images
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

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

More
14 years 8 months ago #37640 by condorazul
Replied by condorazul on topic Re: Custom Buttons with images
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
www.lacestamagica.com/cestas-bebes/cestas-bebe-mantita.html

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

More
14 years 8 months ago #37645 by woonydanny
Replied by woonydanny on topic Re: Custom Buttons with images
@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.

More
14 years 8 months ago #37658 by condorazul
Replied by condorazul on topic Re: Custom Buttons with images
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.

More
14 years 8 months ago #37780 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 4 months ago #50090 by woonydanny
Replied by woonydanny on topic Re: Custom Buttons with images

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.

More
14 years 4 months ago #50146 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 4 months ago #50280 by woonydanny
Replied by woonydanny on topic Re: Custom Buttons with images
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.

More
14 years 4 months ago #50379 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 4 months ago #50506 by woonydanny
Replied by woonydanny on topic Re: Custom Buttons with images
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.

More
14 years 2 months ago #59212 by Radicaly2k
Replied by Radicaly2k on topic Re: Custom Buttons with images
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.

More
14 years 2 months ago #59287 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 2 months ago #59700 by Radicaly2k
Replied by Radicaly2k on topic Re: Custom Buttons with images
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.

More
14 years 2 months ago #59769 by nicolas
Replied by nicolas on topic Re: Custom Buttons with images
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.

More
14 years 2 months ago #59854 by Radicaly2k
Replied by Radicaly2k on topic Re: Custom Buttons with images
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.375 seconds
Powered by Kunena Forum