Jump to content

CSS code needed for making shop gallery icons bold

Go to solution Solved by janehinchliffe,

Recommended Posts

On 2/21/2023 at 8:35 PM, janehinchliffe said:

Hi, could someone please provide some CSS code for making the shop gallery icons bold? Many thanks, Jane. https://www.tordoff.com/shop/p/wall-street-polish-poster https://tordoff.com 

IMG_4570.PNG

Which icon are you referring? Can you show it more clearly?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 2/22/2023 at 2:55 PM, Beyondspace said:

Which icon are you referring? Can you show it more clearly?

Yes, here are some screenshots that help to show this. It's for the red product arrows. 

The client sells movie posters and with that in mind, some posters are dark, others lighter - the arrows need to be able to show as clearly as possible whether light or dark backgrounds. 

Thanks, Jane

Screenshot 2023-02-23 at 18.02.17.png

Screenshot 2023-02-23 at 18.02.32.png

Screenshot 2023-02-23 at 18.03.14.png

Edited by janehinchliffe
Link to comment

How about adding both background + change arrow color? Add to Design > Custom CSS

button.product-item-gallery-carousel-control {
    background-color: red !important;
}
button.product-item-gallery-carousel-control:after {
    color: white !important;
    border-color: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
10 hours ago, tuanphan said:

How about adding both background + change arrow color? Add to Design > Custom CSS

button.product-item-gallery-carousel-control {
    background-color: red !important;
}
button.product-item-gallery-carousel-control:after {
    color: white !important;
    border-color: white !important;
}

 

Thanks so much, this worked perfectly. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.