Add A Text Background Color for Image Poster Block | Squarespace Rally Template

This code allows you to add a background color behind the text of a Squarespace poster block, giving it an appearance like the block below. It also adds spacing around the text so it looks cleaner. See it live at sustainableproject.org.

Screen Shot 2018-04-30 at 9.12.35 PM.png

.sqs-block-image .design-layout-poster.image-block-outer-wrapper.image-block-v2 .image-card
{background-color: #fafafa;
padding: 8% 3% 3% 3%;
margin-top: 80px;}

 

Also pictured in this example:

Add a Horizontal Line Above the Title in An Image Poster Block

.sqs-block-image .design-layout-poster.image-block-outer-wrapper.image-block-v2 .image-title p:before
{content:""; 
background: #abbc5e; 
display: block; 
position: relative;
top: -25px;
left: 45%;
height: 2px; 
width: 10%;}