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.
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!
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?
Adding a background color to summary excerpts (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be looking at how to add a background color to those Summary Blocks with summary excerpts you have hanging around your site… AND how to make sure the colored portions have THE SAME HEIGHT. Oooh, intriguing right?
Floating vertical social media links in Squarespace (Brine 7.0)
You’re probably familiar with social share links widgets that you can add to your site through a third-party so people can share your content. However, if what you’re wanting to do is have Squarespace’s social icons from the nav bar – linking to your…
Change the color of your loading screen background (Brine 7.0)
You know when you’re loading your site and you see a flashing or fade-in background color before the content on your page fully loads? This may not be happening on all of your pages – or even if you’re using a template outside the Brine family – but…
How to create an overlapping logo in Brine (7.0)
Either because your logo is quite tall or simply because you want to make your header look different, you want to make your logo appear half on the navigation bar and half over your banner image/page. Cool, let’s do it then!
Make your hero banner and text look good on any device (Brine 7.0)
You’re using a gorgeous background image for your banner, and you have the perfect catchy headline to go on top of it. You start by using spacers, trying to find the perfect placement for your lovely headline on top of the image, in a way that looks 100% readable…
Custom testimonial carousel arrows with Summary Block (7.0, 7.1 CE & 7.1 FE)
So you’re using a Summary Block in your Squarespace site as a testimonial carousel, but you want a way to make it look less like… you’re using the Summary Block in Squarespace as a testimonial carousel, lol.
Create vertical lines in Squarespace (7.0, 7.1 CE & 7.1 FE)
Today’s tutorial will be quick an painless, and it will help you create those nice vertical lines you keep seeing everywhere that can be used to guide the eye further down the page, or simply as decoration!
Creating half, angled and floating effect backgrounds in Brine (7.0)
If you’re using one of Brine templates, or pretty much any other template in Squarespace, you’re most likely wanting to make the best out of their banner sections. These can be used in many creative ways to add an extra touch of “huh… I wonder how they did that?“ …
Turning the Gallery Block title into a colorful label (7.0, 7.1 CE & 7.1 FE)
If you’re using a Gallery Block as category thumbnails for your blog, to redirect to your different service packages, or anything else that works best with an identifying label, you’re gonna love today’s customization! We’ll be turning the Gallery Block slide titles…
Creating a simple overlay for your Summary Blocks (7.0, 7.1 CE & 7.1 FE)
Want to see and learn how to do a reaaaaaally cool Squarespace customization? Then you’re in the right place my friend because today we’ll be going through how you can create or add a nice overlay to your summary block thumbnails!
Creating a boxed-in footer in Squarespace (Brine 7.0)
Let’s face it, the footer is the part of our Squarespace design we think about last when it comes to adding customizations. However, that doesn’t mean we can’t show it some love and have it help our site look more custom by giving it a non-default style!
“Podcastifying” Squarespace’s Summary Block (7.0, 7.1 CE & 7.1 FE)
Podcasts are pretty much THE THING right now. So, if you or your client has a podcast that wants to promote on their site, what better way to do that than customizing one of Squarespace’s block to neatly display them?
Meet Ghost: your new resource for free Squarespace plugins (7.0 & 7.1)
Ghost is a digital marketplace for designers to download plugins and code specifically for the Squarespace platform, and I invited Cody – the brains behind the project – to answer a few of the questions that I’m sure popped into your head when reading…
Add custom social icons to your Squarespace header (Brine 7.0)
If you’re doing a custom design, you may be wanting to go all in with things like colors, fonts, patterns and icons. So, if you want to include those gorgeous social media icons you – or your graphic designer –created, keep reading my friend because we’ll be…
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.
Expanding the Instagram Block to full width (Brine 7.0)
One of the easiest way to customize any Squarespace site is to expand its blocks to the full width of your design to contrast with the content that has some spacing on the sides. In today’s post we’ll be looking at how to do that with the Instagram block.