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

Home Forums Support How can I get the same result using WP Show Posts In GeneratePress?

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #964461
    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?

    #964606
    Tom
    Lead Developer
    Lead Developer

    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.

    #964631
    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.

    #965213
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #965255
    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?

    #965448
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #965517
    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.

    #965538
    Leo
    Staff
    Customer Support

    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/

    #966131
    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).

    #966387
    Leo
    Staff
    Customer Support

    Try this instead:

    .site-header {
        box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
        z-index: 999;
    }
    #966518
    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.

    #966569
    Jagdish

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

    Screenshot-2019-07-25-at-10-32-56-AM

    #967075
    Leo
    Staff
    Customer Support

    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 🙂

    #967463
    Ravi Dixit

    Hey, Leo!

    how can I implement the same Shadow for floating navigation?

    #967485
    Leo
    Staff
    Customer Support

    This should work:

    #sticky-navigation {
        box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.