Pagination Sections

Pagination

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.

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