kbw2024 Posted October 14, 2023 Share Posted October 14, 2023 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! Link to comment
IXStudio Posted October 14, 2023 Share Posted October 14, 2023 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 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
kbw2024 Posted October 16, 2023 Author Share Posted October 16, 2023 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. Link to comment
tuanphan Posted October 19, 2023 Share Posted October 19, 2023 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
kbw2024 Posted October 20, 2023 Author Share Posted October 20, 2023 (edited) Thank you! The password is deeproots0 https://chipmunk-bell-rjrp.squarespace.com/config/ Edited October 20, 2023 by kbw2024 Link to comment
tuanphan Posted October 24, 2023 Share Posted October 24, 2023 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
kbw2024 Posted October 24, 2023 Author Share Posted October 24, 2023 Here you go: https://chipmunk-bell-rjrp.squarespace.com/config/pages/website-tools/custom-css Link to comment
Web_Solutions Posted October 24, 2023 Share Posted October 24, 2023 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? 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
kbw2024 Posted October 24, 2023 Author Share Posted October 24, 2023 /residential-properties PW: deeproots0 Link to comment
tuanphan Posted October 26, 2023 Share Posted October 26, 2023 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 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
kbw2024 Posted October 26, 2023 Author Share Posted October 26, 2023 That is perfect! Maybe just a tad more space between the bed/bath/garage icons. But other than that, it's exactly right. Link to comment
tuanphan Posted October 29, 2023 Share Posted October 29, 2023 (edited) 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 Edited November 8, 2023 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
kbw2024 Posted October 30, 2023 Author Share Posted October 30, 2023 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? Link to comment
tuanphan Posted November 2, 2023 Share Posted November 2, 2023 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
kbw2024 Posted November 2, 2023 Author Share Posted November 2, 2023 https://chipmunk-bell-rjrp.squarespace.com/config/pages/6516201367b1c0568e3c6533 Link to comment
tuanphan Posted November 2, 2023 Share Posted November 2, 2023 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 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
kbw2024 Posted November 2, 2023 Author Share Posted November 2, 2023 Sorry about that: https://chipmunk-bell-rjrp.squarespace.com/residential-properties Link to comment
tuanphan Posted November 4, 2023 Share Posted November 4, 2023 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. 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
kbw2024 Posted November 5, 2023 Author Share Posted November 5, 2023 Sounds good. I will standby.. Link to comment
tuanphan Posted November 8, 2023 Share Posted November 8, 2023 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. 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
kbw2024 Posted November 8, 2023 Author Share Posted November 8, 2023 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) Link to comment
tuanphan Posted November 12, 2023 Share Posted November 12, 2023 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> 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
kbw2024 Posted November 17, 2023 Author Share Posted November 17, 2023 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? Link to comment
tuanphan Posted November 19, 2023 Share Posted November 19, 2023 #1. Change right to left #2. Add font-size: 20px; color: #f1f2f3; to these code 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
kbw2024 Posted November 21, 2023 Author Share Posted November 21, 2023 For the second part of that answer, where do I add the code? To all three sections or just once? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment