Pagination sections can be added to projects, posts or to the blog index. Each of our templates come with four purpose-built pagination sections that are defined by the class .pagination-X, where X represents the pagination section type (1-4) as shown below.
...
For pagination sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.
.pagination-X{
background-image:url(../images/slider/pagination-bkg-image.jpg);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.pagination-X{
background-image:url(../images/slider/[email protected]);
}
}
A simple pagination section for with icons. Target .pagination-1 to set background color or image. Alternatively, for background use Timber background color classes.
A full width pagination section. Target the .pagination-2 class to set background color or alternatively use Timber background color classes. Target .column.prev and .column.next respectively for adding background images.
Traditional pagination with left/right arrows and page numbers. Target the .pagination-3 class to set background color or image. Alternatively, for background use Timber background color classes.
Pagination with buttons. Target the .pagination-4 class to set background color or image. Alternatively, for background use Timber background color classes.
Pagination with buttons. Target the .pagination-4 class to set background color or image. Alternatively, for background use Timber background color classes.