Button inside a lighbox

Hi!
I wanted to ask if I can add an image and a button(“read more” which directs to another page) inside a responsive lightbox
Please Help!

AJ

Hi,

This is not possible out of the box, you’ll need to kind of set this one up manually, but something like the following would give you what you’re after:

<div id="my-content">
    [image type="rounded" src="http://yourdomain.com/image.jpg" alt="Text"]
    [button type="real" shape="square" size="mini" href="#" title="Read More"]Read More[/button] 
</div>

<a href="#my-content" class="lightbox-selector" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

So you’ll need to make sure to add a unique ID to the content you want to open up in the lightbox, then have a clickable link use that ID in the href attribute. You’ll also need to add a unique selector to the link via a class, which you’ll use with the [lightbox] shortcode.

Thanks!

Hi Paul
Thanks for replying.
Actually I need something like this :-

Hi There @abheeshekj

You can use content are modal element inside Cornerstone builder. Please review documentation from here (https://theme.co/apex/forum/t/elements-content-area-modal/10224).

You can also customize it as a button. You just need to enable the text and disable the icon. Follow the screenshots below.

Remove height and width to make it auto.

Then adjust padding and border-radius.

Hope that helps.
Thanks!

Hii!
I’m so sorry but I am using the text editor
:frowning:

Hi There,

In this case, please add this HTML button to your block grid:

<a class="x-btn x-btn-red x-btn-real x-btn-rounded my-button x-btn-mini" href="http://wcdsbp.org/" title="Example" data-options="thumbnail: ''" style="outline: none;">Read More</a>

After that add this custom CSS under Theme Options > CSS:

.x-block-grid.three-up>li {
    position: relative;
}
a.x-btn.my-button {
    position: absolute;
    right: 20px;
    z-index: 999999;
    top: 130px;
}

The result should like this:

Hope that helps!

Hi!
This works perfectly! Thank you soo much :smiley:

Can i use a smaller pill shaped transparent button instead too?
It just loogs a little big

Hi @abheeshekj,

Sure, please change this code

<a class="x-btn x-btn-red x-btn-real x-btn-rounded my-button x-btn-mini" href="http://wcdsbp.org/" title="Example" data-options="thumbnail: ''" style="outline: none;">Read More</a>

to this

<a class="x-btn x-btn-flat x-btn-pill x-btn-regular x-btn-transparent my-button x-btn-mini" href="http://wcdsbp.org/" title="Example" data-options="thumbnail: ''" style="outline: none;">Read More</a>

Thanks!

Hi There,

I see you withdrawn your posts? feel free to get in touch with us regarding any further queries about the X and Cornerstone.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.