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:
Adding custom icons to the Accordion Block while keeping the arrow or plus sign (7.0, 7.1 CE & 7.1 FE)
Want to know how to add a custom icon to your accordion items while also keeping the chevron arrow or plus sign indicator? Then this tutorial is for you!
Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)
If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!
Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!
Add custom bullet points to text blocks and image blocks in Squarespace (7.0 & 7.1)
Want to create branded bullet points for your client’s site? Then take a look at this tutorial to learn how you can make that happen, only with CSS, for both text blocks and image blocks!
Labeling products on a shop page (7.0 & 7.1)
Have you ever wanted to highlight products on a shop page to visually indicate which are new, vegan, on-demand, or up for pre-order, etc? If so, then today’s tutorial is for you!
Adding an icon to the poster blocks' content area (7.0 & 7.1CE)
A few weeks ago, I got a question regarding customizing an image block in a way that a little logo or icon could be displayed alongside the title + subtitle + button content area, and so that’s precisely what we’ll be tackling today!
Adding an image to buttons in Squarespace (7.0 & 7.1)
Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!
Adding folder indicators to desktop links in Brine
Today’s CSS trick is short and sweet. If you’ve been wanting to add a little folder indicator/icon to your link folders on your desktop header, here’s a quick way to achieve it with a bit of code!
A CSS trick to add icons to your navigation links in Squarespace
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!