Jump to content

Featured Blog Post Design

Recommended Posts

Site URL: https://wrasse-harp-hmtx.squarespace.com/home

Hello,

I was wondering if anyone could help me with an issue I'm having please.

Is there a way to feature the latest 3 blog posts on my homepage, that carries over the styling of the actual blog page? I've tried using summary blocks, however the design looks completely different, so it ruins the aesthetic. 

Image 1 is what I want it to look like (That is the actual blog page)

Image 2 is  what it looks like when I feature them on the homepage through summary blocks. Note how the bottom section - title/description/date etc - looks completely different. Is there a way to change that?

Thank you in advance.

1.png

2.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, tuanphan said:

Hi. You can add a summary block, then we will test some code to make its style same as blog page

Hi, great thank you. I have added the summary block to my homepage (Image 2 from previous post). Would some CSS code help to make it look like blog page? 

Thank you

Link to comment
On 6/12/2021 at 4:59 PM, KPMay said:

Hi, great thank you. I have added the summary block to my homepage (Image 2 from previous post). Would some CSS code help to make it look like blog page? 

Thank you

Hi. What is access password?

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
4 hours ago, tuanphan said:

Hi. What is access password?

Hi, oh yes sorry, to view the website? Password is 'Sunshineflower' - url 'thisslowlivinglife.com'. Or do you need to get into my actual account to see the code?

Thank you

Link to comment
22 hours ago, KPMay said:

Hi, oh yes sorry, to view the website? Password is 'Sunshineflower' - url 'thisslowlivinglife.com'. Or do you need to get into my actual account to see the code?

Thank you

Thank you. Now you want 

  • Add a spacing on top/bottom of Date/Category
  • Change Date/Category font
  • Add a space between excerpt/title/date-category/read more
  • Make read more underline & remove arrow icon

Is this right?

 

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
3 hours ago, tuanphan said:

Thank you. Now you want 

  • Add a spacing on top/bottom of Date/Category
  • Change Date/Category font
  • Add a space between excerpt/title/date-category/read more
  • Make read more underline & remove arrow icon

Is this right?

 

Yes thats correct, to get it to look exactly like the bottom of the blog posts on the 'blog' page. Or as close to it as possible.

Thanks very much. 

Link to comment
21 hours ago, KPMay said:

Yes thats correct, to get it to look exactly like the bottom of the blog posts on the 'blog' page. Or as close to it as possible.

Thanks very much. 

Add to Design > Custom CSS

/* Homepage summary */
body.homepage .summary-content.sqs-gallery-meta-container>* {
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}
body.homepage .summary-metadata-container.summary-metadata-container--above-title * {
    font-family: minion-pro;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.2em;
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
}
body.homepage .summary-excerpt * {
    font-family: minion-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.8em;
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
}
body.homepage a.summary-read-more-link:before {
    visibility: visible;
    content: "Read More";
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
    border-bottom: 1px solid;
}

 

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
21 minutes ago, tuanphan said:

Add to Design > Custom CSS


/* Homepage summary */
body.homepage .summary-content.sqs-gallery-meta-container>* {
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}
body.homepage .summary-metadata-container.summary-metadata-container--above-title * {
    font-family: minion-pro;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.2em;
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
}
body.homepage .summary-excerpt * {
    font-family: minion-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.8em;
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
}
body.homepage a.summary-read-more-link:before {
    visibility: visible;
    content: "Read More";
    font-size: calc(~"(1 - 1) * 1.2vw + 1rem");
    border-bottom: 1px solid;
}

 

Thank you so much, that worked perfectly to stylise it. One small thing is the old 'read more' with the arrow is still showing - see attatched image. Other than that it looks great!

Thank you for your help

Screenshot 2021-06-16 at 10.25.57.png

Link to comment
20 hours ago, KPMay said:

Thank you so much, that worked perfectly to stylise it. One small thing is the old 'read more' with the arrow is still showing - see attatched image. Other than that it looks great!

Thank you for your help

Screenshot 2021-06-16 at 10.25.57.png

don't remove any code. Add this code

body.homepage a.summary-read-more-link {
	visibility: hidden;
}

 

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
3 hours ago, tuanphan said:

don't remove any code. Add this code


body.homepage a.summary-read-more-link {
	visibility: hidden;
}

 

Yes that worked perfectly. Thank you so much for all of your help, I really appreciate it! Looks exactly how I wanted. 

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.