Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Lightbox Form Button Changes


DanielLucasDesigns

Question

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. 

Link to comment
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 answers to this question

Recommended Posts

  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!!!

Link to comment
  • 0
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. 🙂

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/6/2021 at 11:37 AM, LaurenD27 said:

thank you so much! 

Do you need to fix these?

Site URL – https://www.lawrenmusic.com/

1. (Tablet – Homepage) Text and image align unevenly, not looking good.

https://www.lawrenmusic.com/#home-section

lawrenmusic.com-01-min.png

2. (Tablet – Footer) On desktop, menu items are on one line. On tablets, menu items are cut into four lines.

https://www.lawrenmusic.com/#home-section

lawrenmusic.com-02-min.png

3. (Tablet – Merch) The word All merch is cut to 2 lines.

https://shop-lawrenmusic.com/

lawrenmusic.com-03-min.png

4. (Tablet – Press kit) Text and image align unevenly, not looking good.

https://www.lawrenmusic.com/press-kit

lawrenmusic.com-04-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...