How can I make the lightbox X bigger/different color etc.?

Ciao!

How can I make the lightbox X bigger/different color etc.?
(I mean the x button that closes the lightbox.)
I would of course like to make it uniform with the style of my other buttons and so on.

Any ideas? I have nothing against custom code - I just have no idea how to write it😂

Cheers!
-Seppo


Here is my site Read-Only:

https://preview.webflow.com/preview/namoi?utm_medium=preview_link&utm_source=dashboard&utm_content=namoi&preview=7fb8b43a84918091b66492d06ccdbb80&mode=preview

live site:

The lightbox is using a background in a div for the button. So you can create a CSS custom code to override its styling and do it the way you want. Here is a code that I enriched for you so you get control over the main visual characterstics of the elements.

In order to see the results of this code in the designer, put this code inside of an Embed component inside of your page, anywhere. (put it under the body for conveniency).

<style>    
.w-lightbox-close {
height: 2.5em!important;
width: 2.5em!important;
background-image: https://uploads-ssl.webflow.com/5d70ccb76986a60574467b9f/5d9b3dcde7a0b30f63f52544_Namoi%20x.png!important;
background-size: 100px!important;
background-color: red;
}
</style>

The color red property is for you to well visualize the div when you’ll style it, remove it when done.

BTW those photos of Caroll lake… this place looks awesome!, Is it close to you? Where is is exactly?

Ok cool!
It’s in NC.
Super beautiful place☀️

1 Like

Ok I’m not smart enough for your advice…

I put the embed element in Body and copy pasted the code you presented.

Where would I get the URL OF THE NEW IMAGE?
Should that image be in my assets first and then that would with your custom code become the background in a div which you mentioned is used by the lightbox?

1 Like

No problem, one thing at a time :slight_smile:

Prepare your image and add it to Webflow, in the asset manager. Then click the little gear icon on the image asset, then right click the little arrow icon in the popup, and save the link (the arrow icon is a link to the PERMALINK of the image file on Webflow storage.). That’s the url you need to put in the code.

Use this technique to host images in your Webflow project and capture its url to use elsewhere, in custom code for example.

Blockquote
.w-lightbox-close!important {
right: 0;
height: 2.5em;
width: 2.5em;
background-image: https://uploads-ssl.webflow.com/5d70ccb76986a60574467b9f/5d9b3dcde7a0b30f63f52544_Namoi%20x.png;
background-size: 100px;
background-color: red;
}

1 Like

Should it look like this?

1 Like

Yep, don’t forget the <styles> tags

I can’t see any change in the X…

https://preview.webflow.com/preview/namoi?utm_medium=preview_link&utm_source=dashboard&utm_content=namoi&preview=7fb8b43a84918091b66492d06ccdbb80&mode=preview

1 Like

I made a mistake sorry :joy:

.w-lightbox-close {
height: 2.5em!important;
width: 2.5em!important;
background-image: url(https://uploads-ssl.webflow.com/5d70ccb76986a60574467b9f/5d9b3dcde7a0b30f63f52544_Namoi%20x.png)!important;
background-size: 100px!important;
background-color: red;
}

!important is there to add specificity to a property and allow it to overwrite the existing property on the same class.

2 Likes

I can change the BG color, size and location but the X stays the same…
I tried with another image URL from my assets also.

OK I forgot to write url before the url😂

Now it works, Thank you Vincent👌🏻

Nice one, made a note of it myself.
Starting to like to odd snippets of code.