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

Site URL: https://www.signatureoysterfarm.com/shop/signature-oyster-farm-long-sleeve-t-shirt

Add to Home > Design > Custom CSS

.ProductItem-gallery-carousel-controls *:after {
    border-color: red !important;
}

Thanks tuanphan! Totally worked!

Is there anyway to make them more bold?

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

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

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

On 11/13/2020 at 11:01 PM, tuanphan said:

Can you share link to product? We can check easier

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!

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?

18 hours ago, tuanphan said:

What is access password?

Hey Tuan,

Will it be possible to do the same thing on my site (if it’s the same thing you have in mind.) ? If so that would be great! I sent a video below to show you what I’m looking forward to having on my site. Thanks!

Add to Home > Design > Custom CSS

.ProductItem-gallery-carousel-controls *:after {
    border-color: green !important;
}

Hello Tuan,

Do you happen to know of the fix?

Thank you,

3 hours ago, rilsto said:

Hello Tuan,

 

Do you happen to know of the fix?

 

Thank you,

What problem?

Making the arrows on the product images more bold?

Thanks!

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?

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

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

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. 

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

On 7/10/2022 at 11:16 PM, hannaleejewelry said:

this still doesn't seem to work:/

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

On 7/12/2022 at 2:50 AM, tuanphan said:

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

Yes! I added it back into the Custom CSS

7 hours ago, hannaleejewelry said:

Yes! I added it back into the Custom CSS

Here from my end. What should it look like?

On 7/18/2022 at 8:34 PM, tuanphan said:

Here from my end. What should it look like?

It looks like the code works for the mobile view from my desktop but it doesn't work when i view it from my phone. 

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

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