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.

All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo

Styling the read more link (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall

Ah yes, the “Read More” links. If you’re looking to change the ones inside your Wall Summary Block and turn them into a button, this snippet is for you! Just copy/paste the code and you’ll be able to alter the colors, border, border-radius and anything else you want to make them as prominent as you need them to be!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo

Styling the primary metadata (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall

Want to add some life to the categories, tags, author or any other primary metadata you have showing up in your existing Wall Summary Block? Then grab this snippet to help you target that text and set up your own color, font family, font size or anything else you want!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Borders and shadows Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Borders and shadows Beatriz Caraballo

Styling the thumbnail (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall

Looking to style the thumbnail of Wall Summary Blocks on your Squarespace site? Then look no further! This code snippet will allow you to target that specific area of your summary items so you can apply a border, a drop shadow, round the corners, or implement any other style you need to match your site’s design.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Hover/overlay Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Hover/overlay Beatriz Caraballo

One-way sliding underline on hover for button blocks (7.0, 7.1 CE & 7.1 FE)

We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today! The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect. The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time. So, let’s get started!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Color change Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Color change Beatriz Caraballo

Changing the placeholder text color of form and newsletter blocks (7.0, 7.1 CE & 7.1 FE)

A few members inside the Club recently asked about how the placeholder text color of form and newsletter blocks could be altered via CSS so, in case you’ve been wondering the same thing, today I wanted to share with you how to achieve that for your own client projects!

Read More
Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE Beatriz Caraballo

How to adjust your page/index section height on mobile (7.0 & 7.1 CE)

If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…

Read More
All CSS tricks, Fonts, Cool look, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo All CSS tricks, Fonts, Cool look, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Turning a header into outline text in Squarespace (7.0, 7.1 cE & 7.1 FE)

Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!

Read More
All CSS tricks, Fonts, Background, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Background, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo

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!

Read More