Custom Button Styling / Edit Lightbox Styling

[frankburder]

Hello!

I have two questions:

I created a custom styled button that shows a wufoo form in a lightbox popup when clicked. You can see it on the homepage, first section below the hero image - “request info” button.

Student Housing in West Campus UT at Austin - Inspire on 22nd

1. I’m trying to edit the styling of the lightbox popups on this site. Specifically, I want to make the close button that is in the top left of the popups to be in the top right and I want to change the color, size, and dropshadow of the close button.

2. Using Cornerstone, I have the skew animation on hover on all of the site’s buttons. You can see one in action on the section below the one referenced in #1 - “see all floorplans” button. Is there a way to apply the css from these Cornerstone buttons to my new custom buttons?

Any ideas?

[Prasant]

Hello @frankburder,

Thanks for asking.

1. Please add following CSS under Pro > Theme Options > CSS:

.ilightbox-toolbar.light {
    left : auto!important; right : 8px;
}

.ilightbox-toolbar.light a.ilightbox-close {
    color: #ddd;
}

.ilightbox-toolbar.light a.ilightbox-fullscreen {
    color: #ddd;
}

2.Please add following class x-anchor x-anchor-button to custom button element and the changes should reflect automatically.

Let us know how it goes.

Thanks.

[frankburder]

Hi - thanks for the quick reply.

I almost have the lightbox ready. How can I change the size of the close X?

I added those classes to my custom button, but there were no changes.

[Prasant]

Hello @frankburder,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS:

.ilightbox-toolbar.light a.ilightbox-close:before {
    font-size: 30px;
}

Can you please share URL of the page wherein custom button is placed? I would like to take a closer look.

Thanks.

[frankburder]

Thank you.

You can find one of the links in the top right header - “request info” button:

And another just down on the homepage here:

It’s a custom text button that I’m styling. You can find one of my Cornerstone button hover animation that I’m going for on my custom buttons here (see all floorplans button):

[Prasant]

Hello @frankburder,

Thanks for updating the thread.

Okay, looks like the changes are getting overridden by following code:

.btn-lightbox-header:hover {
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
}

If you can remove above code then changes should reflect provided class name has been added.

If not, please try adding following code in Pro > Theme Options > CSS:

.x-btn.btn-lightbox-header:hover {
    background-color: #5ba69c !important;
    border: 2px solid #5ba69c !important;
    color: #fff !important;
    text-shadow: none !important;
}

Thanks.