Jump to content

Pagination styles?


Roych
 Share

Recommended Posts

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

Link to comment
Share on other sites

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);
        }
    }
}

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...