[Resolved] How can I get the same result using WP Show Posts In GeneratePress?

[Ravi Dixit]

See this: https://prnt.sc/oilyqe

This website is also using GeneratePress theme with Elementor page builder.

I am not asking for the exact same results,

Can I create the shadow for each post container as this website did with Elementor?

And I can add Category as they did?

Thanks in Advance…

You guys helped me a lot. I don’t know much about coding but I can do everything because of GeneratePress support.

I want to clear confusion, this website is also using a child theme with GeneratePress but as I know we don’t need child theme. I am using GP since two years without Child theme never faced any issues. Do I need to use?

[Tom]

Hi there,

Just to confirm, are you trying to add the shadow to the posts on your Blog page?

As for a child theme, it depends on if you need to overwrite core template files or not. If you don’t, you don’t need a child theme.

[Ravi Dixit]

Yea I just want to add a shadow of each blog post containers(box) showed by Wp show post…

Thanks for the clarifying.

[Tom]

Give this a shot:

.wp-show-posts-inner {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.wp-show-posts-entry-header {
    padding: 20px;
}

Let me know 🙂

[Ravi Dixit]

Hey, Tom!

Thanks, It is working as I was expecting.

But it is not good at the homepage where I added some latest post from the blog using ShortCode. See this https://prnt.sc/oj0t4o

However, It is working good on the Blog page…

How can I solve the homepage issue?

[Tom]

I believe that’s happening because your images in that list are set to align left.

Let me know 🙂

[Ravi Dixit]

Yes, you are right!

It is working tom, thanks!

One thing more: How can I get shadow only downside of Primary navigation bar? as you can see on this site: shoutmeloud.com

Imp: I have tons of CSS added in Additional CSS tab, Is it good? Or do I need to use a sperate plugin for adding CSS? If yes then suggest the name.

[Leo]

Shadow for primary navigation:

#site-navigation, #sticky-navigation {
    box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
    position: relative;
}

If you have more than 400 lines of CSS, I would recommend using a child theme:
https://docs.generatepress.com/article/using-child-theme/

[Ravi Dixit]

Hello, This code is adding Shadow on Navigation menu, But I want to show it for all header including logo…And want to show only down side (drop shadow).

[Leo]

Try this instead:

.site-header {
    box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
    z-index: 999;
}

[Ravi Dixit]

Hi, Leo!

It is working as I wanted, I tried to do it by myself before asking you but failed. Can you explain to me what z-index is used for?

And how can I implement the same for floating navigation?

However, thanks for the help. You helped me a lot.

[Jagdish]

Thank you, I was also looking for this. Can you please tell how to create padding in excerpts in WPSP.

[Leo]

Hi Ravi,

If you Google “z-index CSS” then there should be lots of explanations as it’s not specific to the theme.

@Jagdish, any chance you can open a new topic and link me to the site in question?

Thanks 🙂

[Ravi Dixit]

Hey, Leo!

how can I implement the same Shadow for floating navigation?

[Leo]

This should work:

#sticky-navigation {
    box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
}

[Author]

Posts