Jump to content

[Share] Form Block Lightbox CSS

Recommended Posts

Some custom CSS for Form Block Lightbox.

You can add code to Website Tools (under Not Linked) > Custom CSS

#1. Change Title size

/* Lightbox form title size */
div.lightbox-inner .form-title {
    font-size: 50px !important;
}

#2. Add subtitle

/* add sub text */
div.lightbox-inner .form-title:after {
    content: "enter some text here";
    display: block;
    font-size: 16px;
}

image.png.02de3233632cf08e795e99698354a965.png

#3. Align center Title

/* align title */
div.lightbox-inner .form-title {
    text-align: center;
    margin-left: 22px;
}

#4. Change close X icon style

/* Change X icon style */
div.lightbox-close {
    color: #f1f !important;
    font-size: 30px !important;
}

#5. Submit button color

/* Form Lightbox Button */
div.lightbox-inner input.button {
    background-color: #f1f !important;
    color: #000 !important;
}

#6. Submit button hover color

/* Form Lightbox button hover */
div.lightbox-inner input.button:hover {
    background-color: #000 !important;
    color: #f1f2f3 !important;
}

#7. Form background color

/* Form lightbox background color */
div.lightbox-content {
    background-color: #f1f !important;
}

image.png.5b496a49c46ca1110c055fd94899bd1f.png

#8. Form background image

/* Form lightbox background image */
div.lightbox-content {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/15/16/17/feather-7854908_1280.jpg) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

image.thumb.png.37cac0ac4a294fe6e7e5409b11baf519.png

#9. Add a frame around lightbox

/* add a frame around form lightbox */
div.lightbox-content {
    border: 3px solid #f1f;
}

image.png.ad328fb77ac6f0f7b623be24ceec2fc3.png

#10. Overlay color behind lightbox

/* Overlay color behind lightbox form */
.sqs-modal-lightbox-content .lightbox-background {
    opacity: 0.8 !important;
    background-color: violet !important;
}

image.png.1112b885ba54a24d5319aa810dc3903b.png

If you have any questions, or want to request new code, just comment below

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!)

Link to comment
  • 1 month later...
  • Replies 2
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, raego said:

This is great, thanks so much for the info - is there anyway to target this CSS to just one form block? Also if there's any way to do the same CSS for the open form button?

Yes. We can target with ID, but you need to share link to page where you use form & which CSS you want to apply, I can give the code.

In case you know inspect HTML, find this ID

image.thumb.png.de8d7baedca51b414362e61e54fcecf9.png

and to apply this ID, suppose #3 code, we will use new CSS like this

/* align title */
form[data-form-id="65dbf1edf3365648bccd9900"] .form-title {
    text-align: center;
    margin-left: 22px;
}

Open Form: You want to change text size, color, background or?

Edited by tuanphan

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!)

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.