Archived topic
Styling Prev-Next arrows/buttons, thumbnails, and text
6 replies · Started by Callista on April 16, 2019
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
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!
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 :)
Of course! Sending the info over now.
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;
}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
Awesome! You're welcome :)
