Nicolette

Hi Tuan, Thank you, this did work, I was wondering if there was a way to get it to work SVGs? I uploaded 2, one for each cursor state but they didn't work, only the PNGs. Do I need to alter the code so SVGs work? Normal: https://gracelillianlee.squarespace.com/s/custom-curser.svg Hover: https://gracelillianlee.squarespace.com/s/custom-curser-hover.svg I also had the same issue however, when using this code it breaks the edit mode in fluid engine. I have attached a video as an example. Would this mean I would need to use that safe mode link to edit the site when having a custom cursor applied? Thanks again for all your help. Video here of what it's doing in edit mode, when I add a block it shoots me to the top of the page and will only let me add a new block to top section and none below: https://www.loom.com/share/490e3a3ad63446298fde1a9e52b06840?sid=a20694c4-f0b4-4d85-8172-000db8290820

I have had to remove that code altogether as it was breaking my site, it was affecting me when I was in edit mode and would not let me add new blocks to sections, does anyone have any ideas on what might work? Thank you 🙂

Thank you for this, this worked 🙂

Hello, No it still does not work on my end, and I have the same problem. See the link to screen record https://www.loom.com/share/9bb7088191b64d8f9f8e515181f3df7b?sid=4e7c08be-4041-4e3c-ba9f-1354492332a1 Thanks in advance

Site: https://gracelillianlee.squarespace.com/ My site password is: Tr0pic@l Hello, I am trying to remove the hover state on my tertiary button, I have tried a few different code snippets and editing the colours to not make my tertiary button have a hover state but I have not been able to remove it. As my tertiary button has no fill and is just an underline button the hover state looks wrong and I would prefer to either create a hover state that simply changes the underline colour and text colour or none at all. I like the hover states on all my other buttons so I am only trying to remove it from my tertiary (small) button. Any ideas? thanks in advance 😊 Button normally Button on hover

Site: https://gracelillianlee.squarespace.com/ My site password is: Tr0pic@l Hello, I am trying to create a custom cursor site-wide and a custom hover cursor. I have tried a few different code snippets online but nothing seems to be working. The custom cursor will show up on my page for a second but it doesn't replace the default cursor it just sits next to it and then disappears. This is the code below that I have tried but is not working properly. Any ideas? body { margin: 0; height: 100vh; cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4ab330577bc8eb047/1701917908121/custom-curser.png), auto !important; } a:hover { cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4a70814190f44bef5/1701917908113/custom-curser-hover.png), auto !important; }

This worked and you are truly a magician thanks for all your help.

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

Site: https://gracelillianlee.squarespace.com/ My site password is: Tr0pic@l Hello, I was wondering if there is a way to change the navigation text when you hover over it, for example: Nav link one: Normal state: "ENTER MY WORLD" On hover state: "HOMEPAGE" Off hover state: "ENTER MY WORLD" The active state would stay on "ENTER MY WORLD" (I have styled the active state to make my text bold and italic) I want to do this for all my navigation text so each one has an alternate text on the hover state: Nav link two: Normal state: "CURRENT HAPPENINGS" On hover state: "EVENTS" Off hover state: "CURRENT HAPPENINGS" Nav link three: Normal state: "WOVEN SCULPTURE" On hover state: "COMMISSIONS" Off hover state: "WOVEN SCULPTURE" Nav link four: Normal state: "BEYOND THE VISIBLE WORLD" On hover state: "ABOUT ME" Off hover state: "BEYOND THE VISIBLE WORLD" Nav link five: Normal state: "THE JOURNEY" On hover state: "HISTORY" Off hover state: "THE JOURNEY" Nav link six: Normal state: "REACH FOR THE STARS" On hover state: "CONTACT" Off hover state: "REACH FOR THE STARS" I appreciate any suggestions in advance 🙂

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

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.

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

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

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.

Does anyone have any ideas? 😅

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

Thanks for updating me, ill keep me eye out for when they hopefully fix this issue.

Hi Paul, Thank you so much for this. Adding the code fixed the issue, I really appreciate your fast reply. I have noticed another issue once being able to use the variant dropdown in the product block. When I selected a variant that has another photo connected to it the product block hides the image altogether. So It will show the thumbnail image for that product but as soon I select another variant of that product the images disappear, is there also a workaround for this issue? Thanks so much. Please see the screenshots attached.

I have added some product blocks into the additional info section of one of my products, I am using this section to create add-ons. The product blocks are not displaying a variant dropdown on any of the products that have variants. You can see the variant dropdown in the old editor when setting it up on the back end but once you see it live the dropdown disappears. This only happens to the product blocks that sit in the additional info section which uses the 7.0 editor and not on any of the product blocks that are on the 7.1 parts of the site. My product variant display is set to buttons which I think is why the dropdown is not working on the product block under the additional info, but I want to keep the variant display as buttons so I'm wondering is there a way to code around this as I need people to be able to pick a variant on the product blocks as they are meant to be add ons and added to card from the product page. I have added screenshots. Thanks so much. My website is password protected if someone wants to take a look. https://meadowandfernflowers.squarespace.com/ password is: backandforth

I have actually worked it out, When copying the clip path from the developer tool to my custom CSS it cut it off. It now has added the border after fixing the clip-path link. Thanks for your help.

Hello, thank you so much. I have been trying to add a border to the screenshot attached. (the 3 oval shape images) I only want to add borders to some images on the website so I need to target specific blocks. I managed to do this in developer mode but when copying the code into Squarespace it didn't work and just made a big black background behind the shape. Please see attached examples:

I am wanting to add a border or stroke to an image block with a shape applied, I can not find any CSS or way to do this and I was wondering if anyone knows what to use? Please see attached an example of what I want to achieve in the arch shape.