[Resolved] Styling Prev-Next arrows/buttons, thumbnails, and text

Home Forums Support [Resolved] Styling Prev-Next arrows/buttons, thumbnails, and text

Home Forums Support Styling Prev-Next arrows/buttons, thumbnails, and text

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #870584
    Callista

    Hi there!
    Sorry for opening so many topics lately. I’ve tried to fix this on my own but I’m not quite able to do what I want.

    I want the post navigation to be like the following:

    Previous Post: Next Post:
    < Thumbnail image Thumbnail image >
    Post title Post title

    If possible, I’d like the arrow itself to be a button I could hover over and click, looking like the “back to top” button. The Previous Post/Next Post labels can be hyperlinks or not, I don’t really care.

    I’ve followed the instructions in this post, and that works great, but I changed the code to make the post titles below the thumbnail images, but I’m having a problem with the arrows. For example, I modified the code thus:

    previous_post_link( '<div class="nav-previous"><p class="prev-label">Previous Article:</p><span class="prev" title="' . __('Previous','generatepress') .  '">%link</span></div>', '<span class="prev-thumbnail">' . $prevThumbnail . '</span>' . '<p class="prev-title">' . '%title' . '</p>', $category_specific );
    			next_post_link( '<div class="nav-next"><p class="next-label">Next Article:</p><span class="next" title="' . __('Next','generatepress') . '">%link</span></div>', '<span class="next-thumbnail">' .$nextThumbnail . '</span>' . '<p class="next-title">' . '%title' . '</p>', $category_specific );

    And the result is this:

    Previous Post: Next Post:
    < Thumbnail image Thumbnail image
    Post title Post title
    >

    No matter what CSS I try, the right arrow refuses to budge. Also, I’m nervous about messing with margins in CSS because it might make it look weird on mobile. Also, although this sort of accomplishes what I want, I can’t style the arrows or make them clickable.

    What else can I try?

    Thanks so much!
    Have a great day!
    Callista

    #870591
    Callista

    Oops, looks like I need to show an image. Here’s what it looks like. Note the hanging arrow on the right side.

    http://www.callistarakhmatov.com/wp-content/uploads/2019-04-16.png

    Thanks!

    #870989
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Looks like you’re close! Any chance you can send us login details so we can bypass the coming soon page?: https://generatepress.com/contact

    Let me know ๐Ÿ™‚

    #871000
    Callista

    Of course! Sending the info over now.

    #871771
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try, and be sure to remove the two blocks of custom CSS I’ve adjusted:

    .post-navigation .nav-next .next a:after {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        content: "\f105";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        speak: none;
        font-size: 2em;
        color: #000;
        position: absolute;
        right: 0;
        top: calc(50% - 30px);
    }
    
    .post-navigation .nav-previous .prev a:before {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        content: "\f104";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        speak: none;
        font-size: 2em;
        color: #000;
        position: absolute;
        left: 0;
        top: calc(50% - 30px);
    }
    
    .nav-next {
        position: relative;
        padding-right: 20px;
    }
    
    .nav-previous {
        position: relative;
        padding-left: 20px;
    }
    
    .nav-previous .prev:before {
        display: none;
    }
    #872006
    Callista

    Hi Tom,
    That’s perfect!! The only slight tweak I have is in the first 2 blocks, I removed “position:relative;” because later you have “position:absolute;” and I didn’t want them to conflict.
    It’s exactly what I was looking for. Thank you sooooo much!!
    Best,
    Callista

    #872055
    Tom
    Lead Developer
    Lead Developer

    Awesome! You’re welcome ๐Ÿ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.