Styling Your Testimonials On Squarespace

Expanding upon my previous post on how to add rotating testimonials in Squarespace, today I'm showing you some simple ways to style your awesome conversion-worthy testimonials. Get your Chrome Inspector ready...   

So now that we have our testimonials all neatly organized in a blog, we are going to explore some styling options to give it a little dash of your brand.  AND....we are going to use pure CSS. Look ma, no Photoshop! 


Demo 1

Diagonals are still 'in', right?  This two-toned, diagonal background is done via a CSS gradient AND it's responsive (go ahead, resize your browser).   

CSS:

#your-block-yui-id-goes-here {background:linear-gradient(to right bottom, #a5919d 50%, #d2a7a5 50%)}

Demo 2

We can also play around with the styling of the pagination arrows.  And on a side note, all these demo's I'm showing you can be used anywhere you can insert a block.  

CSS:

#your-block-yui-id-goes-here .sqs-gallery-design-carousel .sqs-gallery-controls .next:before, #your-block-yui-id-goes-here .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {padding:10px;background:#fff;border-radius:50%;border:solid 2px #a5919d;}

#your-block-yui-id-goes-here .summary-carousel-pager {
position:absolute;
bottom: -34px;
left: calc(50% - 55px);
width:100px;
}

Demo 3

You can also do an 'offset box' style with a fun CSS box-shadow trick.

 

 

 

CSS:

#your-block-yui-id-goes-here {background: rgb(210, 167, 165);-webkit-box-shadow: -22px -22px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -22px -22px 0px 0px rgba(0,0,0,0.75);
box-shadow: -22px -22px 0px 0px rgba(0,0,0,0.75);}

Hope this has been helpful in your Squarespace and/or CSS adventures.  If you have any questions, you know where to reach me!