Jump to content

Can I change the color of the arrows on a product item carousel? (in 7.1)

Recommended Posts

Add to Home > Design > Custom CSS

.ProductItem-gallery-carousel-controls *: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

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
  • 3 months later...
  • 2 weeks later...
16 hours ago, rilsto said:

Is there anyway to make them more bold?

 

I tried using border-width with a px value but that didn't work.

Can you share link to product? We can check easier

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
On 11/3/2020 at 3:11 PM, ncouraged1 said:

Thanks tuanphan! Totally worked!

I see header is too big on scroll. If you want to reduce sticky header size only, we can give the code

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
36 minutes ago, rilsto said:

https://azalea-orchid-drz4.squarespace.com/panther-t14r/p/2020-prinoth-panther-t14r-stock-5991d

 

Let me know if there is anything else I need to provide. Thank you!

What is access password?

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
15 hours ago, rilsto said:

Hello Tuan,

 

Do you happen to know of the fix?

 

Thank you,

https://azalea-orchid-drz4.squarespace.com/panther-t14r/p/2020-prinoth-panther-t14r-stock-5991d

What is access password?

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
  • 1 year later...
On 5/28/2022 at 1:39 AM, hannaleejewelry said:

I can't seem to get my arrow background to turn transparent in the mobile view with this code. Is there a way to fix this? 

https://hannaleejewelry.com/shop/p/ne-dia01

Hi,

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
    .pdp-layout .invisible {
    display: block !important;
    background-color: transparent;
}
}

 

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
  • 2 weeks later...
On 5/31/2022 at 8:40 PM, tuanphan said:

Hi,

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
    .pdp-layout .invisible {
    display: block !important;
    background-color: transparent;
}
}

 

Hey tuanphan,

This code seems to work in the edit mode but doesn't actually save to the final view of the live site. 

Link to comment
17 hours ago, hannaleejewelry said:

Hey tuanphan,

This code seems to work in the edit mode but doesn't actually save to the final view of the live site. 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.pdp-carousel-controls.enabled * {
    color: red;
}
}

 

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
  • 4 weeks later...
On 7/10/2022 at 11:16 PM, hannaleejewelry said:

this still doesn't seem to work:/

Screen Shot 2022-07-10 at 10.15.20 AM.png

I don't see the code. Can you keep it? We can check easier

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
  • 2 weeks later...
  • 4 months later...
12 hours ago, TaraParekh said:

Hi,

I would also like some help with this on my products page.  The arrows really don't show up.  I added in the custom code you mentioned to change the color, but can you adjust them to make them more bold, and smaller? Thank you!

https://banjo-viola-shbj.squarespace.com/config/pages/6286921273b72d7a391edc90

Can you share link to a product page?

https://banjo-viola-shbj.squarespace.com/?noredirect

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

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.