Moving previous/next buttons

  • Author
    Posts
  • #1190900

    Hi there,

    Is there a way of moving these to the bottom of the posts, below the comments?

    Thanks!

    The blog I need help with is tpiytesting.wordpress.com.

    #1191029

    This can be done, but you might want to consider that if you get a post with a lot of comments, people may not scroll down to the very bottom to find the next/previous links, rendering them more or less useless. The problem is though that the way the XHTML (markup) is structured, it would be difficult to put the next/previous links anywhere else.

    This would move the links down below the comment reply box, all the way at the bottom. The other meta data (author, date, categories and leave a reply link) then shift to the left taking the space that the next/previous links used to occupy.

    #content {
    padding: 0 0 20px;
    }
    
    #nav-above {
    bottom: 10px;
    position: absolute;
    }
    #1191121

    Thanks so much for your reply. That code though places the next/previous buttons at the way bottom of the post, past the footer.

    Is there a way of doing it prior to the title?
    Also while I’ve got you, is there a way of removing the byline of the piece? This project is submission focused but we will be posting from our end for legal reasons, so we’ll be putting the byline inside the posts itself.

    Thanks!

    #1191124

    You said,

    below the comments

    I assumed that was where you wanted them.

    The way the XHTML (markup) is structured in this theme makes it nearly impossible to place the links above the sharing stuff. The reason for this is because you have to use position: absolute and that doesn’t float with other elements so when a post is longer or shorter, the links would stay right where they were placed (absolute position) and not adjust with the length of the post.

    #1191125

    This gets rid of the byline and the trailing / .

    .entry-meta .byline, .online .main-separator {
    display: none;
    }
    #1191127

    Thanks for that, is there a way of placing the next/previous buttons above the post title?

    #1191142

    Give this a try and see what you think. Moving the nav links to the top of the post will work cleanly.

    #content {
    position: relative;
    }
    
    #nav-above {
    position: absolute;
    text-align: left;
    top: 0;
    }
    
    .post_title {
    padding-top: 20px;
    }
    #1191154

    That works great, thanks!
    The only thing is now the dateline has moved to the very left.. is there a way of lining that bit up with the body text?

    Thanks very much for all your help!

    #1191193

    The width of .entry-content is currently 710px, so it might work to make the title and meta data container area the same width and center it so it matches .entry-content. Try out this example to see what I mean:

    .single .post_title {
    	width: 710px;
    	margin: 0 auto;
    	overflow: visible;
    }
    .single .post_title h1,
    .single .post_title h2 {
    	margin: 0;
    	padding-top: 30px;
    }

    I opted to left align the headings but you could choose to center them as well as the post meta data instead if you want. the CSS above should give you a good starting point.

    #1191194

    That is excellent, thank you @designsimply!

    Now just wondering if there is a way of getting the pages and the posts to match up? The pages are currently indented to the right…

    Thanks!

    #1191196

    Try removing the “.single” part from the example above and also add this:

    body.page .entry-meta {
    	margin: 0;
    }

    Make sure to test the result on all types of pages (post, pages, archives, etc).

    #1191197

    That’s brilliant, thanks so much!

    #1191198

    Cheers :)

The topic ‘Moving previous/next buttons’ is closed to new replies.