[Support request] Styling Category Pages

[Dave]

I would like my category pages to look different.
I have included a link to the example I am looking for.
I understand how to get the header part using Elements but I am not sure how to generate the page content and layout.
Any help would be appreciated.

Cheers,

Dave

[Ying]

Hi Dave,

Actually the default Category Archive pages are already very close to the layout you are seeking for. In this case, I don’t think a static category page is needed.

You can set the layout at Customizing > Layout > Blog, under the archive tab.

Let me know 🙂

[Dave]

Hi Ying,

I have tried this but I don’t know how to get the sidebar not to show on just the archive pages and how do I adjust the styling and spacing of the posts. If you look at the page I have put in the private section, you can see that the post title, images, and meta don’t line up.
Any suggestions?

Cheers,

Dave

[Ying]

Hi Dave,

how to get the sidebar not to show on just the archive pages

You could use a layout element to achieve this:
https://docs.generatepress.com/article/layout-element-overview/

Choose Content(no sidebar) in Sidebar tab, choose All archives or the specific archives you don’t want sidebar to show in Display rules.

how do I adjust the styling and spacing of the posts

This part of your category archive is from WP Show Posts, not the default posts. So you’ll have to go to WP show posts to adjust the layout.
https://www.screencast.com/t/3dNIPNrLfux

The rest of the posts, you can adjust layout at Customizer > Layout > Blog > Archives. If there’s specific padding/margin you’d like to adjust, we can help with CSS later when you have your structure built.

Let me know 🙂

[Dave]

Actually, you just caught me with a test with WPSP. That didn’t work as it still shows the archives. I have taken the test away now and still need to style it with CSS as it is now.

Cheers,

Dave

[Ying]

Are you trying to make the posts into columns? If so, have you tried this?
https://www.screencast.com/t/YHrhwyX8

[Dave]

That is the way that I have it set right now. I would like to look like the original example I sent 🙂

Cheers,

Dave

[Ying]

I took a screen shot for youhttps://www.screencast.com/t/H1tZnEn0

For part A, you can achieve it by adding a generate_inside_containerhook.

For part B, to control the color of title: go to Customizing > Colors > Content >Archive Content Title.
To control the fonts go to Customizing > Typography > Headings > H2.

For part C, adjust the numbers as you prefer 🙂

/*remove the default padding*/
.archive .generate-columns {
    padding-left: 0px;
}
/*control padding*/
.archive .post .inside-article {
    padding-right: 20px;
    padding-top: 50px;
    padding-left: 20px;
    padding-bottom: 20px;
}

For part D, if you are using 3 columns, each post width set to 33%, we can use this CSS to reduce the width of the post:

.generate-columns.grid-33, .grid-sizer.grid-33 {
    width: 32%; /*the smaller the number the bigger the gap*/
}

If you want to change the bg color, go to Customizer > color > Content > Background.

I did a quick simulation, looks like this:https://www.screencast.com/t/WRIBunNx
Let me know 🙂

[Author]

Posts