- This topic has 25 replies, 2 voices, and was last updated 3 years, 9 months ago by Tom.
-
AuthorPosts
-
May 30, 2020 at 3:36 am #1307425Andy
Hi,
I’m trying to use flexbox to overlay the post title over the centre of the thumbnails on my archives. Unfortunately align-items: center; isn’t working when applied to article or .inside-article. Please disregard the Route Overview section as they isn’t going to be removed. I’m also trying to do the same on my home page post listings which uses the WP Show Posts plugin.Any help much appreciated.
Thanks.
May 30, 2020 at 10:40 am #1307935TomLead DeveloperLead DeveloperHi there,
Is there a specific page where I can see what you’ve set up so far? I took a look around but couldn’t find anything.
Let me know 🙂
May 30, 2020 at 10:55 am #1307945AndySorry for the confusion I haven’t added any actual CSS yet was just trying it in the inspector. It’s the main routes page and routes on the homepage I want to apply it to, basically every archive with thumbnails.
May 30, 2020 at 3:56 pm #1308156TomLead DeveloperLead DeveloperYou could try:
1. Remove the 36px padding from the bottom of the posts.
2. Add this CSS:.blog .generate-columns .entry-header { position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; }
May 30, 2020 at 4:31 pm #1308176AndyHi Tom,
Many thanks for this, it’s almost working but the titles are displaying slightly lower than central. I’ve added the CSS to my staging site so you can see it in action, I’ve edited the URL of this post with the new one. Also the star ratings aren’t clickable. They way I’m adding them is with a Generatepress Hook Element where I add the shortcode [yasr_overall_rating size=”medium”] to the after_entry_title Hook.
Is there some way I can wrap that within the post URL dynamically?
Also, would like to add a dark overlay to the image so that the titles are easier to read. I know I could just use filter: brightness(0.7); but I’m not sure legacy browser support is that good for filters so was wondering if there’s a better way?.
Many Thanks.
Andy
May 31, 2020 at 8:33 am #1308824DavidStaffCustomer SupportHi there,
the staging site needs a login – can you disable that or send them via the Account issue form:
https://generatepress.com/contact/
Please add the URL of this topic to the form so we can track.
May 31, 2020 at 12:56 pm #1309092AndySorry I tried to add the login details with the URL but I think they got mixed up. I’ve now sent the details via the form, had to tick ‘not a support query’, even though it is.
May 31, 2020 at 2:52 pm #1309163TomLead DeveloperLead DeveloperStrange, can you un-do the change so I can see the stars as click-able? Even when I remove the code from developer tools I can’t click on them.
May 31, 2020 at 4:20 pm #1309199AndySorry I realise now they never were clickable before, but now they are overlaid on the image I think its even more important that they are clickable, if possible.
June 1, 2020 at 9:28 am #1310062TomLead DeveloperLead DeveloperWhere are they coming from? A plugin?
June 1, 2020 at 9:53 am #1310103AndyYes this one: https://wordpress.org/support/plugin/yet-another-stars-rating/
Then I add them using the shortcode [yasr_overall_rating size=”medium”] inside the Element Hook
June 1, 2020 at 3:38 pm #1310411TomLead DeveloperLead DeveloperYou might want to check with them why it’s not working as of right now, then we can quite easily adjust the
top
value in your CSS to bring it up a bit if it isn’t perfectly center.June 1, 2020 at 3:44 pm #1310413AndyThink I may have confused you slightly here. The YASR plugin is working fine, the stars aren’t meant to be clickable by default, I just want to make the whole thumbnail clickable including the stars.
June 2, 2020 at 3:47 am #1310924DavidStaffCustomer SupportIn your CSS try including a
pointer-events: none;
property ie..blog .generate-columns .entry-header, .archive .generate-columns .entry-header, .wp-show-posts-entry-header { position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; pointer-events: none; }
Then it should inly detect the image and its link.
June 2, 2020 at 5:10 am #1311001AndyWow thanks David, what a brilliantly simple solution, would never have thought of that!.
Could you advise me on the best way to add a dark transparent overlay to the thumbnails so the text is easier to read?. I know I could use CSS filters, but is there a better way that would support legacy browsers?
Also, on the WP Show Post thumbnails the post titles/stars are perfectly centered, but on theme generated archive pages they are slightly too low, shall I just tweak the top and transform numbers slightly for those?.
-
AuthorPosts
- You must be logged in to reply to this topic.