Hey there,

www.sophielake.co.uk

I am not in any way shape a coder but I have used CSS before with squarespace. I just wanted to add in some custom CSS to create custom fonts and I added some by following an article online of which you can see the code below. Only it doesn't work! 
I can see from previous discussions that cutom fonts haven't been working for a lot of people but I just wondered if someone could look at the code and make sure everything is correct please.
 

I also think in the process I have accidentally deleted some CSS code that was already in the box. This code would make the text on my Image Blocks set at 'Poster' appear upon Hover but now it is no longer doing that so I think i've messed it up! It says I am "missing opening {" but I have no idea where.

Can anybody help?

Thanks!

Did a developer work on your site? Can you ask him if he has a local copy of the code?

No, I think I must have put that code in at some point in the past but have no idea what it was

Add all the CSS code here to review it 

@Lakey  This should be easy enough to fix! Once we do, I recommend that you copy / paste your CSS into a document for safe keeping. 

Initial thoughts:

• The text that says missing opening '{' shows an error in the code and when that happens, the rest of the code may not work. From what I can see, your custom font should display correctly once we fix that issue. 

• There was definitely something deleted above the code I've highlighted in the box below. This is the source of the error. 

Delete the code in the box and replace it with:

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}

Thank you so much! I'm gonna give it a go now!

Ah unfortunately, that didn't work 😞

It made the text disappear altogether

Add all the CSS code here to review it and add the link to the site

@Lakey  Hmm let's try it again. I have a feeling there may be a small error as I've tested the code on my site. 

A couple starter questions:

• Is the custom font working at least?
• Are you on 7.0 or 7.1?
• Where are the poser images on your site? Are they the homepage images?

Steps for replacing the code:

1. Keep this CSS

2. Delete this 

3. Copy / Paste this in:

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: green;
}

4. Save, exit the CSS box, refresh the page, and then see if the offer effect works. 

This is what it looked like when I tested it out (and hovered over it):

5. Change "green" to the hex code you want it to be. Click save again. 

6. If that doesn't work, please copy and paste ALL your code in (no images) so that we can take a look at it. 

Please make sure to tag us when responding.  😊 Otherwise, I probably won't see it. To tag someone, type @ and then their username. When it's in a black pill shape (like at the beginning of this post), then you know you've done it right.

Hey! Thanks so much! I'll give it a go!

The font is not even showing now on the Poster image.

I'm using Squarespace 7.0 - do I need to upgrade??

Yes the Poster images are on my homepage. www.sophielake.co.uk

Sophie

On 3/22/2024 at 6:55 PM, Lakey said:

Hey! Thanks so much! I'll give it a go!

 

The font is not even showing now on the Poster image.

I'm using Squarespace 7.0 - do I need to upgrade??

Yes the Poster images are on my homepage. www.sophielake.co.uk

 

Sophie

Don't remove any CSS code in your current code. Use this code to Custom CSS box

.design-layout-poster .image-card-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}