Archived topic
Changing Body BG Color
12 replies · Started by Sourabh on January 8, 2021
HI,
According TO my need, I have changed Body BG color to white, its somehow affecting the comment section also, as it's merged within white color, so how to set a small shadow around it so that we can detach it from the background (Refer sample in P-Section).
Also want to match Post comments button color to Match my footer color which is (#001819).
Hi there,
change your CSS to include the Comments area:
article.post, .comments-area {
-webkit-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.25);
}Yes it's working, can we turn the corner here as well ??
Means for post page and comment section in the bottom using the same CSS which you gave???
what should I change in the below code so that I will apply to all post pages including the comment section ??
should i replace article.post, .comments-area with .sidebar . widget ??
.sidebar .widget {
position: relative;
}
.sidebar .widget:before {
left: 5px;
transform: rotate(-5deg);
}
.sidebar .widget::after {
right: 5px;
transform: rotate(5deg);
}
.sidebar .widget::before, .sidebar .widget:after {
content: '';
bottom: 10px;
height: 20px;
position: absolute;
z-index: -1;
background: transparent;
width: 50%;
box-shadow: 7px 6px 15px #333;
}
Can you link us to the page in question?
Yes..refer.
Hi there,
Your selectors would likely need to be something like this:
.sidebar .widget,
.comments-area {
}
.sidebar .widget:before,
.comments-area:before {
}
.sidebar .widget:after,
.comments-area:after {
}
.sidebar .widget:before,
.sidebar .widget:after,
.comments-area:before,
.comments-area:after {
}No Tom, My question is about turning the corner of the posts page (Its background shadow corner)...
If I am not wrong then your CSS belongs to the sidebar...
For the post content it is this selector:
article.post {
}As per the CSS here:
https://generatepress.com/forums/topic/changing-body-bg-color/#post-1611099
Rest CSS code will remain the same ??
Yes, you simply replace the element selectors with those selectors eg.
article.post {
position: relative;
}
article.post:before {
left: 5px;
transform: rotate(5deg); /* Swap rotation */
}
article.post:after {
right: 5px;
transform: rotate(-5deg); /* Swap rotation */
}
article.post:before, article.post:after {
content: '';
top: 10px; /* Swap bottom for top */
height: 20px;
position: absolute;
z-index: -1;
background: transparent;
width: 50%;
box-shadow: 7px 6px 15px #333;
}okay, trying, Will update you soon.
Fine, its done..Thanku David.
You're welcome
