Logo Sections

Logo

Each of our templates come with five purpose-built logo sections that are defined by the class .logos-X, where X represents the logo section type (1-5) as shown below.

Example

								
									

										

											

												

												...
												
											
										
									
								
							

CSS For Retina Displays

For logo 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.

								
									.logo-X{
										background-image:url(../images/slider/logo-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) { 
											.logo-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

Logo Section One

A simple logo section for listing recent clients. Target .logos-1 to set background color or image. Alternatively, for background use Timber background color classes.

Example

Logo Section Two

A single, modern looking logo section. Target the .logos-2 class to set background color or image. Alternatively, for background use Timber background color classes.

Example

Logo Section Three

A modern boxed logo layout. Target the .logos-3 class to set background color or image. Alternatively, for background use Timber background color classes.

Example

Logo Section Four

Open grid logo layout. Target the .logos-4 class to set background color or image. Alternatively, for background use Timber background color classes.

Example

Logo Section Five

Simple logo slider with touch support. Logo slider settings can be found on line 269-283 of js/template-functions.js.

Example