Jump to content

Change position of Tags and add wording

Recommended Posts

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 by simon.stjohn
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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, Keyword Highlighter
If 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
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
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, Keyword Highlighter
If 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

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

 

image.png.a9348d2b59d803a6e42cc95a8c694484.png

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

 

image.png.a9348d2b59d803a6e42cc95a8c694484.png

Move Tags to this position?

image.thumb.png.b0509f496e87ef3c088aa17aa5698cd9.png

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

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

image.thumb.png.f4e22aa32f1bad31afc658fa5d3b66af.png

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

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, Keyword Highlighter
If 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

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.