Move tags on your blog posts and change design

Site URL: https://www.nutrilee.nl/recepten/vegan-groningse-mosterdsoep

Hi guys,

I recently published my squarespace website where I have my recipes and blogposts.

Tags (such as lactosevrij, glutenvrij etc.) are shown at the bottom of each blogpost by default, but I'd like them to be beneath categories (Lunch, soep etc.). I'd also like the tags to be in a different colour (#545454) and a bit smaller, so people can tell the categories and tags apart. 

I'd like to do the same for blogposts, so it's okay if this affects both.

Does anyone know if this is possible, and if yes: do you know the code for it?

Hope someone can help me out!!

Thanks.

- Kimmylee

On 5/14/2021 at 7:47 PM, KDL1994 said:

Site URL: https://www.nutrilee.nl/recepten/vegan-groningse-mosterdsoep

Hi guys,

I recently published my squarespace website where I have my recipes and blogposts.

Tags (such as lactosevrij, glutenvrij etc.) are shown at the bottom of each blogpost by default, but I'd like them to be beneath categories (Lunch, soep etc.). I'd also like the tags to be in a different colour (#545454) and a bit smaller, so people can tell the categories and tags apart. 

I'd like to do the same for blogposts, so it's okay if this affects both.

Does anyone know if this is possible, and if yes: do you know the code for it?

Hope someone can help me out!!

Thanks.

- Kimmylee

Hi Kimmy, let's put this into Settings -> Advanced -> Code Injection

<script>
document.addEventListener('DOMContentLoaded', function() {
    var blogMetaTags = document.querySelector(".blog-meta-item--tags");
    var blogMetaWrapper = document.querySelector(".blog-item-meta-wrapper");
    blogMetaWrapper.appendChild(blogMetaTags);
});
</script>

@bangank36 thanks so much for your reply! I appreciate your help so much. It works! Do you also know how to change the size and colour perhaps? :D 

@KDL1994 Add to Design > Custom CSS

/* blog tags */
.blog-meta-item.blog-meta-item--tags * {
    font-size: 12px !important;
    color: red !important;
}

On 5/18/2021 at 6:01 AM, KDL1994 said:

@bangank36 thanks so much for your reply! I appreciate your help so much. It works! Do you also know how to change the size and colour perhaps? 😄

Hello

The color you can cheange it in 7.1 in the style color settings, looking for blog metadata color, the size you can add in the CSS advanced injection the size tou want there are a lot of threads in the forum about it