Jump to content

Changing the colors on Lightbox Forms

Go to solution Solved by Leda_Atomika,

Recommended Posts

Posted

Hello, I have a sage green color for all my buttons throughout the site EXCEPT on the Services Page for the Buyer's Guide. There it has made the button black. I implemented the code below to change it but for some reason it will change the hover color but not the background of the button when it's "inactive". I would like the background and hover color to be the same as the other buttons on the site.

I'd also like these same colors to be applied to the "Submit" button of the lightbox form itself and to have it look the same (font, spacing) as the other buttons.

#B1C7B4 is the Sage Green color of the "inactive" buttons.
I am not sure what the light green hover color is from the other buttons.

Help would be much appreciated!

Site: https://krill-panda-563t.squarespace.com/

Password: 0penthevidor

.sqs-block-content .lightbox-handle {
 color: #FFF;
 font-weight: 400;
 background: #0099FF;
}
.sqs-block-content .lightbox-handle:hover {
 color: #000;
 font-weight: 400;
 background: #B1C7B4;
}

Screen Shot 2023-08-03 at 2.32.57 PM.png

Screen Shot 2023-08-03 at 2.35.22 PM.png

Posted

On the Services Page there is a button "Get Our Buyer's Guide" - this opens the Lightbox Form. The button that is black that turns green is what I am referring to and then the "Submit" button on the form once it's open.

 

  • Solution
Posted

All good - I found a solution:

.sqs-block-content .lightbox-handle {
 background: #B1C7B4 !important;
}
.sqs-block-content .lightbox-handle:hover {
 color: #fff;
 font-weight: 400;
 background: #B1C7B4;
}

and for the Submit button:

/* Target the submit button and change the background color */
.button.sqs-system-button.sqs-editable-button.sqs-button-element--primary.FecjBqAV0ViY3ijU58R1 {
  background-color: #B1C7B4;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 20px;
  border: none; 
}

and I also changed the font of the form to match the rest of the site (Proxima Nova):

/* Form Title */
.form-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 17px !important;
}
/* Labels for First Name, Last Name, and Email */
.field-list {
  font-family: "Proxima Nova", sans-serif;
  font-size: 16px;
}

/* "Required" text in labels */
.description.required {
  font-family: "Proxima Nova", sans-serif;
}
/* Label and Input Fields */
label.caption {
  font-family: "Proxima Nova", sans-serif;
}

Hope this helps someone else to customize this...

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.