AndyC71 Posted January 6, 2023 Share Posted January 6, 2023 (edited) Hi there, and first time posting 👋. So, I'm experimenting with graphical elements and features on my site and I'm wanting to change the colour of the ' next/previous arrows' and the "image number" colour on my product pages (circled in red) when in mobile format and maybe create a round background for each bit circled to sit on too. I'm hoping there's an easy way to do this but I can't work out the specific 'class'/code for each bit and I'm stuck. Any help is obviously much appreciated. The product's image gallery is the 'simple' template, if that helps. the url - https://www.andycropper.art/paintings/p/dormant Edited January 6, 2023 by AndyC71 adding another tag Link to comment
tuanphan Posted January 8, 2023 Share Posted January 8, 2023 Add to Design > Custom CSS @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after { border-color: red !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted August 20, 2023 Share Posted August 20, 2023 On 1/8/2023 at 6:12 PM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after { border-color: red !important; } } Hey Tuan, Can I get some code to hide the gallery controls on my simple product gallery carousel? https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9 🙏 Link to comment
Web_Solutions Posted August 20, 2023 Share Posted August 20, 2023 12 minutes ago, DreamrW said: Hey Tuan, Can I get some code to hide the gallery controls on my simple product gallery carousel? https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9 🙏 Can you make the site Password Protected and send me the password? Ainul and Kobir 2 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. Link to comment
tuanphan Posted August 21, 2023 Share Posted August 21, 2023 23 hours ago, DreamrW said: Hey Tuan, Can I get some code to hide the gallery controls on my simple product gallery carousel? https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9 🙏 The site is private now. You can follow this to setup password again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted August 21, 2023 Share Posted August 21, 2023 3 hours ago, tuanphan said: The site is private now. You can follow this to setup password again Sorry! It's Energy2023 Link to comment
tuanphan Posted August 23, 2023 Share Posted August 23, 2023 On 8/21/2023 at 8:27 PM, DreamrW said: Sorry! It's Energy2023 Add to Website > Website Tools > Custom CSS /* hide gallery controls */ .ProductItem-gallery-carousel-controls.enable-on-first-image-load { display: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted August 23, 2023 Share Posted August 23, 2023 2 hours ago, tuanphan said: Add to Website > Website Tools > Custom CSS /* hide gallery controls */ .ProductItem-gallery-carousel-controls.enable-on-first-image-load { display: none !important; } That's magic, thanks Tuan! 👍 Link to comment
itwasgoodimages Posted February 2 Share Posted February 2 Hi, this worked great for my website however, it did not edit the 1/2 as shown above. Can I get a code to remove the 1/2 but keep the gallery arrows? Thank you 🙂 Link to comment
tuanphan Posted February 5 Share Posted February 5 On 2/3/2024 at 1:31 AM, itwasgoodimages said: Hi, this worked great for my website however, it did not edit the 1/2 as shown above. Can I get a code to remove the 1/2 but keep the gallery arrows? Thank you 🙂 You can share link to your site, I will check code again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
itwasgoodimages Posted February 5 Share Posted February 5 Hi, thank you for reaching out. My website is https://www.itwasgoodimages.com/ I was able to edit the arrows to my color choice with your code but it did not effect the 1/2 2/2 areas. Ideally I would like to keep the arrows but delete the 1/2 2/2 areas. This only shows in the mobile version. Link to comment
itwasgoodimages Posted February 5 Share Posted February 5 I was helped in another forum by nick_sh who provided the custom css I needed. Thanks again for looking into this. .ProductItem-gallery-current-slide-indicator { display: none; } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment