Styling the box around 'selected' products

-- url of the page with the problem -- : www.niallleavy.com/index.php/artstore
-- HikaShop version -- : HikaShop Business 4.4.2 [2105071220]
-- Joomla version -- : 3.9.2
-- Browser(s) name and version -- : Chrome

First Post - hope I am doing this right. Please advise if not.

On the webstore page, I have set up a number of products, When I hover over the products, they are highlighted which is fine. However the box that appears around the product being highlighted is too thick for the Client. I guess there is some CSS I can add to make the line thinner ?

Many thanks.

M

Hello,

It seems that your relative issue is link to your template, see my screenshot :


Now from your specific case, we see 2 possible solutions :
1. As this command come from your current template, contact your template provider support.
2. You add some css in order to adjust this (see this documentation to learn how to proceed).

Hope this will help you to correct this.
Regards

Many thanks Philip. Am I reading this correctly that if I put ".hikashop_product_image img: hover{border:2px solid: #a8238f;}" in the Custom.css file, it will reduce the width of the 'Highlight box' ? That doesn't seem to work.

May I ask how did you display the relevant CSS for the highlight box? I have been trying to access that by inspecting on the box, but it doesn't appear.

Thanks Again. M

Hello,

"Am I reading this correctly that if I put ".hikashop_product_image img: hover{border:2px solid: #a8238f;}" in the Custom.css file, it will reduce the width of the 'Highlight box' ? That doesn't seem to work."
Exactly, in order to be sure to increase your command priority you can add an "!important"
Example :
"May I ask how did you display the relevant CSS for the highlight box? I have been trying to access that by inspecting on the box, but it doesn't appear."
Of course, follow me step by step :
1. Point your html element, then click right => Inspector
2. New window (for Html), point again your required element, here "<img>" then right-click => "Force state"
3. Select "Hover", to simulate the hover state.

Hope this will help you to progress to better manage css.
Regards

Many Thanks Philip - works perfectly - and very helpful !