[Resolved] Customize the homepage

Home Forums Support Customize the homepage

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1321059
    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.

    #1321341
    Tom
    Lead Developer
    Lead Developer

    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?

    #1321605
    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

    #1321850
    David
    Staff
    Customer Support

    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.

    #1321870
    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.

    #1321901
    David
    Staff
    Customer 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

    #1321910
    Emmanuel

    Aha, thanks

    It worked nicely.

    Much appreciated.

    #1321937
    David
    Staff
    Customer Support

    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;
    }
    #1322300
    Emmanuel

    Thanks

    Worked well.

    Your support has been awesome.

    #1323139
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.