How to show next/previous page arrows at right/left edges of book?

by · January 22, 2017

Questions › Category: PDF Light Viewer › How to show next/previous page arrows at right/left edges of book?
0
Vote Up
Vote Down
Jeff asked 8 years ago
Hello
Thank you for this brilliant plugin!
Using the toolbar next and previous page arrows or the thumbnail navigation usually requires scrolling up or down first, which tends to disturb the flow of reading. It would be perfect if the next and previous page arrows were positioned at the right and left edges of the book.
I will be most grateful for any help to achieve this.
Thanks!

2 Answers
0
Vote Up
Vote Down
support answered 8 years ago
Hello Jeff,
Thank you for the kind words.
For now you can achieve this kind of style for navigation by following the steps below:
1. copy template file /wp-content/plugins/pdf-light-viewer/templates/shortcode-pdf-light-viewer.php to your current theme folder:
2. add html somewhere inside <div class=”pdf-light-viewer js-pdf-light-viewer”> tag inside template:

<a href="#!" title="Previous" class="pdf-light-viewer-previous-page js-pdf-light-viewer-previous-page">
 <i class="icons slicon-arrow-left"></i>
</a>
<a href="#!" title="Next" class="pdf-light-viewer-next-page js-pdf-light-viewer-next-page">
 <i class="icons slicon-arrow-right"></i>
</a>

3. Add css styles:

.pdf-light-viewer-previous-page {
 position: absolute;
 left: -50px;
 top: 50%;
 font-size: 70px;
}
 
.pdf-light-viewer-next-page {
 position: absolute;
 right: -50px;
 top: 50%;
 font-size: 70px;
}

In result you should receive something similar to this https://nimbus.everhelper.me/client/notes/share/735748/6gr4g762dtituq33ged1

1
Vote Up
Vote Down
Jeff answered 8 years ago
Excellent, thank you for your help!
This worked perfectly, and I could easily tweak the styling to achieve exactly what I had in mind.
Your support is amazing, and thank you again for your great plugin!