[Resolved] Coloured category and post term buttons / badges

Home Forums Support [Resolved] Coloured category and post term buttons / badges

Home Forums Support Coloured category and post term buttons / badges

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1471243
    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.

    #1471500
    David
    Staff
    Customer Support

    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.

    #1471525
    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

    #1471786
    David
    Staff
    Customer Support

    Edited the CSS above to apply to just the main content

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

    #1472141
    Tom
    Lead Developer
    Lead Developer

    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.

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

    #1472269
    Elvin
    Staff
    Customer Support

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

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

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

    #1472826
    Elvin
    Staff
    Customer Support

    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.

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

    #1472840
    qpaq

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

    #1473740
    Elvin
    Staff
    Customer Support

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

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

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

    #1528863
    Elvin
    Staff
    Customer Support

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

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

    #1528875
    qpaq

    Sure, I’m sending the link.

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