Jump to content

Styling carousel gallery arrows in Brine

Recommended Posts

I'm looking to adjust the style of the arrows on the carousel gallery block in the Brine template.

Right now they are a transparent square with grey arrow.

I'd ideally like:

1. No arrows and have the gallery scrollable by scrolling finger down on mouse (as you would to scroll down a page) but in this case it would be across the carousel (example: https://www.the7thmember.xyz/)

2. If not possible (without paying for a plugin), remove the transparent square and just have white/black arrows.

(I'd also like to ask if it's possible to add padding within the carousel block between images?)

Thank you in advance! 

Link to comment
  • 4 weeks later...

Add to Home > Design > Custom CSS

Question 2.

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent;
}

Question 3.

.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}

 

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
17 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

Question 2.


.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent;
}

Question 3.


.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}

 

Wow thank you!!!

Quick q in terms of the arrows now, any way to stop the opacity bground arrow hover state? Just to make them same as on hover as they are not on hover.

And one more thing I just noticed after making it live and checking on my phone, this site responds so badly in mobile... the gallery is SO SMALL. Any way around this?

Thanks again x

Link to comment

Question 4

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent !important;
}

Question 5.

Edit code in Question 3 to

@media screen and (min-width:901px) {
.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}
}

 

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

Question 4


.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent !important;
}

Question 5.

Edit code in Question 3 to


@media screen and (min-width:901px) {
.sqs-gallery-design-strip .sqs-wrapper img {
    border-right: 5px solid #fff;
}
}

 

That works great for making bigger in desktop but doesn't seem to adjust in mobile site 😞

Link to comment

And one more thing I just noticed after making it live and checking on my phone, this site responds so badly in mobile... the gallery is SO SMALL. Any way around this?

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage main.Main.Main--page {
    height: calc(100vh - 59px);
}
.homepage section.Main-content {
    height: 100%;
}
.sqs-gallery-design-strip-slide {
    float: none !important;
    width: 100% !important;
    height: auto !important;
}
.sqs-gallery-design-strip .sqs-wrapper {
    width: 100% !important;
    height: auto !important;
}
.sqs-block .sqs-intrinsic {
    padding-bottom: 700% !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 minutes ago, SabrinaScott said:

That works great for making bigger in desktop but doesn't seem to adjust in mobile site 😞

The easiest way is add 2 blocks (slide - stacked) for desktop/mobile. Then I can give code to hide 1 on desktop, hide 1 on mobile.

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
20 minutes ago, SabrinaScott said:

There we go, I've added another block as stacked

Add to Home > Design > Custom CSS

/* desktop */
@media screen and (min-width:641px) {
/* hide stacked */
div#block-yui_3_17_2_1_1584620461456_6386 {
    display: none;
}
}
/* mobile */
@media screen and (max-width:640px) {
/* hide slide */
div#block-yui_3_17_2_1_1582572417466_3722 {
    display: none;
}
}

 

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
16 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


/* desktop */
@media screen and (min-width:641px) {
/* hide stacked */
div#block-yui_3_17_2_1_1584620461456_6386 {
    display: none;
}
}
/* mobile */
@media screen and (max-width:640px) {
/* hide slide */
div#block-yui_3_17_2_1_1582572417466_3722 {
    display: none;
}
}

 

Amazing, thank you so so much!

One last q I promise - is it possible to have the arrows outside of the gallery, rather than inside on the images? 

If not, don't worry, just a small thing. 

Thanks again!

Link to comment
2 minutes ago, SabrinaScott said:

Amazing, thank you so so much!

One last q I promise - is it possible to have the arrows outside of the gallery, rather than inside on the images? 

If not, don't worry, just a small thing. 

Thanks again!

It needs adjusting some elements, which takes a bit of time. If that is not really necessary for you, I will ignore it. ✌️

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 years later...
On 3/19/2020 at 6:26 PM, tuanphan said:

Question 4

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: transparent !important;
}

Hey, could you help with how this could work for the image title as well? Same as the arrows, where there's no box around the title when it shows on hover. Thanks!

 

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.