Skip to main content

Hi. I have a lightbox created in Unbounce: http://www.sulky.com/sandbox/


My boss wants the close “X” removed from the upper-right corner. I’ve tried using a custom CSS created in the Stylesheets tab as such:




button.ub-emb-close {
display:none !important;
color: #FF0004 !important;
}

I only added the red color for testing to find out if I could affect the “X” at all. Thus far, I haven’t figured out what I’m doing wrong. I’m sure it’s something really simple I’m overlooking. Could someone help me please?

Try this 🙂


.ub-emb-iframe-wrapper .ub-emb-close  { display:none !important; }

No cigar. (I deleted all my live browser info and refreshed just to be sure.)


Should I see a reference to my stylesheet in the head tag when I view the page source? some reference to modifiedstyles.css? If so, I’m not seeing it. That may be the problem, but I wouldn’t know how to fix that either since I assumed creating a style sheet using the Unbounce stylesheet tab would automatically take care of that for me. Am I wrong?

I edited that in the dev tools (Inspect) on the live page and it worked.


Can you screenshot the updated style you created?

Is this what you were asking for?

30 AM

Hey @davef,


Where are you adding this style? When you add a lightbox to a page, it creates a separate “Lightbox” tab with its own stylesheet. You can navigate between the “Page” and “Lightbox” tabs right above the builder:


1


Are you adding your CSS to the “Lightbox” tab stylesheet, or to the “Page” tab stylesheet? If you’re adding it to the “Lighbox” stylesheet, you might try adding it instead to the “Page” stylesheet.

Whoops - I think I’ve used the wrong term. Perhaps it isn’t a lightbox I’ve created. The tab (left side) is actually called a “convertible”. I created a style sheet called “modifiedstyles” in the tab at the bottom of the working area. Screen cap attached.

18 PM

Ahh, I see. 🙂


Admittedly, I’m not all that familiar with Convertables, but looking at the way that its embedded into your page, it appears that the Convertable itself is within an iframe that’s on a separate layer than the “x” button, so the styles that you apply to it will not affect anything outside of the iframe.


2


Do you have access to your website’s stylesheet? I believe you’ll need to add the style there. However, I haven’t played around much with Convertables yet, so there might be an easier way to do this that I’m not aware of. Best of luck!

Hey @davef I just tested this out – @leah.ann was right 🙂


You need to also add the style to



  1. The Convertable

    and

  2. to the main Unbounce landing page OR the main website where you are showing the Convertable.


See my mockup here: https://www.detoxcleansenourish.com/test/


<style> 

.ub-emb-iframe-wrapper .ub-emb-close  { display:none !important; } 

</style>

Reply


Terms & ConditionsCookie settings