- This topic has 3 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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?
Customer Support
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-shadowclass.
So you can edit theBlog posts templateblock 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!
- You must be logged in to reply to this topic.
