Archived topic
Customize Formatting and Metadata Order in Blog Archives
9 replies · Started by Suggie on February 21, 2018
Hi there. N00b here.
Is it possible to customize the blog archives? I went to the following and did what I could in all sections: Layout -> Blog -> Archives, but there are a few things I'd like to change:
- too much white space between each element
- change font formatting in title (I played around and realize it's H2, but I don't want to change my general H2 settings, and I'd like to use a smaller size)
- the order of the metadata: would like to play around with moving the categories/tags or date to different spots
- READ MORE doesn't appear anywhere, whether or not I enable the button. Not sure where I went wrong there.
The home page I provided has an example of the general format I'm trying to match in the Latest Posts section. I used Elementor Posts to format that section and, although not ideal, I'd like to try to match the look for consistency as closely as possible.
Thanks!
HI there,
Can you guide me to the blog page in question?
Currently the blog menu item just redirect back to the home page.
Hi Leo.
Example of how it looks now when clicking on any tag: https://adventuresofthegassysquirrel.com/tag/las-vegas/
Example of what I'd like it to look like (custom category page): https://adventuresofthegassysquirrel.com/category/eat/
Just referring to the setup of the blog posts listed (not the header/banner).
Thanks!
Hi there,
So I assume there is no way to use Elementor create custom tag page like custom category page?
Feel like that's the best way if you want the style to be consistent.
Border and shadow aren't hard using the CSS but the hover might bit difficult.
Hi Leo.
I'm new to this, so I might be wrong, but it seems that I would have to make a different template for every single tag, which would be too tedious (I only have two categories, so making custom category pages was not tedious.)
When I read around other posts in the support forum, I got the feeling that I can't use a page builder for the general archives. If you know of a way where I can create one template and get it to automatically recognize what tag was chosen by the reader, that would be great, but that's not a GP problem, so I don't expect you to solve that one for me.
Assuming I can't use a page builder for tags, can you give me any pointers to tweak the format of the GP archives layout? The main things I'd like to do are to change the font styles (size, weight, etc.) and the spacing between all the elements (too much white space). Border/shadow would be nice if that's an easy fix. I don't care about the hover.
Thanks!
Yeah you will have to ask Elementor on that one.
The title font size can be adjusted in Typography > Headings > H2.
This CSS should reduce the space below featured images:
.post-image-above-header .inside-article .post-image,
.post-image-above-header .inside-article .featured-image {
margin-bottom: 0.5em;
}
The excerpt font size is in Typography > Body.
Border:
.generate-columns .inside-article {
border: 1px solid #000;
}
Then content padding setting: https://docs.generatepress.com/article/content-padding/
Let me know if this gets you closer.
Thanks, Leo. It's definitely closer now. Just two things I'd like to request:
(1) I don't want to mess with the H2 and Body settings of the typography since it will mess up the rest of the website. Is there a way that I can go in and just control the typography of the title and excerpt of the archives?
(2) I adjusted the padding, which definitely helped, but I don't know how to adjust the white spaces above and below the excerpt. Is that possible?
Thank you!
(1) This will to only change the title and excerpt font size on tag page:
.tag h2.entry-title {
font-size: 20px;
}
.tag .entry-summary {
font-size: 15px;
margin-top: 0.5em;
}
(2) Space above excerpt is included the second block of code above.
Space below excerpt should be this:
footer.entry-meta {
margin-top: 0.5em;
}
Let me know :)
You're the best! Thank you so much!
No problem :)