Reposition page break links

kokkieh · Staff · Jun 13, 2014 at 7:45 pm
Copy link

Add topic to favorites
I recently used page breaks in a post (http://kokkieh.wordpress.com/2014/06/11/when-logic-takes-a-leave-of-absence/) and I notice the navigation links for the pages appear way at the bottom, after the ads, sharing buttons and related posts where readers are likely to miss them if I don’t specifically point them out as I did in this post.

Is it possible, using CSS, to position those navigation links directly beneath the main text of the post? (I don’t have a custom design upgrade, but I’m playing around with it a bit in the free preview to see what’s possible before I make a purchase). I’m using the Twenty-Eleven theme.

The blog I need help with is: (visible only to logged in users)
vinoddalvi · Member · Jun 14, 2014 at 4:19 am
Copy link
Hi @kokkieh,

I hope you are well today and thank you for your question.

Could you please try using the following CSS code to achieve it?
```
div.page-link {
     position: absolute;
     bottom: 490px;
     left: 0;
}
div.entry-content {
     position: relative;
}
```
Best Regards,
Vinod Dalvi
kokkieh · Staff · Jun 14, 2014 at 8:29 am
Copy link
@Vinod

Thanks. I had to play around with the bottom pixels a bit (300px turned out to be right) but otherwise it worked like a charm.

Next question: the links now overlap the advertisement area. How do I add a space below the page-link? I tried using both padding and margin codes, but they just move the page-link upwards so it overlaps the main text.
vinoddalvi · Member · Jun 15, 2014 at 4:53 pm
Copy link
Hi @kokkieh,

Thank you for your reply.

I don’t know what you are referring as advertisement area.

Are you referring social networking icons area as advertisement area?

If yes then you can try using the following CSS code instead of previous so that it won’t overlap.
```
div.page-link {
     position: absolute;
     bottom: 500px;
     left: 0;
}
div.entry-content {
     position: relative;
}
div#jp-post-flair {
margin-top: 50px;
}
```
Regards,
Vinod Dalvi
kokkieh · Staff · Jun 15, 2014 at 5:19 pm
Copy link
Hi Vinod

I’m referring to the advertisements wordpress displays on our blogs. On my blog it appears between the body text and the sharing icons.

But actually your answer helped me to figure it out. I couldn’t find what code referred to the ad box, but I managed to find it now in the style sheet. If I substitute “jp-post-flair” with “wpa” in the code you provided and play around with the pixel values I get the result I want.

Thank you very much for your help.

KokkieH
vinoddalvi · Member · Jun 15, 2014 at 5:22 pm
Copy link
Hi @kokkieh,

Awesome, great to see you got that figured out.

You are most welcome here, if I can be of any further assistance please don’t hesitate to ask :)

Cheers,
Vinod Dalvi

No items found.