Pagination Sections

Pagination

Pagination sections can be added to projects, posts or to the blog index. Each of our templates come with four predesigned pagination sections that are defined by the class .pagination-X, where X represents the pagination section type (1-4) as shown below.

Example
								
									
...
CSS For Retina Displays

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

Pagination Section One

A simple pagination section for with icons. Target .pagination-1 to set background color or image. Alternatively, for background use Timber background color classes.

pagination example 1
Example

Pagination Section Two

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.

pagination example 2
Example

Pagination Section Three

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 example 3
Example
								
									

Pagination Section Four

Pagination with buttons. Target the .pagination-4 class to set background color or image. Alternatively, for background use Timber background color classes.

pagination example 4
Example

Pagination Section Five New

Pagination with buttons. Target the .pagination-4 class to set background color or image. Alternatively, for background use Timber background color classes.

pagination example 4
Example