Jump to content

Change separating delimiter in blog post to comma

Go to solution Solved by creedon,

Recommended Posts

Posted

Hi all,

I'm laying out a client site and am using the blog as a Portfolio.  On the top right of each blog page, I'm using the categories as a way to display the location of the projects listed inside this portfolio. 

The problem I'm having is that, on the root blog page, the separating delimiter is a comma, which is great.  For example, I am listing the locations as something like, "Bucktown, Chicago", so I have two categories listed here: "Bucktown" and "Chicago" and it displays it perfectly.

In the actual blog page, though, you don't have the option of a comma as a separating delimiter and you can only pick from a bullet, space, etc. So, it's now displaying as "Bucktown • Chicago"

Does anyone know some easy code to have this display the comma as it does on the root blog page instead of a bullet or a space?  

As always, any help would be appreciated.  I've tried to edit other code I've found on the Forum to no avail and am a little frustrated that Squarespace doesn't have this as a natural option.

Website: https://pumpkin-orange-3ld6.squarespace.com/portfolio/blog-post-title-one-2g2bd-5723b-4hfd4
Password: Real2023

Thank you!

  • Solution
Posted

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  .blog-item-wrapper .blog-item-category-wrapper:not( :last-child )::after {
  
    padding : 0;
    
    }
    
  .tweak-blog-item-delimiter-bullet .blog-item-wrapper .blog-item-category-wrapper:not( :last-child )::after {
  
    content : ', ';
    
    }
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 10 months later...
Posted

Hi @creedon, I tried to use this fix as well but it didn't work - is there an updated version if it would've been influenced by any squarespace updates in the last few months?

Many thanks,

Daniel

Posted
2 hours ago, DoppyG said:

I tried to use this fix as well but it didn't work

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
On 6/12/2024 at 8:47 AM, DoppyG said:

I tried to use this fix as well but it didn't work

It didn't work as you have different settings for your Blog page so we need different CSS.

<style>

  .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--container .blog-meta-section span > *::after {
  
    content : ',';
    
    }
    
  .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--container .blog-meta-section span:last-child > *::after {
  
    content : unset;
    
    }
    
  .tweak-blog-basic-grid-delimiter-bullet .blog-basic-grid .blog-meta-delimiter::after {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted (edited)
On 6/12/2024 at 11:03 PM, DoppyG said:

the secondary metadata (here author name) doesn't have the same transition time as the rest of the items. Do you have a suggestion for adjusting that?

What is happening here is that Squarespace hasn't added a data-animation-role attribute to the author element and so it doesn't get animated like the date element.

Because SS is driving the animations in part with some JavaScript that reads the attribute and then does stuff, some CSS isn't going to do the job. We need some JavaScript to add the attribute to the author element so SS can do it's animation thing.

Please see Element Animate.

Let me know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 5 months later...
Posted

I would actually need that the other way round.
i kind of like the bullet, but on the overview even if i choose a different delimiter it still stays the comma, which looks weird in the overview.

and normally you can choose the delimiter on overview, but its not changing.

Bildschirmfoto2024-11-21um10_29_33.png.6ce0cca880732a901f5bb2fe4acecaa4.pngoverview

Bildschirmfoto2024-11-21um10_30_54.png.7db7f2a595dc0dd7032f013e0bde6a6a.png single post

and if you happen to know a solution to make it both something like this // or that |

i m happy to know it as well. but this freaks me out.
Since its supposed to be changeable.

THANK YOU!!

Posted (edited)

Hi @creedon,

I used the code above to get my code blocks (I have a back to top button at the bottom of some pages) and social icons to work with the site-wide animation. It works great when viewing in Squarespace. However, it is not working on the published site. Any ideas? 

Thanks!

 

Edited by YvonneB23
Posted
On 11/26/2024 at 10:49 AM, YvonneB23 said:

I used the code above to get my code blocks (I have a back to top button at the bottom of some pages) and social icons to work with the site-wide animation. It works great when viewing in Squarespace. However, it is not working on the published site. Any ideas?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.