How to Edit a Blog Footer on SquareSpace

Yes, I AM a nerd. SquareSpace is the web hosting/development platform via which ThatChuckWilliams.com comes to life. Gives you tingles, I can tell.

Why SquareSpace and not the ubiquitous WordPress? Well, as a nerd, I’m willing to dive down a rabbit hole to do something, but there are limits. And, with soooo many options and packages and add-ons, the WordPress rabbit hole was too much for me.

The advantage of SquareSpace is 26 templates, each of which can be customized endlessly, built in blogging, galleries, commerce, etc. If you know a little bit about web design - I do - you can be up and running within a couple of hours (if you’re willing to stay with a standard template), and a couple of days if you’re willing to customize those templates using SquareSpace’s fantastic block designs.

But, if you’re a bit of a geek, you soon find some things that you’d like to change, but can’t. Hence, CSS, cascading style sheets. I know HTML, but didn’t know CSS. So if you want to tweak your SquareSpace web site, you need to learn some CSS.

With that as introduction of you muggles, the rest of this post explains, How to Edit a Blogpost Footer on SquareSpace. Let the tingling begin…


The Problem

On this Web site, www.ThatChuckWilliams.com, I wanted to edit the blog entry footer (not the page footer) in the SquareSpace “Five” template. There was too much space between blog entries. SquareSpace is really into big, expansive white space - great for graphic-intensive web sites, but blogs, not so much.

Also, what looks like a line (I’d have called it a horizontal rule in HTML, but SquareSpace called it a border) appeared to go with the next blog entry heading. Instead, I wanted that line to clearly delineate the end of the current blog post, so as not to confuse readers.


The Solution

I figured out how to do this. Yes, I’m patting my own shoulder for accomplishing this, but when you haven’t done anything with web sites for 20 years, it’s fun to solve a halfway complicated problem (Web designers could do this in their sleep, but, I’m not one).

Learn CSS for Squarespace
By Jonathan Gennick

I wouldn't have been able to without this book, Learn CSS for SquareSpace by Jonathan Gennick, www.gennick.com, which explains how to use the "inspector" on your browser (this was easier for some reason on Firefox than on Safari) to visually highlight the area you want to change (for example, the horizontal rule). I already knew HTML from making sites and doing HTML coding with text editors 20 years ago. So, I wasn't starting from scratch, but, then again, I haven't touched HTML in 2 decades. So, I understood the concepts, which helps tremendously, but didn't know how to put this stuff into practice with SquareSpace. And, I don't know CSS.

So, buy Learn CSS for SquareSpace! I can't recommend it highly enough. It will empower you to tweak your SquareSpace site with some relatively easy CSS changes.

  1. Activate inspector in Firefox after bringing up your page.
  2. Across the top of the inspector, which will take the bottom third of your browser, you'll see a tiny square with an arrow pointing to the middle of it along the right side. Click that.
  3. Then point your mouse on the page. You'll see various parts of the page highlighted. Click on exactly what you're trying to change. It may take a few tries.
  4. Right below that box with the arrow should be a small window showing "Rules," "Computed," "Fonts," and "Box Model." Be sure you've selected "Rules."
  5. In "Rules," scroll down and you'll see various attributes, some with checkboxes. Uncheck some of the checkboxes, one at a time, to see what changes occur. After you uncheck something, put the check back and look at other attributes. Do one at a time.
  6. When you find what you want, copy that into the CSS box for SquaresSpace. What I like about Firefox is that the element is coded exactly how you should code it in the Custom CSS box on SquareSpace. This makes it easier if you're new to CSS like I am. So, what worked? I added a horizontal rule (i.e., border) at the top of each blog article or entry, instead of the bottom (setting the margin to zero makes it disappear in article .post .article-meta). I've also adjusted the padding and margins so they became smaller. See below for the CSS that did the trick.

article header { border-top: 1px solid #766B6B; padding-top: 20px; margin-bottom: 15px; }

article .post .article-meta { margin-top: 1px; padding-top: 10px; border-top: 0px solid #766B6B; }

Hopefully this will work for you.

My next project is to move the source, categories, likes, and share "stuff" from the blog article/entry footer to right below the blog header (meaning next to the date and the byline underneath the blog entry). I’m struggling with this one, so if anybody has any ideas. Let me know.