Pagination styles?

[Roych]

Hello,

I'm new to PW and need some help. I created a simple gallery which is working fine, but I can't figure it out how to create some styling for pagination.

I use this for pagination:

<?= $a->renderPager() ?>

My html look like this:

<div class="numeric-pagination">
	<a href="#" class="button"><i class="icons icon-left-dir"></i></a>
	<a href="#" class="button">1</a>
	<a href="#" class="button active-button">2</a>
	<a href="#" class="button">3</a>
	<a href="#" class="button"><i class="icons icon-right-dir"></i></a>
</div>

I hope you understand what I want to create.

Thank you

R

[adrian]

If you look at Example #2 : https://processwire.com/api/modules/markup-pager-nav/ you can see how to output pagination links exactly how you want.

[Zeka]

Here are my code snippets for that

<?php
                echo $all_products->renderPager(array(
                    "nextItemLabel" => __("След."),
                    "previousItemLabel" => __("Пред."),
                    "firstNumberItemClass" => "pagination__item--first-num",
                    "lastNumberItemClass" => "pagination__item--last-num",
                    "previousItemClass" => "pagination__item--prev",
                    "nextItemClass" => "pagination__item--next",
                    "firstItemClass" => "pagination__item--first",
                    "lastItemClass" => "pagination__item--last",
                    "currentItemClass" => "pagination__item--active",
                    "listMarkup" => "<div class='pagination'><ul class='pagination__list'>{out}</ul></div>",
                    "itemMarkup" => "<li class='pagination__item {class}'>{out}</li>",
                    "linkMarkup" => "<a class='pagination__item-link' href='{url}'><span>{out}</span></a>"
                ));
        ?>

and SASS styles ( mixins from foundation ) 

$module: 'pagination';

.#{$module} {
    text-align: center;
    background: $white;
    border-radius: $global-radius;
    padding: rem-calc(5);
    box-shadow: rem-calc(0 1 4 0) rgba(0, 0, 0, 0.1);

    &__list {
        @include pagination-container;
        display: inline-block;
        margin-bottom: 0;

    }

    &__item {
        display: inline-block;
        padding: rem-calc(5) rem-calc(10);

        &--active {

            a {
                text-decoration: underline;
            }
        }

        a {
            @include button-base();
            @include button(false, $brand-darker, darken($brand-darker, 5), $white, solid);
            border-radius: $global-radius - 2;
            margin-bottom: 0;
            padding: rem-calc(3 7);
        }
    }
}

 

[Roych]

Nice, thank you, works perfect

R