Jump to content

Adding custom icons and elements on blog post thumbnails

Recommended Posts

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! 

Screenshot (3).png

Link to comment
  • Replies 32
  • Views 4.9k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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

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
5 hours ago, kbw2024 said:

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

Screenshot_304.png

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

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

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

pass: abc

image.png.9a37422b565a1aa74bab76807cec15c7.png

Here I used

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

image.thumb.png.d92206f9aec76d906c3ac79c8057b54e.png

* Icons

Use FontAwesome 6 icons

https://fontawesome.com/icons

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

image.png.000622bb36ea8645c7b5d027aa7891b6.png

and Price

image.thumb.png.e5816728a2ad149b4e6676d2a441f49c.png

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

image.png.2d220a86bd3253a3a2d66d30083ac03b.png

Next, enable this option

image.png.8ca42d4bec6851058d93151647b8c876.png

 

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>

image.thumb.png.e804f1a44f12f13780619401873642be.png

 

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

pass: abc

image.png

Edited by tuanphan

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 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?

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
6 minutes ago, kbw2024 said:

/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

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 11/2/2023 at 10:06 PM, kbw2024 said:

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.

 

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

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)

 

 

Screenshot (5).png

Link to comment
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)

 

 

Screenshot (5).png

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>

 

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.