Jump to content

How to make a second version of a css modified element for use elsewhere on the site?

Recommended Posts

I have a pop up form that is styled using custom CSS. I want to use another pop up form elsewhere, but wish to style it differently. Both pop up styles will be heavily used, so if there's a way to match the style to which branch/category then that would be ideal.

In this particular case I wish to have two versions of ".sqs-modal-lightbox-content"

I have tried copy and pasting block id's (e.g #item-5e1224fe62ad5d43f3c101d6) but i'm either not using correct formatting or it doesn't work.

Link to comment
  • Replies 2
  • Views 390
  • Created
  • Last Reply

Thank you, yes I would be happy to share:


PopUp01 - "Request shipping quote button"

PopUp02 - Smartphone/Tablet Buttons

password: jonjonjon


  • I am currently getting round this by adding css in each product page header injection. But this would mean future changes would be tedious to make changes for in future and prone to inconsistency


  • The div class is ".lightbox-handle.sqs-system-button.sqs-editable-button" (i will also be changing the button style between the two uses.


  • The two uses are found on different "Store" pages, tags and categories. Brine layout

I was working on this element at the moment, but I will leave it so that you may be able to have a look at it without things changing.

Link to comment


This topic is now archived and is closed to further replies.

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