Archived topic
Borders around sections
11 replies · Started by Eric on November 25, 2018
I would like to add borders to the sections on my homepage. I've already added the following code to Simple CSS to create space between the sections but now I want borders to make the sections stand out more.
.generate-sections-container {
margin-top: 20px;
}
It would be ideal if the sections were formatted to look just like the blog posts on the archive or category pages. My homepage is http://www.ericsturgeon.com and an example of the formatting I want to replicate is at: http://www.ericsturgeon.com/category/maine/
Hi there,
Try this CSS:
.generate-sections-inside-container {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Yessss. Perfect. Thank you!
No problem :)
Hello, about 4 years later, the borders between my sections are no longer appearing. I'm not sure which update caused them to no longer appear. I have the following CSS in "Simple CSS" on my homepage: https://www.ericsturgeon.com
.generate-sections-container {
margin-top: 5px;
}
.generate-sections-inside-container {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
Hi Leo. Previously, there was space between the sections and it was grey, like the area outside of the content, similar to my blog archive pages: https://www.ericsturgeon.com/blog/category/maine/downeast/
There was also a shadow around each section. Now it looks the same regardless if I have this simple CSS on the homepage or not:
.generate-sections-container {
margin-top: 5px;
}
.generate-sections-inside-container {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
I actually don't see this CSS being loaded:
.generate-sections-container {
margin-top: 5px;
}Have you added or remove any CSS recently?
No, I haven't changed anything recently. I have the following CSS in "Additional CSS":
/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
/* GeneratePress Site CSS */
.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);
}
/* Featured widget */
.sidebar .widget:first-child {
background-color: #ffffff;
color: #fff;
}
.sidebar .widget li {
margin-bottom: 0px;
}
.button.light {
background: #fff;
color: #000;
}
.button.light:hover {
background: #fafafa;
color: #222;
}
.separate-containers .page-header {
background: transparent;
padding: 1px 0;
}
.page-header h1 {
font-size: 30px;
}
@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}
} /* End GeneratePress Site CSS */
Hi Eric,
It seems that there is a syntax error in your “Simple CSS” code.
Specifically, right above this code:
.generate-sections-container {
margin-top: 5px;
}there is an extra }.
Kindly remove it and see how it goes.
Hope to hear from you soon.
Thank you, that brought back the page background in-between the sections. I'm still not sure why I don't have the shadow effect around the sections anymore, but I can live without it.
This is the CSS I have for the shadows:
.generate-sections-inside-container {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
It should work. I might not just be apparent or visible enough.
Try modifying it to something like this just to test:
.generate-sections-inside-container {
border: 3px solid rgb(19 28 40);
box-shadow: 0 0 40px rgb(0 0 1 / 50%);
}Kindly clear all caching mechanisms afterwards as well.
Right now, I’m still seeing the excess } from my end.
Hope to hear from you soon.
