Jump to content

Lightbox Form Button Changes

Recommended Posts

Posted

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. 

Posted

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 months later...
Posted
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!

Posted
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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!!!

Posted
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. 🙂

Posted
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Thank you Tuan, worked perfect! 😃

  • 1 year later...
Posted
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!

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 weeks later...
Posted

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!

Posted
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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!

Screen Shot 2021-06-28 at 10.09.20 AM.png

Posted (edited)
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!

Screen Shot 2021-06-28 at 10.09.20 AM.png

Hi,

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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 6 months later...
Posted

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!

 

Posted
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?

accesspasssword.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.