[Resolved] Background color on category and tags metadata

[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é

[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… 🙂

[David]

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

[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é

[Ying]

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 🙂

[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é

[Elvin]

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.

[Andre]

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

[Elvin]

No problem. Glad you got it sorted. 🙂

[Author]

Posts