Adding custom icons and elements on blog post thumbnails

I am working on a property management site for a client and am finding SP a bit limiting when it comes to adding design details. Currently, I'm using a 'blog' to store and archive properties for lease. I need to figure out a way to add custom icons and elements to blog post thumbnails. The client would like the following shown on/beneath the thumbnail:

• number of bedrooms/bathrooms/garages using icons
• the status of each property (for lease/leased)
• price

I've attached a screenshot of an example from their current site. Is there a way to add these elements to a blog section using CSS? 

Any help is appreciated! 

Hi,
You need to use a JS and CSS together to achieve this on blog or products. 

Could you let me know your website URL, please?

Best,
Leopold

Ah, thank you for your response! This site isn't live yet, but here's the working link: https://chipmunk-bell-rjrp.squarespace.com/config/

Is that what you need? If not, just lmk how best to give you the access you need.

On 10/16/2023 at 9:15 PM, kbw2024 said:

Ah, thank you for your response! This site isn't live yet, but here's the working link: https://chipmunk-bell-rjrp.squarespace.com/config/

Is that what you need? If not, just lmk how best to give you the access you need.

The site is private, you can follow this guide to change it to password protected, then we can access easier

Thank you! The password is deeproots0

https://chipmunk-bell-rjrp.squarespace.com/config/

On 10/20/2023 at 11:36 PM, kbw2024 said:

Thank you! The password is deeproots0

https://chipmunk-bell-rjrp.squarespace.com/config/

Hi,

Can you share link to blog page?

https://chipmunk-bell-rjrp.squarespace.com/?noredirect

Here you go: https://chipmunk-bell-rjrp.squarespace.com/config/pages/website-tools/custom-css

5 hours ago, kbw2024 said:

Here you go: https://chipmunk-bell-rjrp.squarespace.com/config/pages/website-tools/custom-css

It is not the blog link. Can you send the blog page URL SLUG?

/residential-properties

PW: deeproots0

I tried do an example, you can check, it this what you want?

https://tuan-brine.squarespace.com/summary-with-icons?noredirect

pass: abc

Here I used

• Sold - Use Tag
• $959.007, 4, 3.5, 2 - Use Text in Excerpt

* Icons

Use FontAwesome 6 icons

https://fontawesome.com/icons

That is perfect! Maybe just a tad more space between the bed/bath/garage icons. But other than that, it's exactly right.

On 10/26/2023 at 11:37 PM, kbw2024 said:

That is perfect! Maybe just a tad more space between the bed/bath/garage icons. But other than that, it's exactly right.

First, you need to add this line to Website Tools (under Not Linked) > Code Injection > Header (this line to load FontAwesome Icons)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 

Next, edit each post > Use this format

and Price

with Sold, I used Category (because Tag doesn't appear on Blog List Page)

Next, enable this option

Next, add this code to Blog Page Header Code Injection

<style>
.blog-excerpt-wrapper pre {
    position: absolute;
    top: 110px;
    right: 0;
    background-color: #f1f2f3;
    padding: 2px 5px;
}
.blog-excerpt-wrapper strong:before {
    content: "\f236";
    font-family: "Font Awesome 6 Free";
}
.blog-excerpt-wrapper em:before {
    content: "\f2cc";
    font-family: "Font Awesome 6 Free";
  font-weight: bold;
}
.blog-excerpt-wrapper span:before {
    content: "\f1b9";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
}
.blog-excerpt-wrapper * {
    font-style: normal;
    text-decoration: none !important;
}
.blog-excerpt-wrapper p {
    text-align: right;
}
.blog-excerpt-wrapper *:before {
    margin-right: 5px;
}
  .blog-meta-section {
    position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 999999;
    background-color: #fff;
    margin: 0 !important;
    padding: 0px 10px;
}

.blog-basic-grid--text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
}
.blog-excerpt-wrapper pre {
    bottom: 60px;
    top: unset;
    background-color: white;
    right: 10px;
}

.blog-excerpt-wrapper p {
    position: absolute;
    bottom: -50px;
    right: 0;
}

h1.blog-title {
    position: absolute;
    bottom: -30px;
    margin: 0 !important;
}
</style>

See a demo: https://tuanphan3.squarespace.com/blog-icon?noredirect

pass: abc

Thanks! I followed these instructions, including removing the nth-child line, and it doesn't appear to be working. Any idea why that might be?

On 10/31/2023 at 3:12 AM, kbw2024 said:

Thanks! I followed these instructions, including removing the nth-child line, and it doesn't appear to be working. Any idea why that might be?

Can you share link to page where you use summary?

https://chipmunk-bell-rjrp.squarespace.com/config/pages/6516201367b1c0568e3c6533

6 minutes ago, kbw2024 said:

https://chipmunk-bell-rjrp.squarespace.com/config/pages/6516201367b1c0568e3c6533

/config is url for site owner, you can access page, you will see an arrow on top left or top right of site > click on it > Real url will appear on browser address bar

Sorry about that: https://chipmunk-bell-rjrp.squarespace.com/residential-properties

On 11/2/2023 at 10:06 PM, kbw2024 said:

Sorry about that: https://chipmunk-bell-rjrp.squarespace.com/residential-properties

My code for Summary Block.

Your page current is Blog Page so will need a different code

Let me test on blog page then let you know.

Sounds good. I will standby..

I updated the code. You can check my comment again.

Update: Update code + Update Excerpt (use Category, instead of Tag) + Need to enable some options in Blog Page.

Thank you! I applied the code, and it only seems to be working on the bottom row of posts for some reason? Also, the styling of the Category doesn't match the rest of the site. Any way to correct that?

(I will replace the number categories with 'For lease' and 'Leased' so it's not showing numbers)

On 11/9/2023 at 4:11 AM, kbw2024 said:

Thank you! I applied the code, and it only seems to be working on the bottom row of posts for some reason? Also, the styling of the Category doesn't match the rest of the site. Any way to correct that?

 

(I will replace the number categories with 'For lease' and 'Leased' so it's not showing numbers)

 

 

Because the gap between items too small. You can increase it, or add this code under

<style>
  .tweak-blog-basic-grid-width-inset .blog-basic-grid {
    grid-row-gap: 100px !important;
}
</style>

Got it! That worked. A few final things:

• How do I left align the icons to match the title alignment?
• How do I change the color and the size of the icons?

#1. Change right to left

#2. Add 

font-size: 20px;

color: #f1f2f3;

to these code

For the second part of that answer, where do I add the code? To all three sections or just once?