[Resolved] Help with customizing Previous/Next Article Post Navigation

[Vish]

Hello!

I love how the Post Navigation (Previous/Next Article) looks on the DISPATCH Site library theme. So, I loaded the theme on a dummy site and extracted the necessary code for it and am using it right now on my site. GP Elements is being used for this purpose.

Now, I just need a little help with customizing it. I want to apply a ‘blur’ effect on the background image used in the post navigation.

So, this is the code responsible for displaying the background image:

<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">

Here, there is a linear gradient applied to the image. Instead of this, I just want to apply a Blur to the background image (the article title is displayed on top of the background image).

I tried a few things but everything I try ends up blurring the whole Element! 🙁

Any help would be greatly appreciated! Thanks! 🙂

Here’s the full code from the Element if you’d like to take a look: https://pastebin.com/dYah86U0
I have also included the URL of my site with this post.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

with the current markup you can’t blur the image without blurring the whole element.
It would require rewriting that code. To point you in the right direct you would remove the background style from here:

<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">

And create a new child DIV of the post-nav-wrap to output the image e.g

<div class="post-nav-background" style="background: url('<?php the_post_thumbnail_url(); ?>');"><!-- background image--></div>

This would need to be absolutely positioned using CSS to the size of the post-nav-wrap. e.g

.post-nav-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

The title would also need to have a higher z-index to put it in front of the image.

You can then target the post-nav-background with CSS for your blur.

Not tested this and i am sure other elements will require tweaking. Just to note that older browsers don’t support the blur filter.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vish]

Thanks, David. That helped big time!

Managed to get the blur working. But I see some kind of shadow when I apply the blur to the image. Below is the code I used to blur the image:

	-webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);

Is this right way to do it?

You can see the shadow in the blur effect which I am talking about by visiting the link I had included in OP.

Can we do something about this?

[David]

If you mean the blur that is escaping the edge of the post nav, then you can add overflow: hidden; to the #post-nav

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vish]

Well, I was talking about that too in addition to the small shadow effect we see at the meeting point of ‘prev’ and ‘next’ containers. I have taken a screenshot of the same, refer the below image:

https://ibb.co/q5jVyBd

In the very middle, where both the PREVIOUS and NEXT boxes meet, the shadow is visible albeit it is very subtle. But it’s definitely there. Can we do something about it?

Sorry if it’s too much trouble. My OCD is kicking in 😐

[David]

You can try putting the overflow hidden on .post-nav-wrap instead but you may notice a fine break between the two nav elements

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vish]

Thanks, David. 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts