Site logo

Archived topic

Shadow

27 replies · Started by Shubham on October 14, 2020

Viewing posts 1–15 of 28

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.

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.

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

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 :)

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!

Try this:

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

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!

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?

The blog page same as the home page.

Give this CSS a shot:

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

Didn't work..

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?

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!

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

Done. Please Check.

This archived topic is closed to new replies.