[Resolved] Customize the homepage

[Emmanuel]

Hi,

I just realized this forum over a few weeks ago and it has been helpful in customizing my blog.

I would like your help in setting up the homepage & archive pages like this one https://www.cloudliving.com/blog/

I have created the three columns the only thing remaining is aligning the title and meta in the center like in that blog and styling the navigation numbers at the bottom exactly like that.

I will appreciate your help.

[Tom]

Hi there,

This should help with centering:

.generate-columns {
    text-align: center;
}

It looks like you’re using an infinite scroll button for pagination right now. Do you still want to use regular pagination?

[Emmanuel]

Thanks Tom,

I have implemented the CSS and yes I would like the regular pagination like the one at https://www.cloudliving.com/blog/

I have removed the infinite scroll.

While at it, I would appreciate if you point me to how to implement a comment style like the one here https://www.cloudliving.com/generatepress-review/

Thanks

[David]

Hi there,

try this CSS for the paging navigation:

.paging-navigation{
    text-align: center;
}
.paging-navigation .page-numbers {
    margin: 0 10px;
    display: inline-block;
    text-align: center;
    min-width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 4px;
    color: #5a5a5a;
    border: 1px dashed #ccc;
    font-weight: 600;
    font-size: 14px;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
    padding: 0 10px;
}
.paging-navigation .page-numbers:hover, .paging-navigation .page-numbers.current {
    background: #078ade;
    color: #fff;
    border-color: #078ade;
}

That site is using a plugin for the comments.
If you have a post with comments we can help some similar styling – let us know.

[Emmanuel]

Thanks David

This works perfectly. Is it possible to display the navigation on one line on Mobile?

As for comments, this post has many comments https://kanjwa.com/tala-loan-app/ let me know if it can be done.

Another thing I have noticed on Mobile is that on the homepage there is no spacing on the right.

Thanks for the support.

[David]

Hmmm… not sure about one line for mobile. But give this a try:

@media(max-width: 768px) {
    .generate-columns-container  {
        padding-right: 20px !important;
    }
    .separate-containers .paging-navigation {
        padding:  10px 5px !important;
    }
    .paging-navigation .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
    .paging-navigation .page-numbers {
        margin: 4px !important;
        box-sizing: border-box;
        flex: 1 0 12%
    }
    .paging-navigation .page-numbers.prev, .paging-navigation .page-numbers.next {
        order: 50;
        flex: 1 0 40%;
        margin-top: 1em;
    }
}

The missing padding is because your cache plugin is messing up the CSS order. I included a ‘fix’ for that in the above CSS.

If that works ill take a look at the comments

[Emmanuel]

Aha, thanks

It worked nicely.

Much appreciated.

[David]

That is pretty nice 🙂

And try this CSS for the comments:

.comment,
.comment-list>.comment:first-child {
    border: 1px solid #ccc;
    margin-bottom: 1em;
    border-radius: 5px;
 }
.comment-body {
    padding-bottom: 10px;
}
footer.comment-meta {
    padding-left: 30px;
}
.comment-content {
    margin-top: 0.5em;
    border: none;
}
.comment .children {
    margin-left: 30px;
    margin-right: 30px;
    padding-left: 0;
    border: 0 !important;
}
.comment .children .comment {
    border: 0;
    border-left: 2px solid #ccc;
    border-radius: 0;
}

[Emmanuel]

Thanks

Worked well.

Your support has been awesome.

[David]

Glad to be of help

[Author]

Posts