Styling the box around 'selected' products

  • Posts: 13
  • Thank you received: 1
2 years 9 months ago #333830

-- 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

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

  • Posts: 4501
  • Thank you received: 610
  • MODERATOR
2 years 9 months ago #333833

Hello,

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

alt


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

Last edit: 2 years 9 months ago by Philip.

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

  • Posts: 13
  • Thank you received: 1
2 years 9 months ago #334306

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

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

  • Posts: 4501
  • Thank you received: 610
  • MODERATOR
2 years 9 months ago #334320

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 :

.hikashop_product_image img: hover{border:2px solid: #a8238f !important;}

"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

Last edit: 2 years 9 months ago by Philip.

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

  • Posts: 13
  • Thank you received: 1
2 years 8 months ago #334802

Many Thanks Philip - works perfectly - and very helpful !

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

Time to create page: 0.063 seconds
Powered by Kunena Forum