Squarespace CSS tricks
The Blog
Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!
And if you can’t find what you’re looking for:
Creating a bold Index Gallery slideshow
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…
Adding a hover effect to summary and gallery blocks in Squarespace
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
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…
Create a "boxed-in" header in Squarespace
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…
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
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
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?!
Customizing the index gallery slideshow in Squarespace
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.
Adding a background color to summary excerpts
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
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…
How to create an overlapping logo in Brine
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!
Custom testimonial carousel arrows with Summary Block
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
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
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
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
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
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
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?
Add custom social icons to your Squarespace header
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
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.