Shadow

[Shubham]

Hey, I am a new GP user and would like to tell you that the experience with GP is amazing.

On to the question – I want to add shadows to my sidebars only and not the area holding my blog post and contents. How can I do it?
Help me out, please.

[David]

Hi there,

Thanks for the feedback – its much appreciated.
can you share a link to your site so i can see the layout – we can then provide the right CSS.

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

[Shubham]

HERE IS MY SITE
I want the other pages to show content i.e in separate containers, same as the home page.

[Leo]

There is actually shadows added to the sidebar widget area already with this CSS in Additional CSS field in the customizer:

.inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

You can tweak the shadow using a site like this:
https://www.cssmatic.com/box-shadow

And change the selector to .sidebar .widget only if you want the shadow with sidebar only.

Let me know if this helps 🙂

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

[Shubham]

I guess I couldn’t frame the question well enough, my bad.
I am leaving a link for example. Please look into it and tell me how can I make the content layout similar. Thanks!

[Leo]

Try this:

.inside-article, .sidebar .widget, .comments-area {
    box-shadow: 0 1px 10px rgba(72,139,201,.2);
    border-radius: 15px;
}

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

[Shubham]

What you suggested has somehow helped but if you can go to my site and check the blog page and home page that would be great.
I want the containers to be separate for each post and no extra page and border in the background.
To be more specific I want the pages exactly the same as the home page is currently now with no extra container at the back for the blog posts.
I hope that explains it all. Thanks!

[Leo]

Still a little bit confused.

Do you want the home page to be the same as the blog page or the blog page to be the same as the home page?

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

[Shubham]

The blog page same as the home page.

[Leo]

Give this CSS a shot:

body.blog .generate-columns, body.archive .generate-columns {
    margin-bottom: 0;
    padding-left: 0;
}

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

[Shubham]

Didn’t work..

[Leo]

Looks like your layout completely changed?

I’m not seeing the Marketer layout as before.

Can you link me to the page in question again with the CSS added?

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

[Shubham]

I am sorry I was just trying out other demos.
It’s back to the marketer one.
Now as you see the home page that’s exactly how I would like the blog page to be. Thanks!

[Leo]

I’m not seeing my CSS added. Can you add it in?

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

[Shubham]

Done. Please Check.

[Author]

Posts