simon.stjohn Posted January 8 Share Posted January 8 (edited) Hi everyone Just wanting some help to display a blog posts' tags differently in 7.1: 1. Change the position of the tags for a blog to be above the blog post title (and in my case, below the category as well) 2. Add wording in front of the tags to read: 'Highlights: ' For example: Highlights: Beach, Waterfall, Drone, Family 3. Add a comma between the tags (if possible) as shown in the example above 4. Have control over the font weight Many thanks in advance to those clever with CSS! Edited January 8 by simon.stjohn Link to comment
Beyondspace Posted January 9 Share Posted January 9 Can you share your site with the protected password so I can take a look? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
simon.stjohn Posted January 9 Author Share Posted January 9 1 hour ago, Beyondspace said: Can you share your site with the protected password so I can take a look? Hi thanks for your reply...... The site is public, so I am not sure why you need a password applied? Would not that limit access to only those with a password? Are you wanting to be added as a contributor, perhaps? Forgive me if I have misunderstood.... Cheers Simon Link to comment
Beyondspace Posted January 9 Share Posted January 9 11 hours ago, simon.stjohn said: Hi thanks for your reply...... The site is public, so I am not sure why you need a password applied? Would not that limit access to only those with a password? Are you wanting to be added as a contributor, perhaps? Forgive me if I have misunderstood.... Cheers Simon Can you share your URL to the blog post page? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
simon.stjohn Posted January 9 Author Share Posted January 9 Hi @Beyondspace Thanks for your patience....I am so sorry I did not include a URL in my original post! here is an example: https://www.blog.baligram.me/blog/telawas-beach-oasis-of-raw-natural-beach-in-lombok-indonesia As you can see, the tags are down the bottom by default in Squarespace and I'd like them up the top under the Title, to look like this in smaller font: Highlights: Beach, Swing, Nature Link to comment
tuanphan Posted January 14 Share Posted January 14 On 1/10/2023 at 3:49 AM, simon.stjohn said: Thanks for your patience....I am so sorry I did not include a URL in my original post! here is an example: https://www.blog.baligram.me/blog/telawas-beach-oasis-of-raw-natural-beach-in-lombok-indonesia As you can see, the tags are down the bottom by default in Squarespace and I'd like them up the top under the Title, to look like this in smaller font: Highlights: Beach, Swing, Nature Move Tags to this position? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
simon.stjohn Posted January 19 Author Share Posted January 19 Yes please - that would be perfect (Apologies for the delay in replying....I have been unwell) Link to comment
simon.stjohn Posted January 23 Author Share Posted January 23 On 1/14/2023 at 11:40 PM, tuanphan said: Move Tags to this position? Hi @tuanphan If you have a moment to help with this solution I would be very grateful! Regards, Simon Link to comment
Beyondspace Posted January 23 Share Posted January 23 With the basic Css code, you can use the following code on Home > Design > Custom Css .blog-item-content-wrapper { display: flex; flex-direction: column; } .blog-item-content-wrapper .blog-meta-item.blog-meta-item--tags { order: 1; } .blog-item-content-wrapper .blog-item-content.e-content { order: 2; } .blog-item-content-wrapper .blog-item-injection { order: 3; } .blog-item-content-wrapper .blog-item-author-profile-wrapper { order: 4; } Here is the simple result If you need it is under the title (Lombok), we need use some javascript code, which is only available on business plan, to move tags to the right place as you wish tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
simon.stjohn Posted January 25 Author Share Posted January 25 Hi @Beyondspace Thank you so much! That is fine in that position...it actually works better. Question: Is it possible to centre these tags to they align with the heading etc? Regards, Simon Link to comment
simon.stjohn Posted January 30 Author Share Posted January 30 Hi @Beyondspace 😀 Just wondering if you might be able to help with a way to centre-align the tags? At the moment they are left-aligned: Link to comment
Solution Beyondspace Posted January 31 Solution Share Posted January 31 On 1/30/2023 at 11:39 AM, simon.stjohn said: Hi @Beyondspace 😀 Just wondering if you might be able to help with a way to centre-align the tags? At the moment they are left-aligned: You can use this additional code .blog-meta-item.blog-meta-item--tags { display: flex; justify-content: center; } Support me by pressing 👍 or marking as solution if this useful for you Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you 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