Archived topic
A little css help please
3 replies · Started by Scott on January 1, 2023
I have this css in the customizer from the Clinic site library.
/* GeneratePress Site CSS */
/* Comment button */
.form-submit .submit {
border-radius: 9999px;
}
/* Text highlight */
mark.gb-highlight {
border-bottom: 2px solid var(--contrast);
}
.box-shadow {
box-shadow: 0px 0px 50px -10px rgba(45,54,99,0.3);
}
/* Blog featured post */
@media (min-width: 768px) and (max-width: 1024px) {
.featured-column {
width: 100% !important;
}
}
/* Right sidebar */
.sidebar aside {
border-radius: 8px;
border: 1px solid var(--base-2);
}
@media (max-width: 768px) {
.sidebar {
margin-top: 5em;
}
}
/* End GeneratePress Site CSS */
I’m assuming that’s what makes the box around the latest or stickied post.
But how do I make that box around all of the posts on the blog page?
Hi there,
so this rule:
.box-shadow {
box-shadow: 0px 0px 50px -10px rgba(45,54,99,0.3);
}Adds the shadow to any block with box-shadow class.
So you can edit the Blog posts template block element content template in Appearance > Elements.
Select its parent Container Block, and give it an Advanced > Additional CSS Class of: box-shadow
But you would need to make some modifications to the template, ie. add padding to the content after the image. Otherwise it will touch the edge of the shadowed container.
Happy New Year!
Thank you! I thought I had added box-shadow as that’s what I did with other containers in actual blog posts. In my defense I am getting older!
Ya’ll are the freakin’ best at support.
Glad to be of help!