Featured Blog Post Design

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.

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

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

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?

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

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?

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. 

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;
}

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

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

don't remove any code. Add this code

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

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.