The Codebase
Filter through all the code
Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Stack
Make the subtitle text of your Stack Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Adding a description (7.1) - Portfolio Page Grid Overlay
Get your hands on this code snippet to add a little description under the title of your Portfolio Page items, when set to the Grid: Overlay layout! Include any text you like, and modify, add or remove CSS properties from the code to style the color, font size, font family and any other font styles you want.
Adding a button (7.1) - Portfolio Page Grid Overlay
Add a button to your Portfolio Page slides with this quick code snippet. You’ll be able to modify the background color, font styles, border look and even hover mode, to make it match the rest of your design!
Styling the title font (7.0, 7.1 CE & 7.1 FE) - Summary Block Grid
Use this short code to style the title of the Grid Summary Blocks on your site! Change up the color, the font size, the font family and apply any other font styles you want by simply copy/pasting the snippet and adjusting the properties to your needs.
Styling the content area (even height) (7.0, 7.1 CE & 7.1 FE) - Summary Block Grid
Not a fan of unevenness? Me either. If you’re wanting to rectify the situation for the Grid Summary Blocks on your site and make sure the items match in height automatically, this handy little code snippet will help you achieve just that!
Styling the title font (7.0, 7.1 CE & 7.1 FE) - Summary Block Carousel
Use this short code to style the title of the Carousel Summary Block in a heartbeat! Switch up the color, the font size, the font family and apply any other font styles you want by simply copy/pasting the snippet and adjusting the properties to your needs.
Styling the excerpt text (7.0, 7.1 CE & 7.1 FE) - Summary Block Carousel
Want to change up the look of the excerpt text for Carousel Summary Blocks? Then look no further. This code snippet will allow you to style the font however you want by changing its color, size, weight and any other font property in just a few minutes!
Styling the 'Featured' header font (7.0, 7.1 CE & 7.1 FE) - Summary Block Carousel
With this copy/paste code snippet you’ll be able to set all the font styles you want for the Header text at the top of Carousel Summary Blocks, to ensure everything on your site matches your brand.
Styling the title font (7.0, 7.1 CE & 7.1 FE) - Summary Block List
With this short code you’ll be able to style the title of the List Summary Block in a heartbeat! Switch up the color, the font size, the font family and apply any other font styles you want by simply copy/pasting the snippet and adjusting the properties to your needs.
Styling the excerpt text (7.0, 7.1 CE & 7.1 FE) - Summary Block List
Need to change up the look of the excerpt text for List Summary Blocks? Then look no further. This code snippet will allow you to style the font however you want by changing its color, size, weight and any other font property in just a few minutes!
Styling the title font (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
With this short code you’ll be able to style the title of the Wall Summary Block in a heartbeat! Switch up the color, the font size, the font family and apply any other font styles you want by simply copy/pasting the snippet and adjusting the properties to your needs.
Styling the excerpt text (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Need to change up the look of the excerpt text for Wall Summary Blocks? Then look no further. This code snippet will allow you to style the font however you want by changing its color, size, weight and any other font property in just a few minutes!
Styling the content area (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Need to style the content area of your Wall Summary Block? Then snag this code snippet to help you out! You’ll be able to give it a background color, set up a border, or apply any other style you want to those specific parts of your summary items.
Add multi-line descriptions to any Gallery Section in Squarespace (7.1)
In today’s post, I want to show you a super easy workaround to display a title AND a short description in your 7.1 Gallery Section captions! This little trick works for all of the different Gallery Section layouts, but we’ll be breaking down the logic behind the tweak for the Slideshow: Reel layout.
Adding a fun twist to poster blocks (7.0 & 7.1 CE)
Recently, I was testing a couple of customizations in 7.1 and ended up with a pretty cool one that I’d like to share with you today!
Adding an image behind a heading in Squarespace (7.0, 7.1 CE & 7.1 FE)
For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!
Adding an overlapping tilted text to an image (7.0 & 7.1 CE)
You’ve probably seen inspirational websites on Pinterest *cough* Showit sites *cough* that include images with overlapping titles or phrases, that look slightly tilted. In Squarespace, you can absolutely achieve that look by simply adding the text to the image itself, but let’s see if we can achieve it without relying on Photoshop…
Adding an extra title and overlapping the button of an overlap image block (7.0 & 7.1 CE)
If you’re into overlapping stuff in your client sites, I know you’re going to really enjoy today’s fun tutorial. It’s all about taking the overlap image block design one step further, with very little code, to create a look I’m 90% sure you’ve seen before while perusing Pinterest: an image with an overlapping title, a secondary title, text and an overlapping button.
Add a gradient in Squarespace to only one word in your heading (7.0, 7.1 CE & 7.1 FE)
Let’s give a gradient to a single word in your heading! The method is pretty simple, however we have to tackle some compatibility issues to make sure the word is readable in as many browsers as possible. So, why don’t we get started?
Creating vertical text in Squarespace (7.0, 7.1 CE & 7.1 FE)
Oh I know you wanna jump in the vertical text wagon. In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.