Plugin with Buttons for navigation within post

  • Hi All,

    I have few long post and have inserted a page break between different points within them. Currently the navigation are appearing to be numbered with less visibility. I am looking to change this to a button clearly visible.

    Any leads on the code change or plugin that might do this trick is highly appreciated.

    Thanks,
    Somil

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Somil

    You just need to apply your preferred styling to the .page-nav class

    Do you want some CSS code to point you in the right direction ?

    Thread Starter somilbhargava

    (@somilbhargava)

    Sure. That would be great.

    Thanks epicdevspace

    Thread Starter somilbhargava

    (@somilbhargava)

    Hi,

    Thank you epicdevspace for helping me out.

    This is what I was trying – using the code below I was able to come with this (copy and paste to see what this would look like here Remove the apostrophe before the links. Would you be able to help me out as to where this code should go in the theme –

    1. For the pagination to be available
    On all the pages
    Only on the homepage
    Only on the post/article page
    For all the other pages
    2. Include a text “Pages” within the pagination block itself not linked to anything.

    My theme supports custom theme so where should these be targeted. Help or links to the required details is much appreciated. Apologies for multiple follow ups.

    <!DOCTYPE html>
<html>
<head>
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: white;
    float: left;
    padding: 16px 40px;
font-size: 35px;
    text-decoration: none;
background-color: #000;
border-radius: 0px;
}

ul.pagination li a.active {
    background-color: #DF0101;
    color: white;
    border-radius: 0px;
}

ul.pagination li a:hover:not(.active) {background-color: #fff;
color: black;}
</style>
</head>
<body>

<ul class="pagination">

<li><a href="#">?</a></li
</li>
<li><a href="#">1</a></li
</li>
<li><a href="#">2</a></li
</li>
<li><a href="#">3</a></li
</li>
<li><a href="#">4</a></li
</li>
<li><a href="#">5</a></li
</li>
<li><a href="#">6</a></li
</li>
<li><a href="#">7</a></li
</li>
<li><a href="#">?</a></li
</body>
</html>

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    Thanks,
    Somil

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Plugin with Buttons for navigation within post’ is closed to new replies.