[Support request] How to style tags?

[Shami]

I want to style tags like this:

View post on imgur.com

How do I achieve this?

[Fernando]

Hi Shami,

For reference, can you provide the link to the page where you want to apply this? We’ll check how your tags are shown currently.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Shami]

Please check any post. I’ve provided the link as asked.

Also check the reference link.

[David]

Hi there,

can you share a link to YOUR site, where you want those styles applied ? We need to check how they are displayed and whether it is possible.

[Shami]

I think I shared it earlier. Here it’s again. Open any post.

I’ll use the tags below singlepost at the end before comments for now.

And I’ll try to use them in different places later once I’m satisfied.

[David]

You can add this CSS:

.tags-links {
    font-size: 0;
}
.tags-links a {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    padding: 5px;
    margin-right: 5px;
    margin-top: 5px;
    border-radius: 4px;
    text-decoration: none !important;
    background-color: #eeeeee;
    color: #fff;
}
.tags-links a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

Then you need to give each of your tags there own CSS rule for the color you want to apply:

.tags-links a[href*="life"] {
    background-color: #f00;
}
.tags-links a[href*="personal-development"] {
    background-color: #0f0;
}
.tags-links a[href*="philosophy"] {
    background-color: #00f;
}

[Shami]

Thanks. How do I make the text bold?

And I also want to remove underline on hover. But only for the tags, not for all the links.

[David]

I edited the CSS above.

[Shami]

Thanks. Looking exactly like I wanted.

I’d also like to show these tags above the h1 title on singlepost. But I want them without links this time. Also, they shouldn’t be indexed by the search engines.

How do I do that?

Any snippet for the same?

[David]

If you don’t need the different colors, then you can use a Block Element:
https://docs.generatepress.com/article/block-element-hook/

Set the Hook to before_entry_title

And use a GB Buttons Block, enable its Dynamic Data and set it to display the list of tag terms, just don’t set the links

[Shami]

perfect. thanks.

[David]

You’re welcome

[Author]

Posts