Jump to content

Make summary block look like blog page

Recommended Posts

Site URL: https://www.thetechnologyletter.com

Hello all. I'm trying to duplicate the main landing page, which is a blog page, by using a summary block. The summary block style doesn't match the blog page, so I'd like to use code to force the summary block to look like a blog page in terms of font type and font size and the "read more" link, if possible. Does anyone have any thoughts as to how to force summary blocks to take on the same appearance as blog pages? Thank you in advance for any suggestions!

Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Thank you, Tuanphan. Here is the existing blog home page: https://www.thetechnologyletter.com

And here is a version of that blog page as a summary block: 

https://www.thetechnologyletter.com/posts-members

As you can see, the title text is not the same font, it is not automatically capitalized, the read more button is not the same, the time stamp is not the same, etc. The question is how to tweak the summary block to make it look like the main blog page, and ideally, to make it look identical.

Link to comment

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

 

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
On 3/3/2022 at 8:20 AM, tuanphan said:

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

 

Tuanphan, thank you very much! This is a big help. I notice that the "read more" link still doesn't look like it does on the main page version. It's smaller, and I'd like to get rid of the arrow that's attached to it. Also, I wonder if there's a way to get the date above the title, and more space between Read More and the next post. Side-by-side comparison, the desired look on the left-hand side, the work-in-progress on the right-hand side:

Comparison TL blog pages.png

Link to comment
  • 1 year later...

I've been trying to do the same thing. I have 4 pages with curated blog posts and I want the summary block to look like my blog page and almost fill the page width. I tried the code on this thread, as well as several others, but no luck so far. Tuanphan can you help?

Page I want the others to look like: https://www.kennywallace.co.uk/case-studies

A page with a summary block I want to look like my blog page: https://www.kennywallace.co.uk/top-6-case-studies

I've also attached screen shots for reference.

Screenshot 2023-10-24 at 13.26.30.png

Screenshot 2023-10-24 at 13.27.03.png

Link to comment
On 10/24/2023 at 11:15 PM, KennyWW said:

I've been trying to do the same thing. I have 4 pages with curated blog posts and I want the summary block to look like my blog page and almost fill the page width. I tried the code on this thread, as well as several others, but no luck so far. Tuanphan can you help?

Page I want the others to look like: https://www.kennywallace.co.uk/case-studies

A page with a summary block I want to look like my blog page: https://www.kennywallace.co.uk/top-6-case-studies

I've also attached screen shots for reference.

Screenshot 2023-10-24 at 13.26.30.png

Screenshot 2023-10-24 at 13.27.03.png

Try this CSS code to increase width of summary block page

[data-section-id="64f9c5472378c302c29901fb"] .content-wrapper {
    margin: 0 !important;
    max-width: 100% !important;
}

 

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

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.