- This topic has 7 replies, 2 voices, and was last updated 4 years, 4 months ago by
Tom.
-
AuthorPosts
-
January 20, 2018 at 6:59 pm #476039
Janet Davis
Hello,
Is there a way to add taxonomy images so that each category or tag can have it’s ow icon in front of it.Thank you.
JanGeneratePress 2.0.2GP Premium 1.5.6January 20, 2018 at 11:55 pm #476105Tom
Lead DeveloperLead DeveloperI think CSS might be the best bet.
For example, our Development category here on this site:
.category-development .page-header h1:before { content: url(URL TO YOUR IMAGE); }
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 21, 2018 at 1:16 pm #476588Janet Davis
Hi Tom,
Thank you but it didn’t do anything. This is what I put in the CSS.
.category-food .page-header h1:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}Maybe I am not calling what I am trying to do correctly. I wanted to change the icon before the category and tag label. These are below my blog posts.
By default the icon is a folder for the category, and for the tag it looks like a sales tag. I didn’t see where I could attach a screen shot.I hope this makes more sense. Thank you
JanJanuary 21, 2018 at 9:12 pm #476754Tom
Lead DeveloperLead DeveloperAh, I misunderstood.
Try this instead:
.entry-meta .tags-links:before { content: url(URL TO IMAGE); } .entry-meta .cat-links:before { content: url(URL TO IMAGE); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 22, 2018 at 5:34 am #476979Janet Davis
Tom,
Sorry I’m not communicating very well what I am trying to do. Mainly because I am not sure what it is called. I thought it would be simple to add little images before tags and categories. I a not sure if they are called icons, images, or ?. Should I be looking for a plug in that does this? Thank you again?I used the following code for a tag in my css:
.entry-meta .tags-links:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}and it put a huge image on the page.
But it didn’t connect to a specific tag.January 22, 2018 at 12:24 pm #477394Tom
Lead DeveloperLead DeveloperTo make the image smaller, we can specify a width and height:
.entry-meta .tags-links:before { background-image: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png); background-size: 100% 100%; display: inline-block; width: 10px; height: 10px; content: ""; }
When it comes to smaller spaces like this, icons are usually preferred, as the images aren’t large enough to tell what they are.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 22, 2018 at 3:00 pm #477511Janet Davis
Tom,
Thank you this worked much better.
I will play with it for size.
I appreciate your help!!!
JanJanuary 22, 2018 at 8:20 pm #477655Tom
Lead DeveloperLead DeveloperYou’re welcome ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.