Jump to content

Limit Summary Block Except

Go to solution Solved by michaelbehlen,

Recommended Posts

Hi Everyone! 

I have searched the forum for weeks and can't find an answer. I am trying to limit the excepts displayed on summary blocks to a certain number of lines or words, followed by "...". That's it! I am on 7.1. Open to CSS or JS! Thank you! 

NOTE: That is my live website that I know is on 7.0. I am migrating to 7.1 which is where I need this help. I could not submit my question without putting in an URL. Thanks! 

Edited by michaelbehlen
Link to comment

You can use a solution like this, if you can set a site wide password and share that and the correct URL I can give you the correct code targeting the correct excerpt, but this is the method:

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this code:

section[data-section-id="64b71a6c09069d7b10c7878e"] {
  .sqs-block-summary-v2 .summary-excerpt p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
12 minutes ago, michaelbehlen said:

Hi Zygmuntm,

Where would I put the code? Custom CSS or page header injection?

Custom CSS section. 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
15 hours ago, michaelbehlen said:

Hi Zygmuntm,

Where would I put the code? Custom CSS or page header injection?

Add to Website Tools -> Custom CSS.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...
  • Solution

HI, I ended up using this code and it's great. How do I accomplish the following:

 

-Limit the title in the summary to 2 lines
-Apply this to the "related articles" in a blog post to replicate the look and feel
-On the blog post main page that displays all of the articles.

Thank you!!!

 

 

 

// Beautiful Summary Block Design //

.sqs-gallery-design-autocolumns-slide, .sqs-gallery-design-autogrid-slide {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

// Beautiful Summary Block Image Radius //

.sqs-gallery-design-autocolumns-slide img, .sqs-gallery-design-autogrid-slide .summary-thumbnail {
  border-radius: 0px 0px 0px 0px !important;
}

// Beautiful Summary Block Text Wrap //

.sqs-gallery-design-autocolumns-slide article, .sqs-gallery-design-autocolumns-slide—text  {
  .blog-excerpt{
   display: none !important; 
  }
}

// Beautiful Summary Content Padding //

.sqs-gallery-design-autocolumns-slide .summary-content, .sqs-gallery-design-autogrid-slide .summary-content {
    padding: 0px 10px 5px 10px;
}

// Beautiful Summary Read More Button //

.sqs-gallery-design-autocolumns-slide .summary-read-more-link, .sqs-gallery-design-autogrid-slide .summary-read-more-link {
  display: inline-block;
  margin-top: 5px;
  background: white;
  color: black;
  border: 0px solid white;
  border-radius: px;
  padding: 5px 5px;
}
section[data-section-id="64b71a6c09069d7b10c7878e"] 
  .sqs-block-summary-v2 .summary-excerpt p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

 

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.