Jump to content

Exclude custom CSS from specific blocks?

Go to solution Solved by WCS,

Recommended Posts

I'm using this CSS from Ghost Plugins to add a shadow to image blocks on my new site (not published yet). Is there a way to exclude it from certain image blocks? There are a few image blocks on my website that I don't want a shadow on, can I use the #block code to exclude in CSS?

// IMAGE BLOCK - SOLID BOX SHADOW STYLE - GHOST //

.sqs-block-image .design-layout-fluid .sqs-image {
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px #000 !important;
}

Screenshot 2024-03-29 at 1.03.12 PM.png

Link to comment

@jonuehring It might be easier to specify which blocks, or what sections, youʻd like the effect applied to. If you can share:

  • your url and password
  • which blocks you want the drop shadow on

I can give you the code. If you want to source that yourself, I highly recommend getting the Chrome plugin Squarespace ID Finder.

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment
Posted (edited)

@WCS I haven't published the site yet so it's still private and unpublished without my content on it yet. Would you be able to provide code without seeing the site? 

I do know which sections I want to include the drop shadow. Is that helpful?

section[data-section-id="654571c2ded6710668652c59"]

section[data-section-id="64daff6293656e1849bb6b68"]

section[data-section-id="64daff6293656e1849bb6b6e"]

Edited by jonuehring
Link to comment
  • Solution

@jonuehring Yes, that works great! Try the below code and let me know if it works.

Just so you know though, you can also make your site available for view — even if you havenʻt paid for it yet. Settings > Website > Site Availability > Password Protected (then set a password)

// Label which image it is

section[data-section-id="654571c2ded6710668652c59"] .sqs-block-image .design-layout-fluid .sqs-image {
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px #000 !important;
}

// Label which image it is

section[data-section-id="64daff6293656e1849bb6b68"] .sqs-block-image .design-layout-fluid .sqs-image {
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px #000 !important;
}

// Label which image it is

section[data-section-id="64daff6293656e1849bb6b6e"] .sqs-block-image .design-layout-fluid .sqs-image {
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px #000 !important;
}

 

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment
  • 2 weeks later...
  • 2 months later...
Posted (edited)

Hi @WCS! I have a similar question, although I am not able to separate out by section. Is it possible to exclude certain image blocks from CSS styling? You can see in the screenshot that I've added a few of these collage-style images that I don't want the outline (or need the radius) on. I suspect there will be 4-6 of these total.

The website: https://thesucculentstudio.squarespace.com/?password=new

Here is the code I'm using:

// Adds radius and border to image blocks //

.sqs-image img {
  border-radius: 30px;
}
.content-fill::after, .content-fit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  border: 1.5px solid #000;
}

Any advice would be much appreciated!

Screenshot 2024-07-09 at 4.03.23 PM.png

Edited by ellen_b
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.