Jump to content

Stacking metadata on two lines on blog collection pages

Go to solution Solved by creedon,

Recommended Posts

Is there a way to stack the metadata on a blog collection page so the primary and secondary content each appears on its own line vs inline w/ a delimiter? 

I have a Side by Side Blog and want to have the author name on the first line and the category on a second line underneath (before the title and excerpt), but can't for the life of me piece together the right code to make this work.

Thanks in advance!

Link to comment
  • Solution

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

<style>

  /* begin blog page meta delimiter hide vertical orientation */
  
    .blog-meta-section {
    
      align-items : start;
      flex-direction : column;
      
      }
      
    .tweak-blog-side-by-side-delimiter-bullet .blog-side-by-side .blog-meta-delimiter::after {
    
      display : none;
      
      }
      
    /* end blog page meta delimiter hide vertical orientation */
    
  </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.

Link to comment
  • 2 weeks later...

Hey @creedon , I'm now trying to do this at the top of the blog article pages themselves (in the .blog-item-meta-wrapper) and can't quite seem to figure it out. When I try to adapt your code for the blog collection page, I can get the category and author to stack, but they then appear centered and I'd like to keep them left-aligned.

Would you mind sharing code to accomplish this? Thanks so much.

Link to comment

Here is an example.

.tweak-blog-item-text-alignment-center .blog-item-wrapper .blog-item-top-wrapper .blog-item-meta-wrapper,
.tweak-blog-item-text-alignment-center .blog-item-wrapper .blog-item-top-wrapper .blog-item-author-date-wrapper

  {

    align-items : flex-start;
    flex-direction : column;
    
    }

.tweak-blog-item-show-date.tweak-blog-item-show-author-name.tweak-blog-item-delimiter-dash .blog-item-wrapper .blog-meta-item--date::after {

  display : none;
  
  }

 

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.