Archived topic
Blog Archive Styling
11 replies · Started by Edward on April 13, 2022
I'd like to style the default /blog post output. I've found the blog section under customize but options are limited.
I'm trying to find where I can get the columns to fill the page horizontally, set margin and padding, style the "Read More" button, etc.
Where would I go to accomplish those tasks?
Much appreciated.
Hi there,
first off you will want to disable the Right Sidebar for the Blog in Customizer > Layout > Sidebars. That will allow the post columns to fill the container.
Then if you want you can use a Block Element to design your post article:
https://docs.generatepress.com/article/block-element-content-template/
That's a great video and covered most of my needs.
Hoping I can also remove the underline on the linked title and set each "tile" to be a consistent height. Possible?
Much appreciated.
Most things are possible but may take a little CSS.
If you want to build out your Content Template so we can see it on the site, we can then advise on any adjustments you need. Let us know
Sorry. Yes, it's live.
Do you have any page caching ? as i am not seeing any changes to the /blog ?
Sorry, yes. Should be visible now.
No problems - thats better :)
So the link underline is a global link setting you can switch off across the site in Customizer > General.
It's best to turn that off and add CSS to underline links where you want with some CSS. Let me know if thats needed.
The title - do you want to trim the title text so only X lines of it are displayed?
Or do you just want to add some autospacing so things like the read more buttons all align ?
Auto-spacing to bring "Read More" down would be preferable. Much appreciated!
Try adding this CSS to your site:
.generate-columns-container .dynamic-content-template,
.generate-columns-container .dynamic-content-template > .gb-container,
.generate-columns-container .dynamic-content-template > .gb-container > .gb-inside-container {
display: flex;
flex-direction: column;
}
.generate-columns-container .dynamic-content-template > .gb-container > .gb-inside-container {
width: 100%;
}
.generate-columns-container .dynamic-content-template > .gb-container,
.generate-columns-container .dynamic-content-template > .gb-container > .gb-inside-container {
flex-grow: 1;
}
.generate-columns-container .dynamic-content-template > .gb-container > .gb-inside-container > :last-child {
margin-top: auto;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
That did the trick. Thank you!
Glad to hear that!
