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

[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

[Leo]

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!

[NICOLO’]

Is this customization too difficult?
ty

[David]

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.

[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

[David]

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?

[NICOLO’]

Wonderful!
Now I simply want to remove icons 🙂

[David]

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 );

[NICOLO’]

Not working! It removes labels and icon remain!

[David]

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

[NICOLO’]

It is already SVG! :\

[Elvin]

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;
}

[NICOLO’]

Worked!
Thank you

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts