[Skip to main content](#vessel-content) # Styling the box around 'selected' products ## - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 4 months ago [\#333830](#333830) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") *[Styling the box around 'selected' products](/forum/26-product-category-display/902839-styling-the-box-around-selected-products#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")* was created by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* -- url of the page with the problem -- : [ www.niallleavy.com/index.php/artstore](https://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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4Mzktc3R5bGluZy10aGUtYm94LWFyb3VuZC1zZWxlY3RlZC1wcm9kdWN0cz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 652 - - 5 years 4 months ago - 5 years 4 months ago [\#333833](#333833) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Styling the box around 'selected' products](/forum/26-product-category-display/902839-styling-the-box-around-selected-products#333833 "-- 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 : [ ![alt](https://i.ibb.co/41cFwNT/css-tplate.png) ](https://i.ibb.co/41cFwNT/css-tplate.png "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](https://www.hikashop.com/support/documentation/272-hikashop-display-by-color.html#custom)** to learn how to proceed). Hope this will help you to correct this. Regards Last edit: 5 years 4 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4Mzktc3R5bGluZy10aGUtYm94LWFyb3VuZC1zZWxlY3RlZC1wcm9kdWN0cz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 4 months ago [\#334306](#334306) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Replied by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* on topic *[Styling the box around 'selected' products](/forum/26-product-category-display/902839-styling-the-box-around-selected-products#334306 "-- 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")* 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4Mzktc3R5bGluZy10aGUtYm94LWFyb3VuZC1zZWxlY3RlZC1wcm9kdWN0cz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 652 - - 5 years 4 months ago - 5 years 4 months ago [\#334320](#334320) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Styling the box around 'selected' products](/forum/26-product-category-display/902839-styling-the-box-around-selected-products#334320 "-- 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, "***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 :**Code: .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: 5 years 4 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4Mzktc3R5bGluZy10aGUtYm94LWFyb3VuZC1zZWxlY3RlZC1wcm9kdWN0cz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")** - [![NiallLeavy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Topic Author - [ Offline](/forum/user/61344-niallleavy) Less More - Posts: 13 - Thank you received: 1 - - 5 years 3 months ago [\#334802](#334802) by [NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile") Replied by *[NiallLeavy](/forum/user/61344-niallleavy "View NiallLeavy's Profile")* on topic *[Styling the box around 'selected' products](/forum/26-product-category-display/902839-styling-the-box-around-selected-products#334802 "-- 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")* Many Thanks Philip - works perfectly - and very helpful ! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MDI4Mzktc3R5bGluZy10aGUtYm94LWFyb3VuZC1zZWxlY3RlZC1wcm9kdWN0cz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.050 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)