Lightbox Form Button Changes

Site URL: https://harmonica-pike-dxz2.squarespace.com/about

Site password: Twilight450

Hey again!

So I'm using the lightbox mode for the contact form on my page, and I can't seem to find the exact option to change the font/size of the button to make it smaller, and/or change the color of it. I'd like it to be the same size as my medium buttons, but can't find a way to change anything about specific lightbox buttons anywhere under Design > Font. 

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1584486413963_8284 button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

On 3/17/2020 at 8:11 PM, tuanphan said:

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1584486413963_8284 button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

 

Hello Tuan, how can i do the same for a particular form button? Its the first one at the top:

https://www.christianvivanco.com/bajio-for-balsa

Thanks!

4 hours ago, chris_vivanco said:

Hello Tuan, how can i do the same for a particular form button? Its the first one at the top:

https://www.christianvivanco.com/bajio-for-balsa

Thanks!

div#block-yui_3_17_2_1_1590169813726_144276 button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

10 minutes ago, tuanphan said:

div#block-yui_3_17_2_1_1590169813726_144276 button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

 

Awesome, thank a lot!!!

On 5/22/2020 at 5:36 PM, tuanphan said:

div#block-yui_3_17_2_1_1590169813726_144276 button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

 

Here again Tuan. It's possible to have a code for all the Form Buttons that i place in the site? like an standardized thing. Thanks in advance. 🙂

5 hours ago, chris_vivanco said:

Here again Tuan. It's possible to have a code for all the Form Buttons that i place in the site? like an standardized thing. Thanks in advance. 🙂

try this

button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

Thank you Tuan, worked perfect! 😃

On 5/25/2020 at 8:42 AM, tuanphan said:

try this

button {
    font-size: 18px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: black !important;
    background: white !important;
}

 

Hi Tupan, I see this code works to change the button that you click to open the lightbox form but not the actual submit form within the form itself. Do you know if there is a way to do this with code? Squarespace support have already told me it will have to be done with custom code. Thank you in advance!

On 6/6/2021 at 3:46 PM, minnieosc0504 said:

Hi Tupan, I see this code works to change the button that you click to open the lightbox form but not the actual submit form within the form itself. Do you know if there is a way to do this with code? Squarespace support have already told me it will have to be done with custom code. Thank you in advance!

Can you share link to page where you use form? We can check again easier

Hi Tuan!

I'm copying the code from above, but not seeing any changes.

I have two lightbox forms on this page on my website, and I'd like to change the font color to black, as well as make the boxes bigger. I already have some custom code installed to hide the header and footer navigation (if there's interference possible).

Thank you so much!

On 6/24/2021 at 10:19 PM, LaurenD27 said:

Hi Tuan!

I'm copying the code from above, but not seeing any changes.

I have two lightbox forms on this page on my website, and I'd like to change the font color to black, as well as make the boxes bigger. I already have some custom code installed to hide the header and footer navigation (if there's interference possible).

Thank you so much!

Add to Design > Custom CSS

/* You want in buttons */
div#block-yui_3_17_2_1_1622585797775_181044, div#block-yui_3_17_2_1_1622586700084_215283 {
button.lightbox-handle {
    color: black !important;
}}

Hi Tuan! Thank you so much for that code! I inserted it on the Advanced section of the page settings, and didn't see anything change... Is there somewhere else I should be putting this code? (Attaching a screenshot). Thank you so much!

On 6/28/2021 at 11:11 PM, LaurenD27 said:

Hi Tuan! Thank you so much for that code! I inserted it on the Advanced section of the page settings, and didn't see anything change... Is there somewhere else I should be putting this code? (Attaching a screenshot). Thank you so much!

Hi,

Add to DESIGN > CUSTOM CSS (see my signature to know where Custom CSS)

On 6/30/2021 at 12:55 AM, tuanphan said:

Hi,

Add to DESIGN > CUSTOM CSS (see my signature to know where Custom CSS)

thank you so much! 

Hi Tuan,

I'm using a lightbox for the contact form and having trouble modifying the color / size of the lightbox button to submit the form and the "X" that closes the lightbox itself. Tried injecting your code into Design > Custom CSS.

At the very bottom of this page:

https://abovesummitdraft.squarespace.com/

"Let's Go" opens the lightbox form and the button I can't modify is the "get started" button on the form.

Thanks!

On 1/27/2022 at 1:34 AM, JovanT said:

Hi Tuan,

I'm using a lightbox for the contact form and having trouble modifying the color / size of the lightbox button to submit the form and the "X" that closes the lightbox itself. Tried injecting your code into Design > Custom CSS.

At the very bottom of this page:

https://abovesummitdraft.squarespace.com/

"Let's Go" opens the lightbox form and the button I can't modify is the "get started" button on the form.

Thanks!

 

Hi. What is password?