[Support request] How to style tags?

Home Forums Support [Support request] How to style tags?

Home Forums Support How to style tags?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2455535
    Shami

    I want to style tags like this:

    View post on imgur.com

    How do I achieve this?

    #2455537
    Fernando
    Customer Support

    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

    #2455542
    Shami

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

    Also check the reference link.

    #2455696
    David
    Staff
    Customer Support

    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.

    #2455779
    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.

    #2455829
    David
    Staff
    Customer Support

    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;
    }
    #2456170
    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.

    #2456210
    David
    Staff
    Customer Support

    I edited the CSS above.

    #2456235
    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?

    #2456348
    David
    Staff
    Customer Support

    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

    #2456654
    Shami

    perfect. thanks.

    #2456842
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.