- This topic has 14 replies, 2 voices, and was last updated 4 months, 1 week ago by
Elvin.
-
AuthorPosts
-
September 17, 2020 at 5:37 pm #1447903
Liran
Hey,
How can I get the categories to show inside the featured images? Here’s a good example.
Your theme rock, by the way!
September 17, 2020 at 5:43 pm #1447908Elvin Customer Support
Hi Liran,
You can check this topic on how to do that.
https://generatepress.com/forums/topic/blog-archive-horizontal-layout/#post-1428465Let us know if it works for you.
A wise man once said:
"Have you cleared your cache?"September 17, 2020 at 6:20 pm #1447929Liran
Thanks Elvin. But there’s something off with the CSS (at least in the archive pages).
September 17, 2020 at 6:40 pm #1447937Elvin Customer Support
Can you specify what in particular is off?
Perhaps, is it about the category not displaying on archive pages?
If so, I’ve noticed that you have this CSS somewhere in your site.
.category .post-image-wrap .entry-meta { display: none; }
This prevents the category from displaying on archive pages. You have to remove this for the category to display on archive pages.
A wise man once said:
"Have you cleared your cache?"September 17, 2020 at 6:51 pm #1447949Liran
Do you mean the website I mentioned in my original post? This is not my website, just an example.
I added a link to one of my categories. Have a look.
September 17, 2020 at 7:23 pm #1447972Elvin Customer Support
Do you mean the website I mentioned in my original post? This is not my website, just an example.
Oh alright. Thanks for adding your site URL.
You can try including this CSS code instead.
.post-image{ position: relative; } .post-image > a > img.wp-post-image { width: 100%; } .post-image > span.cat_links { position: absolute; margin:0; top:auto; bottom: 7.5%; left: 5%; } .post-image > span.cat_links > span > ul{ list-style:none; margin:0; padding:5px; }
.post-image{position: relative;}
was missing from the previous topic. My bad.Let me know if this works for you.
A wise man once said:
"Have you cleared your cache?"September 17, 2020 at 7:51 pm #1447997Liran
It works, but it kinda messes up some of images. I think it has something to do with this:
.post-image > a > img.wp-post-image { width: 100%; }
Also, how do I make the category names pretty? 🙂
September 17, 2020 at 8:23 pm #1448027Elvin Customer Support
I’ve checked the css codes added and found this broken css property. It was added with mobile view in mind.
We can replace that line of code with this code so it only applies on mobile.
@media (max-width:768px){ .post-image > a > img.wp-post-image { width: 100%; } }
Also, how do I make the category names pretty?
The beauty of this PHP filter is that it was made with the option to assign different colors for each category. You can do that by adding CSS codes.
Let’s say your site has 3 categories which are “food”, “behavior” and “training”. Say, we want “food” to be red, “behavior” to be black & “training” to be blue..
We can do something like this:
span.cat_links > span.food > ul{ list-style:none; background-color: red; } span.cat_links > span.behavior > ul{ list-style:none; background-color: black; } span.cat_links > span.training > ul{ list-style:none; background-color: blue; }
You can add more styles for each of your categories.
The format is basically:
span.cat_links > span.[your-category-slug-here] > ul{ background-color: [text background color value here]; }
As for the category name texts color, you can use this CSS code.
span.cat_links a{ color: #ffffff; }
#ffffff is white, replace it with any color value.
If you need to change the :hover color value, simply add this CSS.
span.cat_links a:hover { color: blue; }
Just replace “blue” with any color you prefer.
A wise man once said:
"Have you cleared your cache?"September 17, 2020 at 8:41 pm #1448035Liran
Got it! Any idea of how to make this work with WPSP as well?
September 17, 2020 at 9:07 pm #1448044Liran
It works, but it kinda messes up some of images.
I think I know the reason. Strangely, some of the thumbnails are larger than 250×150.
Why is that?
September 17, 2020 at 9:09 pm #1448047Elvin Customer Support
Nice one.
Any idea of how to make this work with WPSP as well?
It may be best to open a new topic for that. (either WPSP forums or here)
WPSP’s DOM structure is significantly different than GP theme’s default as it uses its own unique CSS selectors and filters.
I’m 100% sure its doable with WPSP too.
A wise man once said:
"Have you cleared your cache?"September 17, 2020 at 9:18 pm #1448051Liran
Will do. Have you seen my previous question?
September 18, 2020 at 2:09 am #1448267Elvin Customer Support
Will do. Have you seen my previous question?
Sorry about that. I saw it late.
I think I know the reason. Strangely, some of the thumbnails are larger than 250Ă—150.
Why is that?
Oh yeah I noticed that too.
This happens when you’ve already uploaded an image on the media library prior to setting 250×150 to one of on your media sizes on WP Admin Panel > Settings > Media.
The older images don’t have a registered image size for 250×150 because they were uploaded before the most recent 250×150 setting. WordPress doesn’t automatically generate images for newly registered image sizes retroactively.
For that, you’ll need a plugin like Regenerate Thumbnail plugin.
A wise man once said:
"Have you cleared your cache?"September 18, 2020 at 2:09 pm #1449265Liran
Fixed! Thanks for letting me know.
September 18, 2020 at 3:21 pm #1449318Elvin Customer Support
Nice one.
No problem.
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.