[Resolved] Styling Archive & Category Pages To Match Blog Page

[Michelle]

I styled a blog page using WP Show Posts Pro (WPSPP), and just discovered that WPSPP doesn’t work on Archive, Author, and Category pages (so these pages won’t match my blog page). I read in the forum that David doesn’t recommend using redirects/static pages with WPSPP, and instead suggests adding a little CSS to the native Generatepress/Wordpress setup, so that’s what I want to do.

I want the pages to look like this — https://www.reachingmyworld.com/journal (styled with WP Show Posts Pro)

This is what they look like now — https://www.reachingmyworld.com/author/michelle/ (Native Generatepress/Wordpress)

I need help to…

1. Add more space between the two columns (I tried container settings, separator space, content padding, css padding, image padding, width adjustments, and different sidebar widgets, but couldn’t get it right.)

2. Add a border (#d6d6d6) around the Read More Button and make the font size match (Make it a smaller font perhaps?)

[Michelle]

My credentials are below

[Ying]

Hi Michelle,

Try this CSS for the posts layout:

.archive .content-area .site-main .inside-article {
    margin: 0 0 4em 4em;
}

.archive .post .inside-article .post-image {
    margin-right: 1.5em;
    margin-bottom: 0 !important;
}

.archive .entry-header, .entry-summary {
    padding: 0 0 0 1em;
 
}

.archive .site-main .post.generate-columns {
    padding: 0;
    margin-bottom: 0;
}

.archive .post .inside-article {
    padding: 0;
}

And this CSS for Read More Button:

.post a.read-more.button {
    border: #d6d6d6 solid 2px;
    padding: 8px 15px;
    font-size: .8em;
}

Let me know 🙂

[Michelle]

The CSS Read More Button styled the button very well.

The CSS for post padding made the overall text columns more narrow than I wanted. Is there a way to have more site width only on a desktop view?

[Ying]

Your sites are under maintenance mode, I can’t see either of them.

Could you unlock them or provide login in the private info field?
Thanks!

[Michelle]

Sure. My information is below.

[Ying]

Hi Michelle,

Edited CSS here, give it a try:
https://generatepress.com/forums/topic/styling-archive-category-pages-to-match-blog-page/#post-1608824

You could change site width at: Customizing > Layout > Container > Container Width.

Let me know 🙂

[Michelle]

Hello Ying.

I am still trying to get last details on my Archive, Author, and Category Pages to match my Journal (Blog) page. What issues remain:

1. To look right, my author and category pages need to have a border around the Read More Button and should have a #222222 background on hover and white text on hover. (No border on hover)
An example of how it should be—https://www.reachingmyworld.com/

2. My home page meta separators | are gray but should be black
https://www.reachingmyworld.com/

3. The “by” in my meta on author and category pages should be black and not gray
author page example of what is wrong—https://www.reachingmyworld.com/author/michelle/
category page example of what is wrong—https://www.reachingmyworld.com/category/thoughts/

I am still trying to learn CSS, but it is a slow process.

[Ying]

Hi Michelle,

Here’re the CSS codes 🙂
1. For the button:

.archive .read-more-container a:hover {
    background: #222;
    color: #fff;
    border-color: #222;
}
.archive .read-more-container a {
    border: 2px solid #d6d6d6;
}

2. For the separator:

.wp-show-posts-separator {
    opacity: 1;
}

3. For the “by”:

.byline {
    color: #000;
}

Let me know 🙂

[Michelle]

Ying, how do you DO that? I am so grateful.

Thank you.

[Ying]

No problem Michelle! Just need some time and practice, you’ll be good at it too 🙂

[Author]

Posts