How to target entire blog pages vs individual blog posts
If you’re using blog pages on your client site for different purposes, you may want to be able to customize the content (posts) of just ONE of those blog pages and not the other.
A very common situation is when you have a blog page as an actual blog, and another blog page as a portfolio to showcase previous work.
You may want to remove the comment area or the share icons of just the portfolio page, but still keep them on the blog page.
If that’s the case, you can’t simply disable those elements through the Style Editor because the changes will be applied to ALL blog pages. And even when you can disable comments individually inside each post, you may not want to spend time doing or remembering to do that.
Plus, if you want to tweak something else besides these two elements then you’ll definitely need to isolate one page from the other to alter only the one you’re after.
Making changes to individual blog posts
By now, you may know that there’s a way to target specific pages on your Squarespace site through their page ID.
But here’s the thing with blog pages: both the “main” blog page, where you see the excerpts, and its corresponding post pages have IDs, and they are all different.
Of course that’s the point of IDs, being unique. But in this particular case, it’s a disadvantage for us. If we were to use IDs here, we would be targeting only one very specific page inside that blog, not the whole group of posts.
If that’s what you’re looking to do, that’s awesome!
But if you want to know how to change things for ALL posts inside the same blog page, we have to take a different approach.
Let’s see an example, shall we?
On this site we have 2 blog pages: one for a regular blog, one for a portfolio page.
Now, let’s say we want to get rid of the comment area of ALL the posts inside the portfolio page, but keep them on the blog page posts.
Let’s search for the portfolio main page ID and use it to see what happens.
Ok, our ID for this page is #collection-5d2dc646d23ba4000176e0ab.
We’ll use that to target our entire portfolio page.
#collection-5d2dc646d23ba4000176e0ab {
}Next, we have to find out what our comment section is called, in order to make it disappear.
I’ll hop into any of the posts to check out the class name via inspect element:
Alright, we have a class of .BlogItem-comments, so let’s use it:
#collection-5d2dc646d23ba4000176e0ab .BlogItem-comments { }
And, let’s simply set this to display: none to hide it from view along with the space it occupies:
#collection-5d2dc646d23ba4000176e0ab .BlogItem-comments { display: none; }
Nothing seems to happen.
We can try !important just to check…
Nope, nothing.
Since we’re using the ID that’s unique to the “main” portfolio page, it makes sense that the CSS isn’t affecting the individual posts.
So, why don’t we check for the ID of one of the individual posts and use that instead?
Alright so, the ID for our post is #item-5d2dc652d23ba4000176ee00.
Not only the number is totally different, but this ID begins with the prefix item- while the one for the main portfolio page began with collection-.
Note: that’s standard for all Squarespace blog pages.
Let’s head back to our previous code and substitute the main portfolio page ID for this one for the individual post:
#item-5d2dc652d23ba4000176ee00 .BlogItem-comments { display: none; }
Awesome, that works!
But let’s check the other post in this portfolio page really quickly…
Yep, the comment section is still showing up on this one.
Like we discussed before, each individual blog post has its own unique ID.
Take a look at the one from this post:
It’s #item-5d2dc76609a1dc0001accea6
It starts with item- because it’s still an individual post from the entire portfolio page, but the string is different from the previous post.
This means we have 2 options:
We can look for the page ID of each individual portfolio post and group them inside one same selector to apply the same changes, like so:
#item-5d2dc652d23ba4000176ee00 .BlogItem-comments, #item-5d2dc76609a1dc0001accea6 .BlogItem-comments { display: none; }
Or, we can find a much quicker way to make sure ALL posts inside our portfolio are being selected, without having to do it for every single one.
I don’t know about you, but I don’t have the time (or patience) to look for the ID of each post and add it to the code.
Making changes to all posts inside one blog page
Going back to one of our individual portfolio posts, if we look inside the body tag, not for the ID but for the classes, we’ll come across a class that starts with the prefix collection-
This class is called .collection-5d2dc646d23ba4000176e0ab.
If we take a look at the classes of our second post from this same portfolio page…
We’ll notice the same class (.collection-5d2dc646d23ba4000176e0ab) is there too.
And if the string looks familiar, that’s because is the exact same one used as an ID (#collection-5d2dc646d23ba4000176e0ab) for the “main” portfolio page:
Which, btw, also shares the same class as its posts:
This is what’s connecting all of the posts of our portfolio with the portfolio page itself!
This is what we can use whenever we want to make changes to ALL blog posts inside a single blog page! It will affect all of the individual posts inside it, as well as the “main” page if the same element is found there.
So, let’s test it, shall we?
Using our code from before, we’ll substitute the ID from the individual post for the class that rules them all:
.collection-5d2dc646d23ba4000176e0ab .BlogItem-comments { display: none; }
Perfect! No comment section on post #1 of our portfolio!
No comment section on post #2 either, and…
It’s still shows up on our regular blog!
Perfect.
So, now you know!
You can use an ID to target the “main” page of your blog (or portfolio), an individual blog post inside that blog, or a mix of both if you group them together!
You can use the collection CLASS of your blog page to target ALL posts (and the main page) for just ONE blog/portfolio page on your site.
Until next time,
B.
