Customisations on Lightbox Form

Site URL: https://standardpoodlesaustralia.squarespace.com/

Hi, 

I would like to customise a couple of things on my lightbox form to match the rest of the site. 

The things I need help changing:

• Open Form Button: change the outline border to 1px
• Change the background of the form to: #E7E6E5
• Change all text colour to: #726B6A
• Change the fonts used for the form: headline (Orpheus Pro); all form field text (Adobe Garamond Pro).
• Change the form submit button to match the open form button. 

Thank you, 

Krysten

Password: standardpoodle

Hi,

Where is lightbox form?

Hi, 

It is on the Enquiry Page:

https://standardpoodlesaustralia.squarespace.com/enquire

Thank you

10 hours ago, krystenjade said:

Hi, 

It is on the Enquiry Page:

https://standardpoodlesaustralia.squarespace.com/enquire

Thank you

 

 

Add to Design > Custom CSS

button.lightbox-handle {
    border-width: 1px !important;
}

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
    background-color: #e7e6e5;
}

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content * {
    color: #726b6a !important;
}

.form-title {
    font-family: 'orpheus-pro';
}

.form-inner-wrapper * {
    font-family: 'adobe-garamond-pro' !important;
}

Thank you. This worked perfectly.

The only extra thing I need to fix is the form submit button to match the Open Form button.

At the moment it has changed to a solid colour.

On 11/16/2021 at 5:03 AM, krystenjade said:

Thank you. This worked perfectly.

The only extra thing I need to fix is the form submit button to match the Open Form button.

At the moment it has changed to a solid colour.

Use this CSS

.lightbox-content .form-wrapper input[type=submit] {
    color: #726b6a !important;
    background-color: transparent !important;
    border: 1px solid #726b6a !important;
    font-family: adobe-garamond-pro;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
}
.lightbox-content .form-wrapper input[type=submit]:hover {
    background-color: #726b6a !important;
    color: white !important;
}

Hi @tuanphan I need a bit of extra help to make the ligthbox input text to black, not the white. Can you help? Thanks! 

On 9/23/2022 at 1:29 AM, BethH said:

Hi @tuanphan I need a bit of extra help to make the ligthbox input text to black, not the white. Can you help? Thanks! 

Try this CSS. If it doesn't work, please share link to page where you use lightbox form.

.lightbox-content input, .lightbox-content textarea {
	color: black !important;
}

On 9/24/2022 at 2:17 AM, tuanphan said:

Try this CSS. If it doesn't work, please share link to page where you use lightbox form.

.lightbox-content input, .lightbox-content textarea {
	color: black !important;
}

 

https://www.bridgeflooringco.com/

Hello, Yes this code did not work. Here is the link! Thank you! 

12 hours ago, BethH said:

https://www.bridgeflooringco.com/

 

Hello, Yes this code did not work. Here is the link! Thank you! 

Find & change this code

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content * {
    color: #e6e4d1 !important;
}

to this

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content *:not(input):not(textarea) {
    color: #e6e4d1 !important;
}

Hi Tuanphan,  Thank you! That helped with the input text, but it changed the text also on my button. Can you help me make the button text white? 

Thank you! 

https://www.bridgeflooringco.com/

On 9/29/2022 at 12:46 AM, BethH said:

Hi Tuanphan,  Thank you! That helped with the input text, but it changed the text also on my button. Can you help me make the button text white? 

Thank you! 

https://www.bridgeflooringco.com/

Add this CSS under

.sqs-modal-lightbox-content .lightbox-inner input.button {
    color: #e6e4d1 !important;
}