Archived topic
Make WP Latest post blocks clickable
5 replies · Started by dave on January 25, 2022
Hello, I'm going to rebuild this section (and the blog/archives) once GBP has been updated to integrate WPShowPosts. For now I am using the native WP Latest Post block and I am wondering if i can make the entire block(s) clickable links? The section in question is the success story block on my homepage, I'd like to make the entire block for each story clickable.
If I can't make the entire block(s) clickable I am wondering if you can help me style my title link better? I have styled the title/link for each post using the code below. But it only works if I do not make the image clickable. If I select "make image link" then the style from this code also gets applied to the image, which I do not want. How can I select just the title to style if the image is also clickable?
.success a {background-color: var(--accent); margin-top: -45px; position: absolute; margin-left: -10px; padding: 5px 10px; color: #ffffff; text-decoration: none; font-weight: 600;}
Hi Dave,
In order to make the container clickable, you'll need to remove theposition:abosolute; CSS for the link (.success a ), then add this CSS:
ul.success.wp-block-latest-posts li a:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
ul.success.wp-block-latest-posts li {
position: relative;
}Woot! This works perfectly, thank you again Ying. The negative top margin I was using for the title stopped working so I added a negative bottom margin to the image instead and it is working perfectly. Thank you.
You are welcome :)
Glad to help! By the way, nice site!
Thank you Ying, it's coming together. Its pretty simple but I am liking it and GPP & GBP make it pretty fun :)
Glad to hear that :)
