File Structure

Required Files

This product requires the following CSS files:

									<link rel="stylesheet" href="css/timber.css" />
									<link rel="stylesheet" href="css/avalanche.css" />
									<link rel="stylesheet" href="css/snowbridge.css" />
									<link rel="stylesheet" href="css/summit.css" />
									<link rel="stylesheet" href="css/templates.css" />
									<link rel="stylesheet" href="css/skin.css" />
									<link rel="stylesheet" href="css/core.min.css" />
									<link rel="stylesheet" href="css/skin.css" />

IMPORTANT: To ensure that your changes are not overwritten with product updates, edit and/or overwrite any styles in css/skin.css only. Do not edit the framework, plug-in or template style sheets. If there is a particular section you want to change but it does not appear in css/skin.css, simply copy and paste it into css/skin.css.

This product requires the following JS files:

									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src=""></script>
									<script type="text/javascript" src="js/timber.master.min.js"></script>

Note: timber.master.min.js contains all required plug-ins and now all necessary template calls and custom template functions in order to reduce the number of JS calls. Modify template functions in js/template-functions.js. Minimize the script and replace the code on line 254 of js/timber.master.min.js. For a JS minifier click here.

Special Template CSS Classes

Scrolling to Section

You can scroll to any section within a page from any link or main menu item. This is done by adding the .scroll-link class to the link you want to fire the scroll to action


You will also need give the section to which you are scrolling to the same id that was defined in the href of the "scroll-link".


Use the data-offset attribute to position the target section a bit further down or up on the page. The data-offset takes positive/negative values and represents pixels.


Important: If using the "scroll-link" class on main menu links in order to scroll between different sections within the page, keep in mind to link to at least two sections. This way the script will automatically check when each section comes 60% into view and swap the active main menu item. When a section enters into view it receives the class "in-view".

Turn the side or overlay navigation into a one page navigation as well by adding the class .one-page-nav to the side or overlay navigation wrapper.


Template JS Parameters

All plug-in calls and JS settings can be found in js/template-functions.js. Line 16-128 contains a range of variables that define selectors and parameters for plug-in calls and template functions. They are organized in this manner so that you can quickly add/remove a selector or parameter on the fly. If you are familiar with JS this is pretty straight forward, but if this is your first time editing a JS file, we have made sure to outline key variables and their purpose below:

Page Scrolling

Page scrolling speed for fullscreen sections and one-page layouts can be set on line 44. Value should be entered as an integer from 0 and upwards.

									var pageScrollSpeed = 500;


By default masonry brick transition is turned off for when the window resizes or orientation changes. This is done for a speedier reorganization of bricks. Should you prefer using transition upon window resize or orientation change, you can set the speed and activate transition on line 53 and 54 respectively. Note that speed is entered as a string and can be written either as seconds ('0.Xs') or as milliseconds ('XXXms'). Masonry brick transition is activated by setting the variable 'msnryTransResize' to true.

									var msnryTransDuration = '0.7s';
									var msnryTransResize = true;

Responsive Video

This template relies on fluidvids.js to make videos responsive. You can make any video responsive by wrapping the iframe or object in a div with the class .video-container. This is done to prevent any conflict with plug-ins such as sliders that resize videos on their own. You can alter selectors that fluidvids should search for in the DOM on line 57.

									var selectors = ['.video-container iframe', '.video-container object'];

You can also tell fluidvids which videos from what domain should be supported. This prevents fluidvids from parsing unwanted videos. This can be altered on line 58

									var players = ['', ''];
MediaElement JS

For a more custom look, this template employs mediaelement.js for video and audio. As with fluidvids, we prevent conflict with by wrapping any video or audio in a div with the class .mejs-container. You can alter selectors that mediaelement.js should search for in the DOM on line 59.

									var mejsPlayers = '.mejs-container audio, .mejs-container video';

Signup Form Parameters

All signup form messages can be found form line 107-115, for example:

									var signupFormSending = 'Aguarde...';
									var signupFormSendingButton = 'Enviando...';
									var signupFormSuccess = 'Você foi adicionado à nossa lista!';
									var signupFormError = 'Ocorreu um erro, atualize a página e tente novamente.';
									var signupFormSubscribed = 'You are already subscribed to our list.';
									var signupFormFillFields = 'Favor preencher os campos requeridos.';
									var signupFormValidEmail = 'Insira um endereço de e-mail válido';

Contact Form Parameters

All contact form messages can be found form line 119-126, for example:

									var contactFormSending = 'Aguarde...';
									var contactFormSendingButton = 'Enviando...';
									var contactFormSuccess = 'Obrigado, seu e-mail foi recebido!';
									var contactFormError = 'Ocorreu um erro, atualize a página e tente novamente.';
									var contactFormFillFields = 'Favor preencher os campos requeridos.';
									var contactFormValidEmail = 'Insira um endereço de e-mail válido';

Google Map Parameters Updated

Google Map settings can now be set as data attributes directly in the markup. Visit Google Map Sections for more information.

									var pageFadeLocation = true;

Page Transition

Set whether page transition should be used when switching form one page to the next on line 144.

									var pageFadeLocation = true

Page transition can be initiated by any element in a page; either apply the generic class .fade-location to the element that should initiate the page transition and location change, or add your own specific selectors on line 146.

									var launchLink = '.fade-location, .logo a, .navigation a, .side-navigation a, .overlay-navigation a, [class*="portfolio-"] .overlay-link, .pagination-previous, .pagination-next';

There may be situations where you want to exclude a certain button or link in a group from triggering the page transition and location change. For such situations, either apply the generic class .no-page-fade to the element that should be excluded or add your own specific selectors that should be excluded on line 147.

									var excludeLink = '.no-page-fade, .mail-link, .lightbox-link, .contains-sub-menu, .blog .pagination-previous, .blog .pagination-next, .disabled';

Template PHP Prameters

There are only two PHP files that you need to modify for this template: subscribe.php and send-email.php.

Adding Your Email Address

Add your email address on line 3 of php/send-email.php.

MailChimp API Key & List ID

Add your MailChimp API key on line 3 of php/subscribe.php.


Add your MailChimp List ID on line 4 of php/subscribe.php.



For all plug-in calls and parameters please visit the framework docs, found here.