Customize the homepage

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?

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

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.

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.

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

Aha, thanks

It worked nicely.

Much appreciated.

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;
}

Thanks

Worked well.

Your support has been awesome.

Glad to be of help