[EkaterinaPSParticipant]

X theme,

I am trying to create a pop up page from a button with a picture and text content in it. How can I do that? Here is the page that I am trying to do it from: http://www.vektorcic.com/discover_vektor/the-team/

and the page would pop up from the profile/connect button. The size of the new page should be smaller than the original.

Thank you in advance.

[ChristopherModerator]

Hi there,

Please wrap your lightbox content inside a content band and add width:500px; margin:0 auto; in style field of content band.

Hope it helps.

[EkaterinaPSParticipant]

Thank you X theme,

I have understood your directions, put I am not sure where to put it within the page. I do want the page to open up from a button and not an image so I do not know what to put. Is it possible to give me more detailed instructions? For example, would it look something like this?

[content_band padding_top=”0px” padding_bottom=”0px” border=”none”][lightbox selector=”.x-img-link” deeplink=”true” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″ orientation=”horizontal”][/content_band]

Thank you

[Nabeel AModerator]

Hi again,

Create a new page, add image or content in the page, then add following code in your page editor where you want to add the button:

[button shape="square" size="mini" float="none" info="none" info_place="top" info_trigger="hover" href="http://your/page/link"]PopUp Button[/button][lightbox selector=".x-btn" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]

Just replace the link with your newly created page link. Let us know how this goes!

[EkaterinaPSParticipant]

Thank you!

So now I got the new page opening up, but cannot get the size. I have added a content band as well. this is how it looks like (I added max-width on both the content band and lightbox but none of them work):

[button shape=”rounded” size=”regular” float=”none” href=”http://www.vektorcic.com/?p=7533″ info=”none” info_place=”top” info_trigger=”hover”]Profile | Connect[/button][content_band style=”max-width: 50%; margin: 0 auto;” no_margin=”true” padding_top=”0px” padding_bottom=”0px” border=”none”][lightbox selector=”.x-btn” style=”max-width: 500px; margin: 0 auto;” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″ orientation=”horizontal”][/content_band]

what am I doing wrong?

[ThaiModerator]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

.ilightbox-container iframe {
width: 50%;
margin: 0 auto;
display: block;
}

Hope it helps.

[EkaterinaPSParticipant]

Thank you!

[Paul RModerator]

You’re welcome!

[Author]

Posts