Jump to content

Form Lightbox, additional info Product

Go to solution Solved by justin.mabee,

Recommended Posts

Hello

I kinda need some code to style my form, located in the additional info product.

The form opens in Lightbox.

I want the background black, the field white with no hover, and the title and text in white.

I can not control this primary button; I am getting a dark blue colour on hover.

Any help will be appreciated.

You can find the button on this page: https://www.yodeschamps.com/image-licensing/p/road-to-infinity

Thank youScreenshot2024-02-18at7_46_20pm.thumb.png.1ce2ef484d2ad9455fa47924d4ebd377.png

 

Screenshot2024-02-18at7_46_29pm.thumb.png.ebac21dc14c9429e25dadd130fa1de9c.png

Edited by _yohandeschamps_
Correct a typing mistake
Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

If you click on the form block, then Design, and then Edit Form Styles, from there you can customize all of the form styles. But this may not translate to the lightbox form, so try this out. Obviously change the fonts or remove the font lines entirely if you don't need them, same with text-transforms.

//Lightbox Form//
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
  background: #090b09 !important;
  border: 1px solid #e7e64d;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .lightbox-close {
  color: #e7e64d;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title {
  font-family: 'Quantify Bold';
  text-transform: uppercase;
  color: white;
}
.form-wrapper .field-list .title, .form-wrapper .field-list .field .caption {
  font-family: 'Nexa Bold';
  text-transform: uppercase;
  color: white !important;
}
.sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary {
  background-color: #e7e64d;
  color: black;
  font-family: 'Nexa Bold';
}
.form-wrapper .react-form-contents .field-list .fields .description.required, .form-wrapper .react-form-contents .field-list .description.required, .form-wrapper .react-form-contents .field-list p.description, .form-wrapper .react-form-contents .field-list .caption-text:not(:empty) {
  font-family: 'Nexa Bold';
  color: white;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper {
  background-color: black;
}

 

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

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.