Jump to content

Inset Numbering of items in a summary block

Go to solution Solved by creedon,

Recommended Posts

Is there a way to insert numbering of summary block items, for example if I wanted to use a summary block to great a 'listicle' article of 'The top 10 of X'?

So as an example, https://www.blog.baligram.me/blog/best-day-trips-south-bali is a summary block of day trips in a region and it would be nice to have each Title of each item numbered.

Thanks in advance if anyone can let me if not possible or how it might be done?

Cheers Simon

Link to comment
  • Solution

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

<style>

  .sqs-block-summary-v2 {
  
    counter-reset : css-counter 0;
    list-style-type : none;
    
    }
    
  .sqs-block-summary-v2 .summary-item {
  
    counter-increment : css-counter 1;
    
    }
    
  .sqs-block-summary-v2 .summary-title::before {
  
    content : counter( css-counter ) '. ';
    
    }
    
  </style>

Let us 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.

Link to comment

Hey @creedon Mate - thank you so much for this!

Turns out, for a blog post, I can only use the code blog-wide (all posts) .....not per post.

I think that might be okay for me......but for my learning is there any way around this, do you happen to know? I am guessing not, but thought I would ask!

Cheers Simon

Edited by simon.stjohn
Link to comment
Quote

 

.....not per post.

I think that might be okay for me......but for my learning is there any way around this, do you happen to know?

 

This can be done. There are several ways you could accomplish a per post effect.

The least long term effort method would be to use the following.

Then once you pick a tag to use we can update the CSS with new selectors.

.my-tag-here .sqs-block-summary-v2

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.

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.