How to make your Squarespace author bio look better with custom CSS

blog

Sep 23

If you're using the author bio feature in Squarespace, you might’ve noticed it’s a little... boring. We don’t have a lot of options to edit the style inside the editor, but we can make some pretty cool changes using custom CSS. In this tutorial, you’ll learn how to use simple code to customize the look of your author bio - from background colors to box shadows and even a hover effect for a DIY button we’ll create togheter.

All the codes you need are under this video, ready to copy, paste, and customize! If you’re new to CSS be sure to watch the tutorial video first so you'll know exactly what parts of the code you’ll need to change.

Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.

Customize the Author Bio Background

This first snippet adds a solid background color to the entire author bio section on your blog post. By default, this area is transparent and can feel a little lost at the bottom of the page. With just a bit of CSS, we can make it feel more like part of your design.

You can adjust the background color, add padding so the content doesn’t feel cramped, and even round the corners or lift it off the page slightly with a box shadow. Totally optional, totally customizable, just the way I like it 😉

💡 Pro tip: Use padding to create space inside the box and border-radius to round the corners for a softer look.

/* author bio background */
.blog-item-author-profile-wrapper{
  background:#e5f5f6;
  padding:16px;
  border-radius: 8px
}

Customize the Author Name Style

Next up: the author’s name! This text usually shares the same font size and style as the bio paragraph, which means it doesn’t really pop off the page. And let’s be real here, you’re the author, you deserve a little flair! 🕺

This code lets you increase the font size, change the weight or color, or even apply a different font family if you want it to have its own look. Just make sure to include !important after the values; that’s what tells the browser to override the default style.

/* author bio name */
.author-name {
  font-size:24px!important;
  color:purple!important
}

Turn the Author Link into a Button

If you’ve added a link to your author bio text (like “Connect with me on LinkedIn”), this code will turn that basic text link into a proper button. You can style the background, add padding, give it a border, and even create a hover effect.

This one’s my favorite part of the tutorial—it adds a little interactive element and encourages readers to actually click the link.

💡 Pro tip: Keep your link text short and sweet so it doesn’t break onto two lines on mobile!

/* author bio link button */
.author-bio a{
  background:#fff;
  padding: 5px;
  border:1px solid #333
}
.author-bio a:hover{
  background:#333;
  color:#FFF
}

And there you have it, Squarespacer 🙌 A few simple snippets of CSS to give your author bio section a totally custom look that actually matches your site style.

Whether you just wanted a soft background or went all in with button links and fancy fonts, these customizations are a great way to make your blog feel more personal and professional. You deserve to show off your name in style and I hope this tutorial helped! If you have any questions, let me know in the comments below, and most importantly, have fun with your website 💛

blogtext