Solved

Custom CSS Isn't Working

6 years ago
26 September 2017
8 replies
202 views

davef
3 replies

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?

icon

Best answer by leah.ann 28 September 2017, 00:13

View original

8 replies

Userlevel 6

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?

Userlevel 6

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:

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.

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.

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!

Userlevel 6

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

You need to also add the style to

The Convertable
and
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

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded