Jump to content

Change position of Tags and add wording

Go to solution Solved by Beyondspace,

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

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
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:

 

image.thumb.png.b9577b5f1afd310eef83e7df5b43991d.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 8 months later...

In addition to the two sets of CSS supplied by @Beyondspace above I added the following:

/*Reduce Bottom Margin of Blog Item Top Wrapper */
.blog-item-wrapper .blog-item-top-wrapper {
  margin-bottom: -18px !important; /* SQS default set at 70px */
}

In my case there was a large space above where the Tags were displaying. I massaged it to -18px so it looked good in my case. Others' experience may differ, adjust accordingly.

Note that I do realize that the space between a Blog Post Title and the top of the Blog Post Content is controlled by the Edit Section "Header Spacing" slider, that slider has a bottom limit of 10px. So, even accounting for that there was still too large a gap for what I wanted. I decided to keep the CSS I used above and not have to adjust that Header Spacing slider for each blog post, one less thing to remember.

Thanks to @Beyondspace for the code. I appreciate it.

Edited by wallacewebdesign
I realized there was an adjustment that I hadn't previously considered. That changed the work-around slightly, and I wanted to be transparent on that.
Link to comment
  • 7 months later...

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.