[Support request] Change Categories and Tags colors on blog page

Home Forums Support [Support request] Change Categories and Tags colors on blog page

Home Forums Support Change Categories and Tags colors on blog page

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1522377
    NICOLO’

    Is it possible to change meta output on my last posts? I’m using marketers template and there are icons before the text. What I would to have is no icon and something like the colors used on “Coywolf” blog.
    Thank you

    #1522849
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link me to your site in question and example you are trying to achieve?

    Please use the private info field.

    Thanks!

    #1531213
    NICOLO’

    Is this customization too difficult?
    ty

    #1531240
    David
    Staff
    Customer Support

    Hi there,

    it is possible with some custom CSS – which will mean you having to add CSS for each of your categories. Can you share a link to your site and ill take a look at whats necessary.

    #1531257
    NICOLO’

    Sure. Thank you.
    I’m interested in both create background for category text and how to modify icons that now appears before categories/tag

    #1531579
    David
    Staff
    Customer Support

    1. Add this PHP Snippet to remove the commas between the Post Meta terms:

    add_filter( 'generate_term_separator', function() {
        return '';
    } );

    2. Then add this CSS to style each term:

    /* Space between Meta */
    .cat-links {
        margin-bottom: 0.5em;
    }
    
    /* default styling */
    .entry-meta .cat-links a,
    .entry-meta .tags-links a {
        background-color: #f00;
        color: #fff;
        padding: 2px 4px;
        border-radius: 6px;
        margin-right: 4px;
    }
    /* Category Link Styles */
    .entry-meta .cat-links a[href*='category-slug'] {
        background-color: #00f;
        color: #fff;
    }
    
    /* Example category slug term */
    .entry-meta .cat-links a[href*='corsi-venezia'] {
        background-color: #00f;
        color: #fff;
    }
    
    /* Tags Link Styles */
    .entry-meta .tags-links a[href*='tags-slug'] {
        background-color: #0f0;
        color: #fff;
    }
    
    /* Example tags slug term */
    .entry-meta .tags-links a[href*='amministrazione'] {
        background-color: #0f0;
        color: #fff;
    }

    You will need to create a separate CSS Rule for each of your Category Terms and Tags Terms – each one is identified by its slug, as per the examples.

    What do you want to do with the Icons?

    #1532616
    NICOLO’

    Wonderful!
    Now I simply want to remove icons 🙂

    #1533003
    David
    Staff
    Customer Support

    Remove the CSS you’re using to display the taxonomy labels eg. DOVE and ARGOMENTI.
    Then add this PHP Snippet to add them in place of the icons.

    add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
        if ( 'categories' === $item ) {
            return 'DOVE: ';
        }
        if ( 'tags' === $item ) {
            return 'ARGOMENTI: ';
        }
        return $output;
    }, 50, 2 );
    #1535196
    NICOLO’

    Not working! It removes labels and icon remain!

    #1535371
    David
    Staff
    Customer Support

    Go to Customizer > General and change the Icon Type to SVG.

    #1536709
    NICOLO’

    It is already SVG! :\

    #1536909
    Elvin
    Staff
    Customer Support

    Hi,

    You should be able to remove the icons from display by adding this CSS:

    span.gp-icon.icon-categories, span.gp-icon.icon-tags {
        display: none;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1538000
    NICOLO’

    Worked!
    Thank you

    #1538115
    Elvin
    Staff
    Customer Support

    Nice one. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.