Docs

[BradleyB]

Hi,

I have an HTML page which comes up in a lightbox. I am having some trouble styling it. I would like to accomplish the following:

1) Restrict the size that the page is displayed. As you can see, the lightbox background is not visible on the sides and only slightly visible on the top and bottom. I would like the page to sit smaller inside the lightbox.

2) For some reason, The Yelp page which I link to later in the page is showing up to the right of the HTML page. How do I remove this?

Thanks so much!

[BradleyB]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

1] To restrict the size of the lightbox container, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body .ilightbox-holder div.ilightbox-container {
    max-width: 900px;
    margin: auto 0 !important;
}

Feel free to adjust the maximum width to your desired width.

2] This isn’t an issue at all. This is normal because both of the lightbox is using the same css selector which is just .x-btn. if you want to have them separate and independent, please edit your button and add a custom class. You should have somethine like this:

[button class="btn-google" shape="square" size="mini" float="none" info="none" info_place="top" info_trigger="hover" href="http://treehouserecovery.com/wp-content/uploads/2016/11/googe.html"]More Google Reviews[/button]

[lightbox selector=".btn-google" opacity="0.875"]

And this also:

[button class="btn-yelp" shape="square" size="mini" float="none" info="none" info_place="top" info_trigger="hover" href="https://www.yelp.com/biz/tree-house-recovery-costa-mesa"]More Yelp Reviews[/button]

[lightbox selector=".btn-yelp" opacity="0.875"]

We would loved to know if this has work for you. Thank you.

[BradleyB]

Thanks so much! That helped. However, now the lightbox page is left justified. How do I center it in the page? Thanks again! –

B

[Rupok]

Hi there,

Please update the previous CSS :

body .ilightbox-holder div.ilightbox-container {
    max-width: 900px;
    margin: auto 0 !important;
}

to following :

.ilightbox-holder.light {
  background-color: transparent;
}

.ilightbox-container > iframe {
  display: block;
  margin: 0 auto;
  max-width: 900px;
}

Hope this helps.

[BradleyB]

Thank you! That helped!

However, now there are horizontal shadows across the top and bottom. Also, you can not close the lightbox by clicking on the background. is there any way to fix this? Thanks again! I really appreciate the help!

[Joao]

Hi There,

Please enter the following code to Appereance > Customizer > Custom > CSS

.ilightbox-holder.light {
    box-shadow: none !important;
}

Hope that helps

Joao

[Author]

Posts