Welcome to post #5 in the Squarespace CSS series!

Who’s stoked to get their hands on some free Squarespace CSS for your site’s images and icons!? ‍♀️

Ok, so I don’t mean to put a damper on all the excitement, but I wouldn’t be a true Squarespace Educator if I didn’t raise a quick red flag…

If you remember from the first post in this series, “Squarespace CSS: what you need to know before you get started” custom coding (including CSS) is not *technically* supported.

Oh, Squarespace can do pretty much anything you force it to…but since all it takes is one missed comma or squiggly bracket to break the internet (just ask my assistant. Or maybe don’t…#toosoon) unfortunately Squarespace can’t offer any troubleshooting for designs created with the use of custom code.

So it’s best not welcome disaster by CSS’ing the socks off every design element on your site…

But it can be fun to break the rules from time to time! And I’ve rounded up 10 helpful tutorials to help you do just that!

Squarespace CSS for your site’s images & ICons

1. How to add a drop-shadow to social icons in Squarespace using CSS

Method of CSS injection used: Universal

Ps. Wondering what all this “method of CSS injection” business is about in each example? You might want to circle back around to Squarespace CSS: what you need to know before you get started.

As much as I’m Squarespace fangirl #1, I can and will admit that their built-in social icons are a bit boring.

This is one-hundo-percent on purpose, btw.

These tiny little logos have become pretty universally recognizable, meaning *almost* anyone who comes across them instantly knows exactly what they stand for and exactly what to expect when they click on it.

So while you can’t just go swapping out the logos to mega-famous platforms all willy nilly, there are a few tweaks and customizations you can do to spice up what you’re already working with!

Adding a colored drop-shadow to your social icons is a fun way to bring a little branding to this otherwise (intentionally) plain little corner of your site!

And Erica from Big Cat Creative is here to show you how to do it in this post!

Here’s a little demo of what that bit of CSS can do. Cute, right?



2. Adding custom social icons to Squarespace 7.1 using CSS

Method of CSS injection used: Universal

When you go to link up your business’s social accounts, most the common icons you need will automatically populate the moment you start typing their name.

BUT, what about those slightly lesser known platforms/apps that Squarespace doesn’t have a ready-made icon on hand for?

(Think: Esty, AirBnb, LikeToKnowIt, etc.)

If you try to linking to your account on a software that isn’t natively supported in Squarespace, the default icon that appears will be an image of link.

Not super exciting.

And also not very useful to site visitors.

Thankfully, Rebecca of Rebecca Grace Designs (*ahem* talented past student of my Square Secrets & Square Secrets Business courses) has got us covered with this tutorial, showing us how to import and use those lesser known icons!

P.S. It can also be used to swap out Squarespace’s generic built-in icons slightly more stylized, on-brand versions of the old standbys!

So while you can’t go changing the actual logo to the platform, custom branding is 100% welcome and encouraged.

Here’s a peek at what that could look like:



3. Overlap or layer multiple images in Squarespace using CSS

Method of CSS injection used: Universal

Squarespace is super user friendly in that you can literally just drag-and-drop your content side-by-side and pretty quickly and easily get a super clean, professional looking site.

But if you’re feeling a tad limited by the drag-and-drop feature, where everything has to sort of line up within Squarespace’s default “grid lines” or layout, there are plenty of ways to shake things up and achieve a completely custom look!

One way being to copy and paste a bits of CSS you find around the web, of course!

The lovely Becca of Inside The Square does a bang up job of explaining how to use CSS to layer multiple images this video!

Psst! Not interested in messing with custom code? My course Square Secrets teaches you how to break all the drag-and-drop rules and build a completely custom site (and photo layouts like this) without the use of code!



4. How to crop images into a circle on Squarespace using CSS

Method of CSS injection used: Universal

Circular images are perfect for bios and testimonials!

(A.K.A anytime you go to introduce yourself or someone else on your site!)

This super simple little CSS hack for creating circular images right in Squarespace comes to us compliments of Mary Phillip!

Here’s an example of how I use circular images on my Square Secrets course enrollment page to showcase kind words from past students!





5. How to add a border to the content side of your collage block in Squarespace using CSS

Method of CSS injection used: UNIVERSAL

Ok, so this one isn’t used to customize an image per se, but rather the contents of one of the handiest types of image blocks Squarespace has to offer: the image collage block!

Ever wonder how designers are able to get a border to appear around that bit of text that overlaps the image in the collage block?

Wonder no more!

CSS wizard Beatriz of Thirty Eight Visuals is bringing the simple CSS fix you need to make it happen on your own site!

Here’s a little preview of what’s possible!



6. Make image card full width on Squarespace using CSS

Method of CSS injection used: Universal

You may have noticed that when you use any of Squarespace’s pre-built blocks, that the content doesn’t quite reach wall to wall.

There is always a bit of a padding around your image block, because Squarespace knows how important “white space” is as a basic design principle.

Wall-to-wall content on every last inch of your site, with zero breathing room between design elements = major visual overwhelm for your visitor (making them less likely to take the next steps you are hoping they will on your site.)

It’s the fastest way to make your site look DIY (and not in a good way)…so in this case, less is definitely more.

But there are some cases where full-width page design could be used to make one specific section really stand out, like if you are using a card style image block to showcase your page’s main CTA (call-to-action: what it is you want your visitor to do on that page!)

You could use your site style settings to remove that extra white space or padding, but any changes you make there are site wide and will affect every bit of content you add.

To CSS away those margins on a single card image block, check out Ghost Plugin’s free CSS snippet here!

Here’s as a little mockup of a full-width image card block:



7. Add a drop-shadow to images in Squarespace using CSS

Method of CSS injection used: Universal

When you add a drop shadow to something, you are basically taking something that is 2D or flat and making it appear 3D.

It’s a fun way to get your images to sort of “leap” off that page, if you need help drawing the eye to a certain section of your site!

Carl Johnson dives into how to add drop-shadows to your Squarespace images in this video tutorial!

Still not sure what I mean when I say drop shadow? Here’s an image with and without!



8. How to add a text overlay or change image on hover in Squarespace using CSS

Method of CSS injection used: Universal & Inline

This fancy bit of CSS footwork comes to us from Jmediahouse.com and there’s honestly no end to how you could use it on your site!

(Just mouse over the two example images below and you’ll see what I mean!)

You could use these as:

  • fancy blog category thumbnails

  • to showcase a crazy-satisfying before and after

  • to peep different angles or aspects of your fav projects

  • to visually pique interest for your products or services

  • to throw in a tearjerking testimonial or two

…basically anything your little heart desires or your mind can dream up! So get creative!



9. Add a border to an image in Squarespace using CSS

Method of CSS injection used: Universal

Ok, so this one is pretty basic. You’re prob not going to find yourself picking your jaw up off the floor like you had to in the last example…

BUT don’t forget! CSS is a living, breathing language (not a bunch of separate ‘rules’ someone invented out of thin air!) which means this simple code snippet can easily be added to any other image CSS you find.

Kinda like adding on extra words to a sentence!

Remember in example #3 where Becca from Inside the Square had us overlapping images? Try adding a border too!

This allows you to test out different border widths and colors in realtime on your site (rather than making those changes in a graphic design program and exporting and re-uploading them).

So let’s hear it for W3schools for this simple, yet time-saving tutorial!



10. Create a blurred background image in Squarespace using CSS

Method of CSS injection used: Universal & Inline

Another gift straight from the CSS gods over at W3school! This tutorial def took a bit of head scratching since it isn’t exactly step-by-step, but the results are worth it, wouldn’t you say?


Pro-tip since it’s not super clear from their directory:

This snippet comes in two pieces.

  1. A little snippet of HTML (the language you use to write the actual content you’re styling into existence).

    This get’s added inline in a code block on the page where you want the content to live.

  2. The CSS you use to style it!

    This gets added universally in the CSS injector.

    (See Squarespace CSS: what you need to know before you get started if you are currently doing the deer in the headlights stare and have no idea what I’m talking about.)

You will need to edit a few basic things to make this work for your site/content:

  • What the text says

  • Your background image source URL

  • The color of the text

(You can feel free to mess with the things like image height, font spacing, etc. But the bolded bits below are where you want to focus to get started with this bit of CSS wizardry!)

The HMTL

<div class=”bg-image”></div>

<div class=”bg-text”>
<h1>I am John Doe</h1>
<p>And I’m a Photographer</p>
</div>

The CSS

body, html {
height: 100%;}

* {
box-sizing: border-box;}

.bg-image {
/* The image used */
background-image: url(“photographer.jpg“);

/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;}

/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;}

Wish you knew the secrets to customizing your site without having to learn to code?

My course Square Secrets was created just for you!

I’m teaching you everything you need to know to build a completely custom, nothing-like-the-template site (one that attracts & converts your ideal client 24/7) without ever having to learn to code!

I’m all for learning a new language (I’m a Canadian living in Germany, after all), but let’s get that site launched and earning you $$ in your sleep first, shall we?



/

/

You’ll also love . . .

Squarespace CSS: 10 free code snippets for customizing your site’s images & icons