Streaming live at 10am (PST)

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


#1

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

Thanks!

Jon


#2

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 smile Cheers, Dave


#3

Hi Dave,

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

Thanks!


#4

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


#5

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. smile


#6

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


#7

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.


#8

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


#9

@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!


#10