Display post tags as small buttons

Hi m,

In the Advanced Layout Builder, add Post Metadata then edit it.
Under Content (tab) > Add/Edit Metadata, remove Last Modified Date and Categories, then replace Author with Tags and remove by in Prepend a text and save.
Then go to Enfold > General Styling > Quick CSS:

#top .av-post-metadata-container {
    padding: 20px 0;
}

#top .av-post-metadata-content {
    color: transparent;
}

#top .av-post-metadata-category-link a {
    background-color: white;
    border: 0;
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #111827;
    font-size: .875rem;
    line-height: 1.25rem;
    padding: 5px 12px;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#top .av-post-metadata-category-link:hover a {
    background-color: rgb(249,250,251);
    text-decoration: none;
}

Hope this helps.

Best regards,
Nikko

Hi m s,

Add this after the code I gave above:

#top .av-metadata-before-tags {
    color: black;
}

Just change the color as you see fit.

Best regards,
Nikko

Hi m s,

I apologize for the delayed response.
Please add this CSS code as well:

#top .av_one_fifth .bloglist-simple .read-more-link {
    display: none;
}

Best regards,
Nikko

Hi m s,

Can you give us a link to some of the posts mentioned? so I can modify the CSS code and give you a better one.
You can post it in private content if you want it to be visible only to the moderators.

Best regards,
Nikko

Hi m s,

For the Bloglist with hidden arrow icons, you can reduce the size of the font to fix the issue.

As for tag buttons, it seems you are attempting to use them in a page which unfortunately will not work.
You’ll need to use a Post and not a page for it.

Best regards,
Nikko

Hi m s,

Try adding this CSS code and just change the font size value:

#top #wrap_all .av_one_fifth .bloglist-simple .post-title {
    font-size: 16px;
}

Hope this helps.

Best regards,
Nikko