[Resolved] Background color on category and tags metadata

Home Forums Support [Resolved] Background color on category and tags metadata

Home Forums Support Background color on category and tags metadata

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1620774
    Andre

    Hello,

    I would like to set a background on each category and tag metadat name in orther to achieve this result https://tinyurl.com/y6km8sgx. I would use one color for Categories and another one for Tags, having the ability to change background and text color. Also remove the comas between the names.

    I image this can be done with CSS but I have no clue how to do it 🙂

    Thanks,

    André

    #1620791
    Andre

    Sorry for the typos. I will repeat the question.

    I would like to set a background color for category and tag metadata names, in orther to achieve this result https://tinyurl.com/y65t6d45.

    I would use one color for Categories (dark gray, white text) and another one for Tags (light gray, white or black text), but of course having the ability to change background and text color anytime.

    I would also like remove the comas between the category/tags names, as they will be separated by those “color boxes”.

    I imagine this can be done with CSS, but I have no clue how to do it… 🙂

    #1621113
    David
    Staff
    Customer Support

    Hi there,

    first to remove , between the terms requires this PHP Snippet:

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

    How to add PHP: https://docs.generatepress.com/article/adding-php/

    Then you can use some CSS to style the links:

    .cat-links a,
    .tags-links a {
      padding: 4px;
      margin-right: 2px;
    }
    
    .cat-links a {
      background-color: #000;
      color: #fff;
    }
    .tags-links a {
      background-color: #ccc;
      color: #000;
    }
    #1624150
    Andre

    Hello again!

    The CSS for cats/tags background color works good. Is there a way to maybe increase the top margin, so the cats/tags wont be so close to the titlle?
    https://xswebpt.com/como-fazer-bem-alguma-coisa/

    I’m still strugling with reomving of the “,” between cats/tags names. Let me try to explain it.

    I’m using this snippet https://docs.generatepress.com/article/generate_header_entry_meta_items/ as suggested by Leo on this topic https://generatepress.com/forums/topic/change-category-and-tag-metadata-location-on-posts-and-edit-text/#post-1620709

    When I add another snippet with the code you wrote above to remove the “,”

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

    … this is what happens ( I get bullet list on Cats)
    https://tinyurl.com/y2tu6eor
    https://xswebpt.com/como-fazer-bem-alguma-coisa/

    Thanks,

    André

    #1624157
    Ying
    Staff
    Customer Support

    Hi Andre,

    Use this CSS to add margin below title:

    .single h1.entry-title {
        margin-bottom: 30px;
    }

    To remove the bullets:

    .single .cat-links ul {
        list-style: none; /*remove bullets*/
        margin-left: auto; /*align to the left*/
    }
    
    .single .cat-links ul li {
        display: inline-block; /*move the 2 cats into 1 row*/
    }

    Let me know 🙂

    #1624276
    Andre

    Hi Ying, thanks!

    I’m sorry but I am a bit lost. Can we go a bit back?
    I’m using Code Snippets plugin and this is what I have now.

    Snippet 1: Add categories to the header meta items

    add_filter( 'generate_header_entry_meta_items', function() {
        return array(
            'categories',
    		'tags',
        );
    } );

    Snippet 2: Background color on cats/tags (CSS)

    .cat-links a,
    .tags-links a {
      padding: 4px;
      margin-right: 2px;
    }
    
    .cat-links a {
      background-color: #000;
      color: #fff;
    }
    	
    .cat-links a:hover {
      background-color: #74c7b8;
      color: #fff;
    }	
    	
    .tags-links a {
      background-color: #ccc;
      color: #000;
    }

    Snippet 3. Title bottom margin (CSS)

    .single h1.entry-title {
        margin-bottom: 30px;
    }

    I’m almost happy with this final result https://xswebpt.com/como-fazer-bem-alguma-coisa/. Now, I just need to remove the comas “,” between the cats/tags names.

    Can tell me what I should do now?

    Thanks a lot,

    André

    #1624283
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m almost happy with this final result https://xswebpt.com/como-fazer-bem-alguma-coisa/. Now, I just need to remove the comas “,” between the cats/tags names.

    Use this PHP snippet.

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

    It replaces the tags and category separator from , to a single space.

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

    #1624285
    Andre

    Done! https://xswebpt.com/como-fazer-bem-alguma-coisa/
    Thank you all for your help and patience 🙂

    #1624290
    Elvin
    Staff
    Customer Support

    No problem. Glad you got it sorted. 🙂

    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.