- This topic has 8 replies, 4 voices, and was last updated 3 years, 3 months ago by Elvin.
-
AuthorPosts
-
January 15, 2021 at 6:57 pm #1620774Andre
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é
January 15, 2021 at 7:37 pm #1620791AndreSorry 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… 🙂
January 16, 2021 at 5:06 am #1621113DavidStaffCustomer SupportHi 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; }
January 18, 2021 at 12:32 pm #1624150AndreHello 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é
January 18, 2021 at 12:45 pm #1624157YingStaffCustomer SupportHi 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 🙂
January 18, 2021 at 3:55 pm #1624276AndreHi 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é
January 18, 2021 at 4:05 pm #1624283ElvinStaffCustomer SupportHi 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.January 18, 2021 at 4:11 pm #1624285AndreDone! https://xswebpt.com/como-fazer-bem-alguma-coisa/
Thank you all for your help and patience 🙂January 18, 2021 at 4:25 pm #1624290ElvinStaffCustomer SupportNo problem. Glad you got it sorted. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.