- Posts: 54
- Thank you received: 7
Hikashop product listing icons
4 years 6 months ago #340184
by ismael
Hikashop product listing icons was created by ismael
Hi,
I'm currently styling my product divs in my product listing page.
I would like to place icons (Images) infront of my custom fields (shown in screenshot below).
How can i do this?
I'm currently styling my product divs in my product listing page.
I would like to place icons (Images) infront of my custom fields (shown in screenshot below).
How can i do this?
Please Log in or Create an account to join the conversation.
4 years 6 months ago #340189
by nicolas
Replied by nicolas on topic Hikashop product listing icons
Hi,
You can do that with CSS. For example:
where hashrate is the column name of the custom field.
You can do that with CSS. For example:
Code:
.hikashop_products_listing .hikashop_product_custom_product_hashrate_line dd.hikashop_product_custom_value:before {
content: url('url of the icon');
}
The following user(s) said Thank You: ismael
Please Log in or Create an account to join the conversation.
4 years 6 months ago #340194
by ismael
Replied by ismael on topic Hikashop product listing icons
Hi,
This works, thanks.
Im now trying to adjust the size of the image since its too big right now. I dont know how to do this though.
Im trying:
dd.hikashop_product_custom_value:before{
width: 10px!important;
height: 10px!important;
}
But nothings happening. Can you help me?
This works, thanks.
Im now trying to adjust the size of the image since its too big right now. I dont know how to do this though.
Im trying:
dd.hikashop_product_custom_value:before{
width: 10px!important;
height: 10px!important;
}
But nothings happening. Can you help me?
This message contains confidential information
Please Log in or Create an account to join the conversation.
4 years 6 months ago - 4 years 6 months ago #340197
by Philip
Replied by Philip on topic Hikashop product listing icons
Hello,
In order to better understand the context and better help you, can you provide the Url link to your relative page ?
Awaiting your return to progress on your subject.
Regards
In order to better understand the context and better help you, can you provide the Url link to your relative page ?
Awaiting your return to progress on your subject.
Regards
Last edit: 4 years 6 months ago by Philip.
Please Log in or Create an account to join the conversation.
4 years 6 months ago #340219
by ismael
Replied by ismael on topic Hikashop product listing icons
hi,
This message contains confidential information
Please Log in or Create an account to join the conversation.
4 years 6 months ago - 4 years 6 months ago #340231
by Philip
Replied by Philip on topic Hikashop product listing icons
Hello,
Unfortunately, the localhost will not be accessible for us, we have try to use we have tried with urls that you have provided us in another subject, but without being able to find your added images there.
So to be able to help you precisely we will need the context of intervention.
Awaiting your returns to progress.
Regards
Unfortunately, the localhost will not be accessible for us, we have try to use we have tried with urls that you have provided us in another subject, but without being able to find your added images there.
So to be able to help you precisely we will need the context of intervention.
Awaiting your returns to progress.
Regards
Last edit: 4 years 6 months ago by Philip.
Please Log in or Create an account to join the conversation.
4 years 6 months ago #340234
by lousyfool
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" )
Replied by lousyfool on topic Hikashop product listing icons
Hi,
It's pretty simple. Instead of the CSS Nicolas provided here above, just use this:
As previously, replace "hashrate" with the column name of your custom field.
And, of course, you may want to replace the 10px and 5px values with your own.
It's pretty simple. Instead of the CSS Nicolas provided here above, just use this:
Code:
.hikashop_products_listing .hikashop_product_custom_product_hashrate_line dd.hikashop_product_custom_value:before {
background: url('url of the image') no-repeat center center / 10px auto;
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
content: "";
}
And, of course, you may want to replace the 10px and 5px values with your own.
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" )
Please Log in or Create an account to join the conversation.
4 years 6 months ago #340241
by ismael
Replied by ismael on topic Hikashop product listing icons
Hi,
Thanks, its working!
Thanks, its working!
Please Log in or Create an account to join the conversation.
Time to create page: 0.218 seconds