[Resolved] Coloured category and post term buttons / badges

[qpaq]

I want to implement the colored category buttons or badges like some magazine themes use. (as in https://demo.themegrill.com/colormag/ or in https://tf01.themeruby.com/seo/)

(I’m using GP with ‘Read’ layout from Mike Oliver from the GP Site Library) Can you help me to do the same with a snippet to get coloured post terms (category and custom taxonomies) over the featured images and below the post title in single.php post pages? I am not using ACF but I use PODS for creating custom taxonomies if that’s important.

[David]

Hi there,

you could do something like this:

/* Set category links general style */

.site-main a[href*="category/"] {
    background-color: red;
    padding: 5px;
    border-radius: 2px;
    color: #fff !important;
}

Then you create a separate CSS rule for each category to set a different color eg.

.site-main a[href*="category/technology"] {
    background-color: blue;
}

See if that works and then we can look at moving the terms inside the featured image – which is not simple – and may require custom development.

[qpaq]

Hi David,

Thanks, that worked out to a certain extent. I mean, we can now achieve to colourize the category buttons in post pages. However, that CSS trick also affected the main navigation menu (based on categories and custom taxonomies) and the breadcrumb, which we need to keep out of this manipulation.

screenshot

[David]

Edited the CSS above to apply to just the main content

[qpaq]

That worked out for the navigation menus. Thanks. Now how can we place these coloured category buttons over the featured images on the homepage?

[Tom]

Hi there,

This isn’t super easy, but should be possible like this:

add_action( 'wpsp_inside_image_container', function( $settings ) {
    if ( 123 === (int) $settings['list_id'] ) {
        printf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
            get_the_term_list( get_the_ID(), $settings[ 'taxonomy' ], '', apply_filters( 'wpsp_term_separator', ', ' ) )
        );
    }
} );

Just update 123 to the ID of your list, and disable the standard term output in your list settings.

Then feel free to link us to your page and we can help with the necessary CSS to place them on top of the image.

[qpaq]

Hi Tom, thanks. I could follow you up until “disable the standard term output in your list settings.”

I can now see the category buttons at the top of the images in the latest posts listing but not over the images.

On the other hand, I don’t know how but I’ve lost the coloured category buttons feature over the hero section in regular single post pages. They are now without colour, even though I had managed to colourize them with David’s updated code. I must have spoiled something.

[Elvin]

Hi,

I can now see the category buttons at the top of the images in the latest posts listing but not over the images.

You can place the category buttons over the image using this CSS code.

#wpsp-1987 .wp-show-posts-image.wpsp-image-center {
	position: relative;
}

#wpsp-1987 .wp-show-posts-image.wpsp-image-center > span.wp-show-posts-terms.wp-show-posts-meta{
	position: absolute;
	bottom: 0;
	margin: 0 0 10px 10px;
	z-index:2;
}

On the other hand, I don’t know how but I’ve lost the coloured category buttons feature over the hero section in regular single post pages. They are now without colour, even though I had managed to colourize them with David’s updated code. I must have spoiled something.

You don’t seem to have some styles added for the other categories yet.

You have to do this:

.site-main a[href*="category/category2"] {
    background-color: orange;
}

for the other categories too.

Example:

.site-main a[href*="category/culture"] {
    background-color: pink;
}

[qpaq]

Hi Elvin, thanks very much. Works like a charm on the front page. I could also apply the same method to my custom taxonomy (content-type) However, I couldn’t figure out the single post pages as you described. I had to create a second attribution to .page-hero classes.

.page-hero a[href*="category/"] {
    background-color: red;
    padding: 5px;
    border-radius: 2px;
    color: #fff !important;
}

.page-hero a[href*="category/category1"] {
    background-color: pink;
}

I couldn’t combine both classes into one with a comma like

.site-main, .page-hero a[href*="category/category1"] {
    background-color: pink;
}

which totally spoils the content div. Anyway, I think this works out to a certain extent.

Do you know a way to omit out the YOAST breadcrumbs to be affected by all these operations?

[Elvin]

Hi,

I couldn’t combine both classes into one with a comma like

That’s fine. I understand you want to make the file as small as possible but don’t try to compress things too much if it risks not working as intended. 🙂

GP’s already pretty light so you have leeway to be a little less strict about this. 😀

But for the sake of imparting knowledge on how to make use of comma in CSS:

we turn this:

.site-main, .page-hero a[href*="category/category1"] {
    background-color: pink;
}

into this:

.site-main a[href*="category/category1"], .page-hero a[href*="category/category1"] {
    background-color: pink;
}

The first code meant you want .site-main to have the style, not its child a[href*="category/category1"] and .page-hero‘s child or any of its a[href*="category/category1"] descendants.

The second code meant you want to style any a[href*="category/category1"] child or descendants of both .site-main and .page-hero.

Hope this gives you a bit of clarify about CSS. lol

Do you know a way to omit out the YOAST breadcrumbs to be affected by all these operations?

This code causes it.

.site-main a[href*="category/category1"] {
    background-color: pink;
}

This code styles all a[href*="category/category1"] child or descendant links inside .site-main. Including breadcrumbs.

Tip about CSS: We must be very specific with the CSS selectors to avoid styling other elements. Ideally we use the target element’s direct parent selector to style it if the target element doesn’t have CSS classes.

[qpaq]

Thank you very much Elin, I’ll work on it then.

[Elvin]

No problem. Hope things are a bit clearer for you now.:)

[qpaq]

Hi Elvin, Tom,

I would like to make this code to display not the categories but the custom taxonomy (content_type).

https://generatepress.com/forums/topic/coloured-category-and-post-term-buttons-badges/#post-1472141

What should I change inside the code?

Thanks.

[Elvin]

Can you link us to a custom taxonomy page of your site? So we could check what needs to be changed. Thank you. 🙂

[qpaq]

Sure, I’m sending the link.

[Author]

Posts