Jump to content

Hiding comma between tags on a blog summary

Recommended Posts

How do I target/hide/remove the "," between tags on a grid summary block in 7.1? I've successfully edited the tags themselves with 

.summary-metadata-item--tags a{

But can't figure out how to target that pesky comma!

(site is under NDA, cannot link to)

Link to comment

This feels wrong to do, but this javascript should remove it.  Add it to your code injection under settings -> advanced for the page you want to change.

window.onload = function(){
  var tags = document.getElementsByClassName('summary-metadata-item--tags');
    tags[i].innerHTML = tags[i].innerHTML.replace(/\,/g,'');


Edited by ChrisBartow

Creating websites using Squarespace at Design by Donuts 🍩

Link to comment
6 hours ago, Kmcgrath said:

That achieves the desired result, thanks!

Is there no way to do it with just CSS? I don't know javascript at all so I don't understand what that script actually does.

There isn't. CSS allows you to only do some basic text manipulation, typically adding things before or after.

The script does the following:

  • Waits for the document to load.
  • Searches for all the elements that have the class 'summary-metadata-item--tags'.
  • Loops through each of these elements
  • Replaces every occurrence of a comma (,) with an empty string ('') in the element.

It's not really an elegant solution, but since you can't change the underlying HTML, it's the only solution at the moment.

Creating websites using Squarespace at Design by Donuts 🍩

Link to comment
  • 2 weeks later...
  • 4 weeks later...
  • 5 months later...
  • 4 months later...
  • 3 months later...

I'm not sure you need javascript here. And I'm not sure why making your cats transparent helps, @ALHAUS. (You're just making your cats disappear, not the comma.) You can actually target the non-linked text, i.e. the comma, in that span with this CSS. The second bit is just making sure your cat doesn't disappear. You just need to fill in your initial color there. Mine is #00bac0.

.summary-metadata-item:not(a) {
color: transparent !important;

.summary-metadata-item a {
color: #00bac0 !important;


Edited by concreteflamingo

Max Sheridan

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.