- This topic has 10 replies, 3 voices, and was last updated 7 months, 1 week ago by
David.
-
AuthorPosts
-
June 22, 2020 at 4:35 am #1337231
nomadiceman
I am using the Avery theme and trying to have a coloured block around the category name
https://gpsites.co/avery/category/lifestyle/
I want to give each category its own colour for the block
Im struggling to figure that out in CSS.
Any ideas out to achieve that?
Thank you again for your help
June 22, 2020 at 4:46 am #1337248David
StaffCustomer SupportHi there,
if the block is just around the title then use this CSS for the default color:
.category .page-hero h1 { display: inline; padding: 20px; background-color: red; }
then you will need to add after that rule a separate CSS rule for each Category eg.
.category-lifestyle .page-hero h1 { background-color: yellow; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 22, 2020 at 6:01 am #1337322nomadiceman
Thank you for this. I’ll give it a try
The block was going to be around just the category name on the archive and also single pages
For example, the “music” category would have a green coloured background as a block. The “books” category would have a brown block
I need to also remove the little folder symbol too that’s near the category tags
June 22, 2020 at 6:55 am #1337387David
StaffCustomer SupportTry this method:
/* Remove icon */ .cat-links:before { display: none; } /* Remove comma delimiters */ .cat-links { display: block; font-size: 0; margin-bottom: 20px; } /* Base style tag */ .cat-links a { font-size: 14px; margin-right: 5px; padding: 5px; background-color: red; color: #fff !important; } /* Style specific category */ .cat-links a[href*="/inspiration"] { background-color: green; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 22, 2020 at 8:01 am #1337622JOAQUIM GALANTE
Nice David, but now the color is red for all categories, how can ia personalize the colors to put diffrent colors for each category ?
June 22, 2020 at 8:19 am #1337642JOAQUIM GALANTE
I discover it. Thanks a lot David
June 22, 2020 at 9:11 am #1337700David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 22, 2020 at 2:22 pm #1337988nomadiceman
JOAQUIM GALANTE any chance you can share how you did it?
Thanks David for your help once again
June 22, 2020 at 2:29 pm #1337995nomadiceman
ive figured it out
change the url for each category and colour in this part of the code
/* Style specific category */ .cat-links a[href*="/inspiration"] { background-color: green; }
awesome. thanks guys. I wouldn’t have been able to figure that one out. 🙂
June 22, 2020 at 2:54 pm #1338021nomadiceman
Great Ive just figured this out. I have the WP Show Posts and using it on the front page. This css works to do the same thing 🙂 I believe it is correct
.wp-show-posts-terms { display: block; font-size: 0; margin-bottom: 20px; } .wp-show-posts-terms a { font-size: 14px; margin-right: 5px; padding: 5px; background-color: red; color: #fff !important; } .wp-show-posts-terms a[href*="/inspiration"] { background-color: green; }
Thanks for your help again mate.
June 23, 2020 at 2:42 am #1338407David
StaffCustomer SupportGlad to hear that
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.