Archived topic
Border for body inner container
5 replies · Started by ch1800 on January 21, 2021
Hi guys,
I'm using WP Show Posts at homepage and I've added a border with shadow with this snippet:
.wp-show-posts-inner {
background-color: #ffffff;
padding: 70px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
border-radius: 3px;
}I would like having the same for the remaining pages around the body's inner container and tested with this:
.separate-containers .inside-article {
background-color: #ffffff;
padding: 70px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
border-radius: 3px;
}that somehow works but, unfortunately, removes itself on mouse hover...
What would be the correct one for those page please?
Thanks.
Hi,
that somehow works but, unfortunately, removes itself on mouse hover…
Have you sorted this out?
I don't see this behavior when I checked your site. Perhaps I missed it.
Can you link us to the site in question and/or provide a screen recording of this issue occurring so we could have an idea of which one to check? Let us know.
Yes, sorry, I had removed the snippet and forgot to add it again...
I've added it to the page linked here in "private" and I've put a red color so that it's easily visible: box-shadow: 0 0 30px rgb(192 27 27);
It displays when the mouse is outside of the inner container but disappears when you hover inside the article.
You have this CSS in your Appearance > Customize > Additional CSS:
.inside-article:hover, .sidebar .widget:hover, .comments-area:hover {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}You can remove .inside-article:hover, so this particular CSS set only applies to sidebar, widgets and the comment area. Or you can completely remove this code if you don't want this effect.
Yep, that's right, was with original demo site.
Removed and works fine, many thanks!
No problem. Glad you got it sorted. :D
