Leda_Atomika Posted August 3, 2023 Posted August 3, 2023 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; }
tuanphan Posted August 4, 2023 Posted August 4, 2023 Hi, Where is lightbox form? 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!)
Leda_Atomika Posted August 4, 2023 Author Posted August 4, 2023 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 Leda_Atomika Posted August 5, 2023 Author Solution Posted August 5, 2023 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... Ashley_Peoplethebrand, Unumbio, tuanphan and 2 others 4 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment