Jump to content

Make Summary Block Look Like Blog Section 7.1

Recommended Posts

Site URL: https://stanton-demo.squarespace.com

I'm currently working on a blog website using 7.1 however it's missing one of the features that's keeping the previous version of the site on 7.0. In 7.0 when clicking a category, it simply takes you to a category page with just all the posts in that category. In 7.1, it shows all the posts in that category on the blog page but also EVERY other section. This can be redundant when you don't want to create a separate blog page for each and every category on the site but want to feature homepage content. 

The work around for this is creating a regular page with the same sections but instead of using a blog section (because there isn't one for regular pages), I use a summary block. My issue is that the summary block and the blog page don't look the same and I don't get the same effect. I can technically do this site on 7.0 using Rally or another similar template, but I'd like to build in 7.1 since they're moving more and more sites to that version of the platform. Does anyone know any CSS that I could code to make my summary block look like the blog page? You can see what they both look like and for reference the template at stanton-demo.squarespace.com.

Any and all help is greatly appreciated. Thank you!

summarypage.png

blogpage.png

Link to comment
  • Replies 8
  • Views 669
  • Created
  • Last Reply
10 minutes ago, tuanphan said:

You can setup password & share url

Ah I see that now. Forgot about that feature. Here's the site link: southfolk.squarespace.com/home password is sitetest is the blog page and the summary page is located at southfolk.squarespace.com/home-1. I'm trying to figure out how to get /home-1 to look like /home so that I'm able to only have the first banner section available on whatever the homepage is but when they click on categories, it sections out like in 7.0.

Link to comment

Add to Page Settings > Advanced > Header

<style>
  /* categories */
  .summary-metadata-container.summary-metadata-container--above-title a {
    font-weight: 500;
    font-family: proxima-nova;
    color: #000 !important;
    font-size: calc(-.24vw + 1rem);
    text-transform: uppercase;
}
  /* title */
  a.summary-title-link {
    font-size: calc(.96vw + 1rem);
    font-weight: 400;
    font-family: ltc-bodoni-175;
    line-height: 1.4em;
    letter-spacing: 0;
}
</style>
  
  

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  /* categories */
  .summary-metadata-container.summary-metadata-container--above-title a {
    font-weight: 500;
    font-family: proxima-nova;
    color: #000 !important;
    font-size: calc(-.24vw + 1rem);
    text-transform: uppercase;
}
  /* title */
  a.summary-title-link {
    font-size: calc(.96vw + 1rem);
    font-weight: 400;
    font-family: ltc-bodoni-175;
    line-height: 1.4em;
    letter-spacing: 0;
}
</style>
  
  

 

You are a lifesaver! Thank you!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.