Kmcgrath Posted May 28, 2020 Share Posted May 28, 2020 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{ color:#3b5ed8!important; background:#ced7f5!important; } But can't figure out how to target that pesky comma! (site is under NDA, cannot link to) Link to comment
ChrisBartow Posted May 29, 2020 Share Posted May 29, 2020 (edited) 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. <script> window.onload = function(){ var tags = document.getElementsByClassName('summary-metadata-item--tags'); for(i=0;i<tags.length;i++) tags[i].innerHTML = tags[i].innerHTML.replace(/\,/g,''); } </script> Edited May 29, 2020 by ChrisBartow dnmddy 1 Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
Kmcgrath Posted May 29, 2020 Author Share Posted May 29, 2020 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. Link to comment
ChrisBartow Posted May 29, 2020 Share Posted May 29, 2020 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
Kmcgrath Posted May 29, 2020 Author Share Posted May 29, 2020 Interesting, thanks! I had been envisioning something like make the comma opacity 0, but this is cooler! Link to comment
Ten17 Posted June 12, 2020 Share Posted June 12, 2020 Thanks this worked for me removing the comma from Blog Post MetaData Categories! Just had to replace the Element Class Name! Link to comment
theresa.southern Posted July 8, 2020 Share Posted July 8, 2020 Exactly what would I put to REPLACE the comma with a pipe? Link to comment
watts-creative Posted December 16, 2020 Share Posted December 16, 2020 I needed to hide the comma between tags in a summary block and found this CSS code online, which worked great for me. .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--tags { font-size: 0; } Link to comment
ALHAUS Posted April 30, 2021 Share Posted April 30, 2021 Quick and simple workaround: .summary-metadata-item--cats { color:transparent; } Link to comment
Max_Sheridan Posted August 13, 2021 Share Posted August 13, 2021 (edited) 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 August 13, 2021 by concreteflamingo nathanchien 1 Max Sheridan Copywriterstorylinecreatives.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment