Prev Next Link Formatting

Please refer to screen shot: https://www.screencast.com/t/y0bjmi3tKqK2

The Pagination links for Previous and Next for the calendar is small, hard to read and missing a divider line.

Q: how do I add a divider line so it reads "Prev / Next"?

Q: how do I make the font bigger and bolder?

Q: can I duplicate the links and add it to the top right of the calendar?

Please advise.

  • Predrag Dubajic
    • Support

    Hey David,

    Q: how do I add a divider line so it reads "Prev / Next"?

    Q: how do I make the font bigger and bolder?

    You can add divider and adjust font size and weight with this CSS code:

    .event-pagination a {
        font-size: 25px;
        font-weight: bold;
        margin-top: 8px;
        display: inline-block;
    }
    
    .event-pagination a:first-of-type:after {
        content: " /";
    }

    Q: can I duplicate the links and add it to the top right of the calendar?

    To do this we'll need a bit of jQuery to clone the element before the calendar, something like this should do the trick:

    function duplicate_navigation() { ?>
    
    <script type="text/javascript">
    	jQuery( document ).ready(function() {
    	    jQuery( ".event-pagination" ).clone().prependTo( ".wpmudevevents-list" );
    	});
    </script>
    
    <?php }
    add_action( 'wp_footer', 'duplicate_navigation' );

    You can add that code in your child theme function.php file or create mu-plugin plugin.

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hello, David!

    Q: how do I align the pagination to the right side of the calendar?

    You can do this by adding an additional line of CSS to your Custom CSS, preferably right below the CSS that Predrag shared with you:

    .event-pagination {text-align:right;}

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.