The Codebase
Browse all Resources!
Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.
How to add a custom font to your navigation menu items (Brine 7.0)
You may already be using a custom font for headings across your client’s site. But, you’re not sure how to add it to your nav items for both your regular navigation AND your mobile menu. Let’s see how that can be done, shall we?
Full height testimonial carousel | SBC2 (7.0, 7.1 CE & 7.1 FE)
The code from this mini-course will change the layout of the summary block carousel, so you can create a beautiful full-height thumbnail accompanying the corresponding kind words, as well as allowing you to change up the arrows’ default position and color, to make the whole block completely customized to your project.
How to create a multi-column text block in Squarespace, without using separate blocks (7.0, 7.1 CE & 7.1 FE)
This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.
Custom Squarespace templates: a tour behind the scenes (7.0 & 7.1)
Wondering what it would be like to use a custom Squarespace template created by a third-party? Not sure if using one of these templates could work for your client projects? Take a look at this tour behind the scenes of one of Ghost Plugin templates to see what it’s all about!
Creating a bold Index Gallery slideshow (Brine 7.0)
In a previous tutorial we saw how we can customize the Index Gallery slideshow in Squarespace to add fancy new arrows and subtly switching up the layout of the description portion. In today’s tutorial, we’re going to take a similar approach…
How to target entire blog pages vs individual blog posts (7.0 & 7.1)
If you’re using blog pages on your client site for different purposes, you may want to be able to customize the content (posts) of just ONE of those blog pages and not the other. A very common situation is when you have a blog page as an actual blog, and another blog page as a portfolio to showcase previous work.
Top headshot testimonial carousel | SBC4 (7.0, 7.1 CE & 7.1 FE)
With this mini-course you’ll be able to create a very stylish look for the carousel slides with an overlapping headshot and sleek pagers, by having full control over their position and style.
Adding a hover effect to summary and gallery blocks in Squarespace (7.0, 7.1 CE & 7.1 FE)
Today we’re going to break down a FANTASTIC way to wow your visitors and your clients by adding a “lifting” effect to the items in your Summary Block and Gallery Block.
Add a floating 'Book Now' button to Squarespace (7.0 & 7.1)
If you’re running or working on a business website, you’ll surely find today’s customization pretty handy! Besides back to top buttons, an extra menu header, and a custom social icons header, there are other types of floating elements you can add to your…
Grayscale to color hover mode for image blocks (7.0 & 7.1 CE & 7.1 FE)
Adding a hover effect to image blocks can be a fun way to spice up your client’s design without too much hassle. So today, we’re going to be looking at how we can give a really cool grayscale to color + rotating + scaling effect to any images of your site on hover!
Create a "boxed-in" header in Squarespace (Brine 7.0)
It seems like there’s not enough creativity in the world to come up with a unique way to set up your nav bar… especially in Squarespace, and particularly if you’re using the Brine template. Which seems silly, since all of the templates from the Brine…
Overlapping a block between 2 index sections (Brine 7.0)
If you’re working with indexes in Squarespace, you may be wondering how the heck to make your blocks float between two of the sections. If that’s you, stick around ‘cause that’s exactly what we’ll be doing today!
How to customize and always show the hamburger menu in Brine (7.0)
In today’s tutorial, we’ll be looking at how you can force the hamburger menu in your Brine template to always show up, and how to change the default icons to anything you want. Let’s do this!
Easily create a split layout in Squarespace (Brine 7.0)
You’ve probably come across those Pinterest inspirational websites that involve gorgeous split layouts where you have half of your screen with an image that bleeds all the way to the edge of your website, and the other half with a colored background and content…
Customize Squarespace forms (7.0, 7.1 CE & 7.1 FE)
If you’re using Squarespace forms on your site – instead of or along with other information collection methods like Dubsado – then today’s tutorial is for you! Because if you’re looking to make your site more on-brand or unique, customizing your Squarespace forms…
Creating big category thumbnails with a rollover effect (Brine 7.0)
Today we’re going to be taking advantage of the grid layout of an Index Gallery to create big and bold category thumbnails that you can use to showcase your different service packages, blog categories, photo galleries, or pretty much anything else you want!
Add custom 'Read More' links to your Summary Blocks (7.0, 7.1 CE & 7.1 FE)
Have you ever wished you could replace the ‘Read More‘ link from your Summary Blocks for something else? Not just change its color and turn it into a button, but actually change what it says and… why not, change it for a custom image?!
A CSS trick to add icons to your navigation links in Squarespace (Brine 7.0)
Have you ever wanted to add something “extra” to your navigation links or menu items in Squarespace? Something like icons to identify each of the different pages your navigation leads to? Well my friend, today you’re going to learn precisely how to do that!
Customizing the index gallery slideshow in Squarespace (Brine 7.0)
Templates like Brine allow us to add big and bold imagery through its Index Gallery pages. Fortunately, Squarespace gives us a couple of different options to style them through the Style Editor however, and depending on the design you’re after, this may not be enough.
How to create a simple fade in animation (7.0 & 7.1)
You know when you load your Squarespace site and you can see some of the blocks rearranging their content for a few seconds before everything snaps into place? (e.g the carousel block). Well, we’re going to be adding a super simple fade in animation to make it load nicer!