[Support request] Assign custom color to (entry meta) category links bg & add avatar to byline

Home Forums Support [Support request] Assign custom color to (entry meta) category links bg & add avatar to byline

Home Forums Support Assign custom color to (entry meta) category links bg & add avatar to byline

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1573589
    Goran

    Hello, I am looking to assign custom colors to my entry meta category links, so:

    – Category 1: Blue
    – Category 2: Yellow
    – Category 3: Red
    – etc.

    I am also looking to add a custom avatar image before the author byline.

    All help is appreciated.

    #1573665
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the page you’re working on?

    You can provide the site details on the private information textfield. Thank you.

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

    #1573679
    Goran

    Sure things, here it is.

    #1573697
    Elvin
    Staff
    Customer Support

    Hello, I am looking to assign custom colors to my entry meta category links, so:

    For this, you can do CSS styling using its element’s attribute.

    Example: for “Shows” category.

    span.cat-links a[href*="/shows"] {
        background-color: blue;
    }

    Simply add more of this for each category you want to style.

    More examples:

    Example: for “Movies” category.

    span.cat-links a[href*="/movies"] {
        background-color: green;
    }

    I am also looking to add a custom avatar image before the author byline.

    You can check this brief documentation on how to add avatar image before the author byline.
    https://docs.generatepress.com/article/entry-meta-style/#example-1

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

    #1574636
    Goran

    Ugh can’t believe I didn’t think of that! Thanks Elvin, that did it.

    Do you have the link on how to remove the commas between the category links by chance?

    I saw it somewhere on here but I can’t find it now.

    #1575016
    Elvin
    Staff
    Customer Support

    You’ll have to use the generate_term_separator for that.

    Example:

    add_filter( ‘generate_term_separator’, function() {
    return ”;
    } );

    But this will apply for the tag links as well. If you want to change it for the category links only, you’ll have to changes its output with generate_category_list_output filter.

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

    #1575017
    Elvin
    Staff
    Customer Support

    You’ll have to use the generate_term_separator for that.

    Example:

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

    But this will apply for the tag links as well. If you want to change it for the category links only, you’ll have to changes its output with generate_category_list_output filter.

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

    #1575052
    Goran

    Thanks Elvin, yeah so the:

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

    does the trick for the tag links, but not for removing the comma between category links on the homepage.

    This:

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

    did not seem to work in removing the comma from the homepage either.

    I’ll await your reply, as of right now I just changed the functions.php line where the comma is being inserted and left it as a space instead.

    Thanks for your help.

    #1575090
    Elvin
    Staff
    Customer Support

    does the trick for the tag links, but not for removing the comma between category links on the homepage.

    Strange, that’s suppose to work for both.

    Try this for the category separator:

    add_filter( 'generate_category_list_output', function() {
        return sprintf(
    		'<span class="cat-links">%3$s<span class="screen-reader-text">%1$s </span>%2$s</span> ',
    		esc_html_x( 'Categories', 'Used before category names.', 'generatepress' ),
    		get_the_category_list( ' ' ),
    		apply_filters( 'generate_inside_post_meta_item_output', '', 'categories' )
    	);
    } );

    get_the_category_list( ' ' ) means its using space as a separator. get_the_category_list( '|' ) means its using | as a separator. Feel free to adjust it to your preferred separator or just keep it as is if you only want spaces.

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

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