Styling the slideshow gallery with custom code

Hello, amazing circle community, 

I have a few questions about styling a slideshow gallery. 

1. I am trying to style the gallery to match my design please see attached a screenshot of what I am trying to achieve. ( I will be doing a few slideshow galleries like this so I want to target all of them) 

2. I have styled the caption on my site but I am not sure if the code I used is the best as its caption has been cut off a little at the top, I wanted to make the text bigger but it slices the top of the caption off when I do that, is there any way to fix this, please see screenshot attached. I had managed to get to sit to the left of the slideshow at the bottom too but the code doesn't seem to work properly, I just want it to align left of the image below it like in my original design. 

3. Is there a way to get two different fonts in the caption from the slideshow gallery? I changed the caption font with code but I'm not sure if I am able to achieve the two fonts like in my design. 

4. I want to upload my own SVG icon for the slideshow gallery arrows but I also wanted to just have the right arrow and remove the left arrow altogether. Is this possible if so does anyone know the code to upload my own icon and remove the left arrow altogether?

5. I want the arrow to sit below the image on the right side like in my design but I have not managed to make that work with custom code. 

Please see the screenshots for reference.

Site: https://gracelillianlee.squarespace.com/

My site password is: Tr0pic@l

Does anyone have any ideas? 😅 

Hi Tuan,

Thank you so much for getting back to me, I ended up placing the slideshow with the new fluid engine so I was able to place the caption as a text block instead of using the caption within the slideshow. 

Your code worked thank you so much, the arrow is sitting a little high up and I need it to align with the text on the left, how would I move it down more?

Thanks for all your help. 

Hi Tuan I had one more question, I realise I needed to make one of the slideshow gallery arrows white as that sections background is black. I was trying to target just that one slideshow, I used the below code using the block ID to try target it but I may have got the code wrong, I also tried to apply a fill to change the colour of the SVG.

This is what I used, that didn't work, do you know what code I should use if i just wanted to change one of the slideshow galleries arrows?

#block-2e660832ac58afc0f334.sqs-gallery-controls a.next {
    background-image: url(https://gracelillianlee.squarespace.com/s/Grace-lillan-lee-arrow.svg) !important;
    fill: #F7F6EC !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 70px;
    height: 30px;
    margin-top: 10px !important;
}

Thank you

37 minutes ago, Nicolette said:

Hi Tuan,

 

Thank you so much for getting back to me, I ended up placing the slideshow with the new fluid engine so I was able to place the caption as a text block instead of using the caption within the slideshow. 

Your code worked thank you so much, the arrow is sitting a little high up and I need it to align with the text on the left, how would I move it down more?

Thanks for all your help. 

I fixed this with editing the margin height, Thank you. 

Hi Tuan, Sorry there is another thing, The code for the arrow worked but the code only works when I have the CSS panel open in Squarespace, It only seems to be with the SVG icon replacement part of the code. As soon as I exit out of the CSS menu and refresh the browser the arrows disappear all together. 

This the code, I'm not sure if I have broken it somewhere which is why its not working after I close the CSS editor.

//Change arrow
div.sqs-gallery-controls a.next {
    background-image: url(https://gracelillianlee.squarespace.com/s/Grace-lillan-lee-arrow.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 70px;
    height: 30px;
    margin-top: 31px !important;
}

a.next:before {
    visibility: hidden;
}

Thanks sorry for the spam.

On 12/1/2023 at 8:03 PM, Nicolette said:

Hi Tuan, Sorry there is another thing, The code for the arrow worked but the code only works when I have the CSS panel open in Squarespace, It only seems to be with the SVG icon replacement part of the code. As soon as I exit out of the CSS menu and refresh the browser the arrows disappear all together. 

This the code, I'm not sure if I have broken it somewhere which is why its not working after I close the CSS editor.

 

//Change arrow
div.sqs-gallery-controls a.next {
    background-image: url(https://gracelillianlee.squarespace.com/s/Grace-lillan-lee-arrow.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 70px;
    height: 30px;
    margin-top: 31px !important;
}

a.next:before {
    visibility: hidden;
}

Thanks sorry for the spam.

 

Sometimes uploaded files won't work on Trial Plan

Thank you, I upgraded my site and that worked. I wanted to target just one of the slideshow galleries, so I could use a fill on the SVG arrow to make it white, I tried to use this code but it didn't work. Is there something missing?

#block-2e660832ac58afc0f334.sqs-gallery-controls a.next {
    fill: #F7F6EC !important;
}

21 hours ago, Nicolette said:

Thank you, I upgraded my site and that worked. I wanted to target just one of the slideshow galleries, so I could use a fill on the SVG arrow to make it white, I tried to use this code but it didn't work. Is there something missing?

#block-2e660832ac58afc0f334.sqs-gallery-controls a.next {
    fill: #F7F6EC !important;
}

 

 

Need a space here

#block-2e660832ac58afc0f334 .sqs-gallery-controls a.next {
    fill: #F7F6EC !important;
}

Thanks for getting back to me, sorry I did have it with the space originally, it doesn't work either way.  I ended up replacing that code and added in a light arrow to replace for that block, see the code below. Thanks for all your help.

#block-2e660832ac58afc0f334 .sqs-gallery-controls a.next {
    background-image: url(https://gracelillianlee.squarespace.com/s/right-light.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 70px;
    height: 30px;
    margin-top: 10px !important;
}

But it didn't work