Streaming live at 10am (PST)

I'd like to change the caption font in a lightbox

Is this possible? Is custom code needed, or is there a toggle that I’m missing?

Thanks!

Jon

Hi @jonnyfreedom, you can change the caption, but it is not a built in feature. You can use some custom css in the Site Header in the Custom Code section like so:

<style>

.w-lightbox-caption {
font-family: 'Great Vibes', cursive;
}

</style>

Replace the font-family with the font family you wish to use. I find it easy to take a text block, drag it to the page, then create a class, style it with the font I like, and then I publish the site. I then inspect the text block I styled and copy the css font family name to the style code above. You can delete the text block, I was just using that to find the style I liked and then get the style name. The css class you created, will remain, and the font loaded at page load.

I hope that helps, if not, let me know and I am happy to assist further :slight_smile: Cheers, Dave

2 Likes

Hi Dave,

That seems rather painless. I’ll certainly try that out and let you know if I have any difficulties.

Thanks!

Is it possible to change the font size of the text?

Add this to your custom code “head” area.

<style>

.w-lightbox-caption {
font-size:24px;
}

</style>

Change the 24px to to something more appropriate to your project. :slight_smile:

1 Like

I added the code, but the point size isn’t changing. Here is the read-only link if you want to see if I applied it correctly: https://preview.webflow.com/preview/nichollsconsulting?preview=e5973734871a45d3b6b69152b77975fa

Nevermind … I guess it worked, but the font didn’t change in Webflow view. I looked on the live site and it’s correct. Thanks a lot of PixelGeek.

1 Like

Hi @chrisgreer33, thanks for the update :slight_smile: At the moment, custom css only will show on the published site :slight_smile: Cheers, Dave

@cyberdave

Hi,

I was wondering, is it possible to adjust the height of that translucent-black overlay that is behind the lightbox caption text? Tks!