Foundry Documentation

Foundry Documentation

Introduction

Thankyou for purchasing Foundry HTML Template with Variant Page Builder. This documentation will help to familiarise you with how Foundry is structured and how to use the template features. At times, you may need further assistance if something is either not covered, or clear in the documentation. In these instances, you can open a support ticket at our dedicated support forum: Medium Rare - Ticksy

Many thanks,
Medium Rare

Notice:

While this documentation covers global template features, the individual element pages found in the download package provide advice on individual elements and how they can be used and modified.

List Elements
- Buttons
- Tabs
- Progress Bars
- Accordions
- Alerts
- Form Inputs
- Countdowns
- Modals
- Pricing Tables
- Icon Boxes
- Widgets
- Typography
- Grid Structure
- Text & Image
- Intro Sections

Before We Begin

I'm getting WordPress install errors!

Foundry is a HTML template, not a WordPress theme. It does not work with WordPress out of the box. If you'd like a refund, you'll need to get in touch with Envato support, as they handle all payments for Themeforest.
I've purchased, but Variant still wont let me export!

Ensure that you are opening Variant from the builder.html file inside the variant folder of your download package. You don't need to use the builder from our demo server.

Structure

Foundry is a multipage HTML template. All pages are housed within their own .html file and reside in the root directory of the template. All pages require access to the template's CSS and Javascript files, these files reside within the CSS and JS directories.

Structure FAQ

What do I need to upload to my server?

You'll need to upload all HTML files along with all directories (css,js,mail,video,img) in the structure that they appear in your download package. That is, all HTML files should reside in the root directory, and all other files should reside inside their associated folder.
Should I upload the Variant folder?

No, you don't need to upload the Variant folder - the builder works offline and does not require a server to function.
I uploaded the template but the page looks strange and bare!

This is usually a result of the CSS folder not being uploaded correctly. Ensure the CSS folder is uploaded in the same directory as your HTML files so they have correct access.
Where should I make my custom CSS style changes?

Ensure that you only make style changes inside custom.css. This will make it much easier to update the template later - you'll only need to preserve your custom.css file.

Grid

Foundry is based on Bootstrap 3.1 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones).

            				
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
		</div>
	</div>

For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation here

Spacing

Foundry uses helper classes to space elements out from one another on the page. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

Example: You have a large h1 that you'd like to push 80px away from the subsequent content by adding margin to the bottom. You can use Foundry's spacing classes to help:

            				
	<h1 class="mb80">I'm a large heading</h1>
	<p>
		....
	</p>
	<div>
		...
	</div>

If we wanted to use padding on that element we would have used 'pb' instead of 'mb' where 'pb' refers to 'padding-bottom'.

What about mobile?

Similarly, we can use 'mb-xs-40' if we wanted to halve that margin amount on a mobile device where 80px of margin might be too large.

            				
	<h1 class="mb80 mb-xs-40">I'm a large heading</h1>
	<p>
		....
	</p>
	<div>
		...
	</div>

Note, we still have mb80 so the heading pushes 80px on desktop / tablet and 40px on mobile. Mobile classes will override when the screen's width is below 767px.

Available classes

Foundry's spacing works on multiples of 8. This means you can use classes as such: mb8, mb16, mb24, mb32, mb40, mb48 and so on, but you can't use 'mb61' as it's not a multiple of 8.

List Of Classes

                                       
	.mb0{ margin-bottom: 0 !important; }
	.mb8{ margin-bottom: 8px; }
	.mb16{ margin-bottom: 16px; }
	.mb24{ margin-bottom: 24px; }
	.mb30{ margin-bottom: 30px; }
	.mb32{ margin-bottom: 32px; }
	.mb40{ margin-bottom: 40px; }
	.mb48{ margin-bottom: 48px; }
	.mb56{ margin-bottom: 56px; }
	.mb64{ margin-bottom: 64px; }
	.mb72{ margin-bottom: 72px; }
	.mb80{ margin-bottom: 80px; }
	.mb88{ margin-bottom: 88px; }
	.mb96{ margin-bottom: 96px; }
	.mb104{ margin-bottom: 104px; }
	.mb112{ margin-bottom: 112px; }
	.mb120{ margin-bottom: 120px; }
	.mb160{ margin-bottom: 160px; }

	.mt0{ margin-top: 0 !important; }
	.mt8{ margin-top: 8px; }
	.mt16{ margin-top: 16px; }
	.mt24{ margin-top: 24px; }
	.mt32{ margin-top: 32px; }
	.mt40{ margin-top: 40px; }
	.mt48{ margin-top: 48px; }
	.mt56{ margin-top: 56px; }
	.mt64{ margin-top: 64px; }
	.mt72{ margin-top: 72px; }
	.mt80{ margin-top: 80px; }
	.mt88{ margin-top: 88px; }
	.mt96{ margin-top: 96px; }
	.mt104{ margin-top: 104px; }
	.mt112{ margin-top: 112px; }
	.mt120{ margin-top: 120px; }

	.p32{ padding: 0 32px; }
	.p24{ padding: 24px; }
	.p0{ padding: 0; }
	.pt0{ padding-top: 0; }
	.pt8{ padding-top: 8px; }
	.pt16{ padding-top: 16px; }
	.pt24{ padding-top: 24px; }
	.pt32{ padding-top: 32px; }
	.pt40{ padding-top: 40px; }
	.pt48{ padding-top: 48px; }
	.pt64{ padding-top: 64px; }
	.pt72{ padding-top: 72px; }
	.pt80{ padding-top: 80px; }
	.pt88{ padding-top: 88px; }
	.pt96{ padding-top: 96px; }
	.pt104{ padding-top: 104px; }
	.pt112{ padding-top: 112px; }
	.pt120{ padding-top: 120px; }
	.pt160{ padding-top: 160px; }
	.pt180{ padding-top: 180px; }
	.pt240{ padding-top: 240px; }

	.pb0{ padding-bottom: 0; }
	.pb8{ padding-bottom: 8px; }
	.pb16{ padding-bottom: 16px; }
	.pb24{ padding-bottom: 24px; }
	.pb32{ padding-bottom: 32px; }
	.pb40{ padding-bottom: 40px; }
	.pb48{ padding-bottom: 48px; }
	.pb56{ padding-bottom: 56px; }
	.pb64{ padding-bottom: 64px; }
	.pb72{ padding-bottom: 72px; }
	.pb80{ padding-bottom: 80px; }
	.pb88{ padding-bottom: 88px; }
	.pb96{ padding-bottom: 96px; }
	.pb104{ padding-bottom: 104px; }
	.pb112{ padding-bottom: 112px; }
	.pb120{ padding-bottom: 120px; }
	.pb160{ padding-bottom: 160px; }
	.pb180{ padding-bottom: 180px; }
	.pb240{ padding-bottom: 240px; }

Navigation

Foundry features a robust multi-function navigation with support for double level dropdowns, mega menus (multi-column dropdown) and widgets.

Navigation Structure

The nav bar is made up of 'modules' each function inside the nav bar is considered a module (eg: The logo is a module, the menu is a module, and the widgets are modules).

            				
	<div class="nav-bar">
		<div class="module left">
			<img alt="logo" src=".." />
		</div>
		<div class="module-left">
			<ul class="menu">
				<li>...</li>
				<li>...</li>
			</ul>
		</div>
	</div>

Navigation Classes

By default the nav bar will appear as a white bar at the top of the page. You can modify this appearance in a couple of ways by adding a class to the 'nav' element:

.bg-dark - Will make the background of the nav dark and the text content of the nav light.
.absolute - Will make nav overlap the first section on the page by making is 'position: absolute'
.transparent - Will remove the background color from the nav, use this class in conjunction with '.absolute' to achieve the overlay effect.

Navigation FAQ

How do I make the logo bigger / smaller?
You can control the height of the logo using the .logo selector in CSS. By default the logo is set to a max-height of 60% of the nav bar. To adjust this add the following code to your custom.css file:
```
                                        
	.logo{ max-height: ##%; }
                                        
```
Where ## is your desired percentage. Naturally, if you wanted a bigger logo, make it greater than 60% and less, for a smaller logo. Keep in mind the logo also has a max-width of 150px, so if necessary, you may need to set the 'max-width' to 'none' if your logo is quite large.
How do I make the nav bar itself bigger / smaller?
You can control the height of the nav using the .nav-bar selector in CSS. By default the nav is set to a max-height of 55px. To adjust this add the following code to your custom.css file:
```
                                        
	.nav-bar{ height: ##px; max-height: ##px; line-height: (##-3)px; }
                                        
```
Where ## is your desired height. Ensure the height and max-height are the same and the line-height is 3 pixels less than the height and max-height, this will ensure the logo and menu remain vertically centered inside the nav bar.

I want to add more columns to the mega menu

The mega menu is structured in a list arrangement. Each column is a 'li' list item with a 'span' for column title and 'ul' inside for the containing elements. To add columns, simply copy a list item:

											
	<ul class="mega-menu">
		<li>
			<ul>
				<li>
					<span>Column Title</span>
				</li>
				<li>
					<a href="#">Menu Link</a>
				</li>
			<ul>
		</li>
		
		<li>
			<ul>
				<li>
					<span>Column Title</span>
				</li>
				<li>
					<a href="#">Menu Link</a>
				</li>
			<ul>
		</li>
	</ul>

Colour Schemes

Foundry has a number of included colour schemes that you can switch to at any time. Each colour scheme has its own CSS file (eg: theme-red.css). To switch colour schemes, simply replace the theme.css reference in the head of your document with the appropriate colour scheme css file.

Colour Helper Classes

When creating your own elements you may wish to use the template's colours in order to keep things visually consistent. You can do this with the predefined colour classes. Add these classes to any HTML element to modify their colour properties:

.bg-dark - Will make the background of an element dark and the text light.
.bg-secondary - Will make background of an element an off-white, light grey color. This is useful when you want to breakup a mostly white page.
.bg-primary - Will make the background of an element the primary theme color (in this case green) and the text, white.

Sliders

Foundry uses the Flexslider jQuery plugin to handle all slider behaviour including image sliders and text sliders. The appearance of the slider will depend on which class you use to initialize it. Slider elements are always structured as so:

            				
	<div>
		<ul class="slides">
			<li>...</li>
			<li>...</li>
		</ul>
	</div>

Initialisation Classes

Depending on your purpose for the slider, you can choose to include or exclude particular controls. Use these classes on the parent element of your 'slides' ul to initialise.

.slider-all-controls - Includes both the arrow controls and the paging controls.
.slider-arrow-controls - Includes arrow controls, but not paging controls.
.slider-paging-controls - Includes paging controls, but not arrow controls.
.slider-thumb-controls - Includes thumbnail paging controls, this is only relevant for image sliders.

Sliders FAQ

How do I change the slider timing?
You can do this by opening scripts.js and around line 259, locate your slider type (all-controls, arrow-controls etc). Inside the curly brackets {} add the option: slideshowSpeed followed by a number in milliseconds like so:
```
	$('.slider-arrow-controls').flexslider({ controlNav: false, slideshowSpeed: 9000 });
                                        
```
The above options would change the timing to 9 seconds per slide.
How do I adjust the slide height?
The easiest way to adjust the slide height is to give your slider a custom class eg: 'my-slider', then inside your custom.css, make a rule for this class to define the height of the slides:
```
	.my-slider .slides li{ height: ##px; }
                                        
```
Where '##' is your desired height in pixels.

Backgrounds & Parallax

Many elements in Foundry have images that cover the background. Often, these elements also have the parallax effect enabled.

To cover an element with a background image, follow this standard:

            				
	<section class="element-to-be-covered">
		<div class="background-image-holder">
			<img alt="Image" src="img/background.jpg" />
		</div>
		
		<div class="container">
			<div class="row">
				...
			</div>
		</div>
	</section>

Enabling Parallax

You can easily switch on or off the parallax effect by adding (or removing) the class 'parallax' from the parent element. You should also add the class scroll-assist to the body element when using parallax to ensure the smoothest scrolling experience. If we wanted the above mentioned section exhibit parallax, we would modify it as so:

            				
	<section class="element-to-be-covered parallax">
		<div class="background-image-holder">
			<img alt="Image" src="img/background.jpg" />
		</div>
		
		<div class="container">
			<div class="row">
				...
			</div>
		</div>
	</section>

Backgrounds & Parallax FAQ

Why isn't parallax working on mobile?

The parallax effect is not yet able to be implemented reliably on mobile devices, it has therefore been disabled.
My background image is being cropped!
The background will always be fitted to the containing parent using the CSS 'background-size: cover' property. This means that if your parent element is relatively short (<400px) and your background image is tall (>900px) then you may experience some cropping toward the center of the image. You can adjust how the background is placed on the parent by tweaking the 'background-position' property of the element. To do this:

HTML:
```
										
	<section class="my-section">
		<div class="background-image-holder">
			<img alt="Image" src="img/background.jpg" />
		</div>
		
		<div class="container">
			<div class="row">
				...
			</div>
		</div>
	</section>
										
```
CSS:
```
										
	.my-section{ background-position: X% Y% !importaht; }
										
```
Where X and Y relate to the point where the image should be cropped from. For example, the default setting is 50% 50%, the image is cropped toward the center vertically and horizontally.

Icons

By default, Foundry makes use of the Themify icon set. Additionally, you may insert icons from other icon packs using the instructions below.

Using the Themify icons requires you to follow simple syntax using the Themify predefined icon codes. For a list of all available icon codes, look Here.

Syntax for icons is as follows:

            				
	<i class="icon ti-twitter"></i>

This would result in:

Size Classes

By default, the icon will appear at size 64px. You can adjust this by using some size classes:

.icon-lg - Will make the icon 80px.
.icon-sm - Will make the icon 32px;

Other Icon Sets

While it is not recommended to use too many different packs of icons in the same page (for style consistency and page-speed reasons), Foundry offers the ability to use multiple icon packs in the same page. In Variant Page Builder, this is handled automatically: Variant will only include the necessary CSS references for the icon packs you used in the head of the page. We recommend staying within the bounds of one or two icon packs as the font files that are required to render the icons are often large - possibly 315KB in the case of Font Awesome. Using too many different icon packs in your page will slow down the initial loading of the page.

Each icon font pack has a corresponding css file that sets up the use of the icon web font from the fonts folder. If you are managing your HTML manually, you will need to add or remove the following icon pack references in the <head> of your pages manually (one line for each icon pack you intend to use):

                            
    <link href="css/pe-icon-7-stroke.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/et-line-icons.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />

Each icon set uses a slightly different class to distinguish its icons in CSS.
Using as an example, the lock icon which appears in many icon sets:

Themify
See all available icon classes at themify.me

    
    <i class="icon ti-lock"></i>

Font Awesome
note: Font Awesome icons require an added fa class.
See all available icon classes at Font Awesome on Github

    
    <i class="icon fa fa-lock"></i>

Elegant Themes Line Icons
note: This is not the default class structure for ET Line Icons - we modified this as the original icon- conflicted with Foundry and Variant.
See all available icon classes at elegantthemes.com

    
    <i class="icon et-line-lock"></i>

Pixeden 7 Stroke Line Icons
See all available icon classes at pixeden.com

    
    <i class="icon pe-7s-lock"></i>

Modals

Added in v1.6 Foundry now supports a robust modal system to suit a variety of use cases. Modals can be initiated in three ways: by clicking a button, after a specified time on load or automatically on load.

Updated in v1.9.1 - modals will now automatically scroll vertically if the height of the modal content exceeds the window's height.

Summon Modal by Button

This modal type will show when its button corresponding button is clicked, the markup is as follows:

            				
<div class="modal-container">
	<a class="btn btn-modal" href="#">Show Modal</a>
	<div class="foundry_modal">
		<h2>Modal Title</h2>
		<hr>
		<p>
			...
		</p>
	</div>
</div>

Helpful Hints

The button must have class 'btn-modal' to link it to the 'foundry_modal'
You can place any HTML you like inside the 'foundry-modal' div

Summon modal on page load

This modal type will show automatically when the page loads, or after a specified time as set in the 'data-time-delay' attribute. Super handy for 'subscribe' forms on blog and magazine sites. To use this modal type, you will need to place the markup outside of the '.main-container' element in the HTML, just before the 'script' links begin.

            				
<div class="foundry_modal text-center image-bg overlay" data-time-delay="0">
	<h2>Hey I'm a modal title</h2>
	<p>
		Yo, this is a modal paragraph.
	</p>
</div>

In the above example, the modal would show immediately when the page loads as the 'data-time-delay' attribute is set to 0. This value should be assigned in milliseconds; if you wanted the modal to show after 4 seconds the attribute would read: data-time-delay="4000".

Using cookies to permanently dismiss automatic modals

In some circumstances you may want your visitors to be greeted by a time delay modal only once, then allow them to dismiss the modal so that it does not show on subsequent page loads. To do this, set a data-cookie attribute on the modal div. The value of the data-cookie attribute can be anything, but it makes sense to name the cookie after the modal it dismisses like so:

                            
    data-cookie="dismissed-mailchimp-signup-modal"

So, the full modal div tag would look like:

                            
    <div class="foundry_modal text-center image-bg overlay" data-cookie="dismissed-mailchimp-signup-modal" data-time-delay="0">

The cookie is set when the user clicks the close button with class modal-close and will not be set when the user clicks outside the modal to dismiss it.

Hiding a modal after a certain time Added in v 1.7.5

The data-hide-after attribute allows you to hide a modal after a certain time has elapsed. The modal will automatically close so long as the user has not taken action on it (eg. clicked a button or field inside the modal).

                            
    <div class="foundry_modal text-center image-bg overlay" data-hide-after="10000">
        <h2>Hey I'm a modal title</h2>
        <p>
            Yo, this is a modal paragraph.
        </p>
    </div>

In the above example, the modal would hide automatically, 10 seconds after the page has loaded. The time value is measured in milliseconds, this on this example 10000 = 10 seconds.

Note: The data-hide-after attribute counts from when the page loads, not from when the modal first shows. So if you delayed the showing of the modal by 6 seconds, and used a hide after value of 10 seconds, the modal would only show for 4 seconds in total before closing.

Showing modal when mouse leaves selected element Added in v 1.9.5

"Exit" modals can be used to draw the user's attention to a promotion or any other alert when their mouse leaves a particular element on the page. Exit modals use the data-show-on-exit attribute to set a selector matching the element where the user's mouse must exit to show the modal. This means that you could set this selector to match your "Check Out" button, the body of the page, or even a single section on your page so the modal shows when the user scrolls past it.

                            
    <div class="foundry_modal text-center image-bg overlay" data-show-on-exit="html body">
        <h2>Hey I'm an Exit modal!</h2>
        <p>
            This pops up when your mouse leaves the body of the page.
        </p>
    </div>

In the above example we have set the data-show-on-exit attribute to "html body" which selects the body of the page, and will show the modal when the user's mouse moves to exit the window etc.

Modals - Vimeo / Youtube

Added in v1.8 Opening a Vimeo or Youtube video in a modal has been overhauled in Foundry 1.8

Embedding a Vimeo or Youtube video in a modal now requires adherence to the following markup:

                            
<div class="modal-container">
    <div class="btn-modal">Play</div>
    <div class="foundry_modal no-bg">
        <iframe data-provider="vimeo" data-video-id="25737856" data-autoplay="1"></iframe>
    </div>
</div>

*Note: you may use any element as the 'trigger' for the modal, it need only have the class 'btn-modal' as above.

The data attributes

'data-provider' refers to either 'youtube' or 'vimeo' these are the only two providers currently supported.
'data-video-id' refers to the videos unique ID as found in the url for the video (screenshot below)
'data-autoplay' indicates whether you want the video to autoplay when the modal is opened set '1' for true and '0' for false

The 'video-id' from a Youtube video's URL:

The 'video-id' from a Vimeo video's URL:

Notifications

Added in v1.6 Foundry now supports popup notifications on any page. This notification will show when the page loads and requires the user to dismiss it. Notifications are great for prompting users to accept cookies agreements or announcing a new feature of your site / service.

Notification Markup

            				
<div class="modal-strip bg-white">        	
	<div class="container">
		<div class="row">
			<div class="col-sm-12 overflow-hidden">
				<i class="ti-info-alt icon icon-sm pull-left color-primary"></i>
				<p class="mb0 pull-left">Hey there user, our site uses cookies and by continuing to browse, you're agreeing to our <a href="#">terms of service</a></p>
			</div>
		</div>
	</div>
	<a class="btn btn-sm close-modal">Ok, I agree</a>
</div>

Setting the 'close modal' method

In the above example, the modal will be closed when the user clicks the 'Ok, I agree' button. The button must have class 'close-modal'. If you choose not to have a button, a cross icon will appear by default to allow the user to close the modal.

Helpful Hints

You can use any of Foundry's colour classes to enhance notifications (eg: .bg-dark, .bg-primary, .bg-secondary)

Using cookies to permanently dismiss automatic notifications

In some circumstances you may want your visitors to be greeted by a time delay notification only once, then allow them to dismiss the notification so that it does not show on subsequent page loads. To do this, set a data-cookie attribute on the notification div. The value of the data-cookie attribute can be anything, but it makes sense to name the cookie after the notification it dismisses like so:

                            
    data-cookie="dismissed-july-2015-news-notification"

So, the full notification div tag would look like:

                            
    <div class="modal-strip bg-white" data-cookie="dismissed-july-2015-news-notification"">

The cookie is set when the user clicks the close button on the notification with class modal-close.

Portfolio

Portfolios in Foundry are achieved using the Masonry jQuery plugin by Desandro. This plugin ensures that all projects 'slot' together all snuggly. You can find a comprehensive rundown on the Masonry plugin here.

Managing project filters

Some portfolio pages use filters to help the user better hone in in the content relevant to them. Managing these filters is as simple as setting the 'data-filter' attribute on the project's div. The filters will automatically be created as the page loads, so no need to create individual filters and link them up!

For example:

            				
	<div class="project" data-filter="People">
			<div class="image-tile inner-title hover-reveal text-center">
				...
			</div>
		</div>
	<div class="project" data-filter="Animals">
		<div class="image-tile inner-title hover-reveal text-center">
			...
		</div>
	</div>

Would result in 2 filters being created as the page loads, one for 'People' and one for 'Animals'. If we changed the second to 'People', the 'Animals' filter would simply not be created next time the page loads.

Flickr Feeds

Foundry supports the embedding of Flickr albums. Note that you must specify an album to show - the plugin can not simply show the latest photos from a photostream.

Setting up a Flickr feed requires you to have 2 pieces of information, the Flickr ID (that is, the uder id) and the album ID (also referred to as the 'set' on Flickr).

To get the Flickr ID

Head to this link and type your username.

To get the Album ID

Open the album in your browser and copy the long string of numbers in the URL bar.

                            
    <ul class="flickr-feed masonry" data-user-id="USERID" data-album-id="ALBUMID"></ul>

Flickr FAQ

Only 20 images are showing

Unfortunately at this time, Flickr only served 20 of the latest images from any album, we'll update the template should these restrictions change.

Instagram Feeds

Some elements in Foundry offer the ability to embed an Instagram image feed. These elements use a data attribute 'data-user-name' in conjunction with the Spectragram jQuery plugin to fetch the latest images from the specified Instragram account.

Setting up an Instagram element is as simple as placing your username inside the data attribute like so:

            				
	<div class="instafeed" data-user-name="my-account-name">
		<ul></ul>
	</div>

By default, the Spectragram plugin is setup using a Medium Rare Client ID and Access Token which can only show the Medium Rare (@mrareweb) instagram feed. To show your own feed you will need to create your own Client ID and Access Token and place them inside scripts.js (~line 261-262). To make the feed show inside Variant, make the same change to the Client ID and Access Token inside variant/js/reInit.js

To gain access to your Client ID and Access Token, you will also need to sign up as a developer with your own Instagram account. Everything you need to know is explained in this tutorial which was written by the creator of the Spectragram jQuery plugin used in this template.

Instagram FAQ

My feed isn't showing correctly!

Twitter Feeds

The Twitter feed element uses a HTML5 data attribute called 'data-feed-name' to determine which feed to display. You can enter any twitter username.

In older versions of Foundry it was essential to use a Twitter "Widget ID" which is no longer necessary. If you have a Twitter Widget ID, it will still work - so there is no need to update your HTML pages.

If the 'data-feed-name' attribute is missing or left blank, the official twitter feed (@twitter) will be shown.

Twitter Element Markup

Once you've got your widget ID, paste it into the data-widget-id element of the tweets div. Leave the tweets div empty, it will be populated by the Twitterfetcher plugin when the page loads.

	
	<div class="tweets-feed" data-feed-name="mrareweb"></div>

Disqus Comments

Disqus is a service for managing comments on your website. If you are using Foundry as your blog, this means it is now easier than ever to manage comments. Disqus is free and requires you to sign up and add your website. Integrating Disqus with Foundry is a simple process that differs slightly depending on whether you're using Variant or plain HTML.

Retrieving your site's Shortname:

Disqus commments link to your site using your site's 'shortname' this is automatically generated by Disqus based on the information you provided when you added your site to disqus. To access your shortname:

Click the cog in the top-right corner
Select Admin
Click 'Settings' in the far right of the grey menu (if you have multiple sites, select the appropriate site)
Your site's 'shortname' will appear below the 'Site Identity' heading.

Linking Disqus with Variant

Select the Disqus comments block in Variant. When you hover over the section you'll see a tag button appear in the top-right corner. Click this and you'll see a modal open, place your site's shortname here.

Linking Disqus with plain HTML

If you're using pure HTML, the Disqus shortname needs to be placed inside the data attribute 'data-shortname' on the disqus-comments div like so:

                            
	<div class="disqus-comments" data-shortname="mysitesname">
	  <div id="disqus_thread"></div>
	</div>

Capturing referrer via URL ref parameter

When creating a landing page, you may wish to track traffic from a particular source. Foundry allows you to capture the referrer on your email forms, and have it sent through as part of the enquiry email when a user submits an email form to make an enquiry.

For instance, you may like to see which visitors made an enquiry after arriving at your site from your Facebook ad link, or perhaps you have Google Ads that you'd like to track also. Whichever it is, just add the parameter ref into your links from each source and Foundry will add that referrer info into your email. Here is an example link:

http://your-website.com/leadpage.html?ref=facebook

http://your-website.com/leadpage.html?ref=fb

http://your-website.com/leadpage.html?ref=googleads

How it works

When the page loads, Foundry will detect if there is a ref parameter and add a hidden field to each email form with the referrer value automatically set. When the form is sent, the value is picked up on the server side in mail.php and is included as part of the email text.

If there is no referrer parameter set in the URL, nothing happens and nothing is sent through. You do not have to use it, but the option is there for those who do.

Using Google Maps

Foundry offers the use of two different Google map implementations. The map you see in the demo is an iframe embedded map but you can also use the google maps javascript API, which requires an API key but allows colour styling of the map, removal of obtrusive UI elements and specifying your own map marker, placed in multiple locations on the map.

iframe embedded map vs javascript API map

javascript API - Pros:

Looks better - is already styled to suit the template
Does not contain overlaid interface elements in each corner of map
Uses your real street address to center the map precisely
Easy to use your own map marker/pin image
Can show multiple markers set by multiple street addresses

javascript API - Cons:

You must obtain a Google Maps API key - available free of charge through Google

iframe embedded map - Pros:

Does not require a Google Maps API key

iframe embedded map - Cons:

Has the default Google Maps colour and interface, no theme customisation
No easy way to use your own map marker/pin image
Has overlay boxes and Google Maps controls in each corner of your map

We strongly encourage using the javascript API map, not the iframe embed type because the long-term visual appeal vastly outweighs the slight inconvenience of obtaining a Google Maps API key. A Google Maps API key is a seemingly random string of characters which identifies your website to Google when loading the map for your users. The next section explains how to get an API key for your site.

Obtaining a Google Maps API key - current at July 2015

Follow Google's instructions here on how to obtain an API key. When you have your key, proceed to the next section to learn how to set up your pages with the API key and the map.

Inserting your Google Maps API key into your page to load a map

In Variant, you need to click the key icon on the section with your map. When prompted, paste your API key into the box provided and click Save. This only applies to sections with a Google Maps javascript API enabled map - and the key icon will not appear on a section that uses an iframe map, as it is not necessary for an iframe embedded map.

If you are editing HTML outside of Variant, you need to add a data-maps-api-key attribute to the map container like so:


    data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU"

The above key is a sample only and will not work for your site.

So, your map code would look something like:


    <div class="map-canvas" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" data-address="1095 High Street, Armadale, Victoria"></div>

Setting the Address to centre your javascript API enabled map (this does not apply to iframe embedded maps)

In Variant, you need to click the pin icon on the section with your map. When prompted, type your address into the box provided and click Save. Be as specific as you can with the address, and even provide your state and country to give Google as much information as possible to provide you with an accurate point on the map. If an abiguous address is given, and no certain location can be matched, no marker will be shown. This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

If you are editing HTML outside of Variant, you need to add a data-address attribute to the map container like so:


    data-address="1095 High Street, Armadale, Victoria, Australia"

So, your map code would look something like:


    <div class="map-canvas" data-address="1095 High Street, Armadale, Victoria" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

You may also provide precise latitude and longitude points separated by a comma if you know them:


    <div class="map-canvas" data-latlong="-37.858192,145.023019" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

The data-latlong attribute is optional, and will only be used if no data-address attribute is provided. You can set the data-latlong attribute in Variant by clicking the target icon on the section containing your Google javascript API enabled map.

Styling Your Map (Google Maps API only)

Google Maps API enabled maps can be styled to show and hide map details, and recolour any element. The template will use a default colourless style which you can override with your own style using some JSON style code.

You may choose a predefined map style from the hundreds available ar Snazzy Maps, then simply copy the JSON stye code into Variant.

Alternatively, make your own from scratch with this Style Generator, then simply copy the JSON stye code into Variant.

In Variant, click the paintbrush icon on the section containing your map and paste the full JSON style code from Snazzy Maps or the Style Generator into the box provided. Click Save and the map will update with the new style.

If you are editing HTML outside of Variant, add a data-map-style attribute to the ma-canvas element. The JSON code used will need to be edited to make it compatible since the quote character used in the JSON code will break the HTML. Before pasting your JSON into your HTML page, copy the text into a blank text document and replace all instances of the " (quote) character with the string " to make the JSON embeddable inside HTML markup.


[
  {
    "featureType": "landscape.natural.landcover",
    "stylers": [
      { "visibility": "on" },
      { "weight": 0.7 },
      { "hue": "#00c3ff" }
    ]
  }
]

If editing HTML manually, The code above needs to be altered to look like the below:


[
  {
    &quot;featureType&quot;: &quot;landscape.natural.landcover&quot;,
    &quot;stylers&quot;: [
      { &quot;visibility&quot;: &quot;on&quot; },
      { &quot;weight&quot;: 0.7 },
      { &quot;hue&quot;: &quot;#00c3ff&quot; }
    ]
  }
]

This only applies to sections with a Google Maps javascript API enabled map - styling an iframe embedded map is not possible.

Map markers

See above on how to edit the address value for your map.

You can provide multiple addresses for your map by separating them with a semicolon.

A marker is added for each address supplied.

The map is always centered around the first address supplied. This can be a country name if you want.

If you want to show two markers (eg. one at each end of the continent) on your map but centre the map around another point, add [nomarker] at the end of the first address.

[nomarker] can be added to any address without interfering with the address geocoding, however the map always centres around the first address supplied.

Change the map marker or 'pin' image by replacing mapmarker.png in the template's img folder.

Your mapmarker.png image should be 300 x 300 pixels (which is scaled down to 50 x 50 pixels on the map to account for high-res displays. Just make sure the point of the pin in your image is in the centre at the bottom of the image. See the supplied mapmarker.png as an example.

EXAMPLE 1: Perhaps you have a number of offices across a country - to add a country with multiple markers, add a country name as the first "address" to centre the map there, and add [nomarker]. Then add some other addresses, all separated by semicolons to show map markers at each address. See the example address code for Australia (Zoom level 4 = further away) below and the resulting map:


    Australia [nomarker]; Perth, Australia; Melbourne, Australia; Sydney, Australia

EXAMPLE 2: Perhaps you have multiple outlets in one city - to add a city with multiple markers, specify the middle of a city as the first "address" to centre the map there, and add [nomarker]. Then add a few other addresses, all separated by semicolons to show map markers at each address. See the example address code for New York (Zoom level 12 = closer) below and the resulting map:


    Midtown Manhattan, NYC [nomarker]; Downtown NYC; Lower East Side NYC; Upper West Side NYC

This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

LIMITATIONS: Google only allows 10 addresses to be geocoded at one time. If you reach 10 addresses and need more markers on your map, just add any point by using latitude and longitude coordinates in the same address box. These are simply comma separated coordinates ended by a semicolon like the textual addresses. Coordinates can be interspersed with your textual addresses.


    Melbourne, Victoria, Australia [nomarker]; -37.855151, 145.018092;  RICHMOND, VIC, AU; collingwood, vic, australia;  -37.851623, 144.991615;  williamstown, vic, au; werribee, vic, au; -37.849578, 145.111392; glen waverley, vic,au; manningham, melbourne, au; boronia victoria; ferntreegully, victoria; caroline springs, vic , au;st albans, vic, au; -38.079153, 145.483336

Using more than 10 map markers by interspersing addresses with latitude and longitude coordinates. This only applies to sections with a Google Maps javascript API enabled map - setting the address for an iframe embedded map is a different process explained below.

Map Zoom Level

You must set the zoom level appropriately to show the map of your desired area at the right size. In Variant, click the zoom in icon on the section with your map and provide a number between 1 and 18 where 18 is fully zoomed in and 1 is zoomed out completely. In Variant, the map will reset at the specified zoom level. If you are editing HTML outside of Variant, add a data-map-zoom attribute with a number as the value like so, save, then refresh the page:


    <div class="map-canvas" data-map-zoom="12" data-maps-api-key="AIzaSJiT6D4E0PlvR45biSx0DoWRswL1kfdO9ZU" ></div>

This only applies to sections with a Google Maps javascript API enabled map - setting the zoom level for an iframe embedded map is a different process explained below.

iframe embedded Google map

To embed a simple map without requiring the use of a Google Maps API key, simply visit Google Maps and search for an address. When you have cetered your map to your desired location and set the appropriate zoom level using the map controls, get the iframe embed code. At the bottom right-hand corner of the map, click the gear/cog symbol and choose Share or Embed Map. A new modal window appears - choose the tab at the top that says Embed Map and select the whole code in the given text box starting with <iframe ... and ending with </iframe>. Copy that to your to your clipboard with Ctrl+C (Windows) or Command+C (Mac) or right-click -> Copy on your mouse.

In Variant, click the pin icon at the top-right corner of the section containing the map and paste the code from Google Maps into the provided "Edit map Embed" box uaing Ctrl+V (Windows) or Command+V (Mac) or Right-click -> Paste on your mouse.

If editing HTML outside of Variant, simply replace the contents of the iframe src=" ... " attribute in the map section of your HTML markup with the contents of the src=" ... " attribute of the iframe you copied on Google Maps.

Linking the mail form via SMTP server

Your mail form will not work unless you have your files running on a hosting server with PHP 5. When you have your files ready on your hosting server, you need to edit the settings in /mail/mail.php to make the email function work.

Please note that you should first get your SMTP mail settings from your hosting provider before proceeding. It is also a good idea to set up your sending email address in cPanel before proceeding. Contact your hosting provider for support in this area, as we don't have access to your system to sort out these details.

Open /mail/mail.php and make the following changes:

Line 13: Change to your own SMTP mail server address, either a hostname or ip address. Usually mail.yourdomain.com if you want to use your cPanel hosting server's email system. Otherwise you can use your ISP mail server but beware you'll need to provide account login details either way.
Line 14: Change the port number to the port for your outgoing server supplied by your hosting provider.
Line 15: Change the security layer used by your outgoing/SMTP server. This can either be 'ssl', 'ssl3', 'tls' or null if you want to use no security layer. Note that when using null, there are no quote marks around the word, just the word null.

NOTE FOR GMAIL USERS: Gmail requires that you use port 587 with TLS security so your lines 13, 14 and 15 would look like this:


    $outgoingServerAddress      = 'smtp.gmail.com';     // Consult your hosting provider.
    $outgoingServerPort         = '587';                // Options: '587' , '25' - Consult your hosting provider.
    $outgoingServerSecurity     = 'tls';                // Options: 'ssl' , 'tls' , null - Consult your hosting provider.

Line 19: Change to your sending email account username, usually the entire email address at your domain eg: test@mediumra.re . You might need to create an email account in your cPanel for this if you don't already have one set up. Otherwise you can use the SMTP mail account info from your ISP.
Line 20: Change to the password for your sending email account at your domain. You might need to create an email account in your cPanel for this if you don't already have one set up.
Line 23: Change to the email address of the person who will be receiving and handling all the emails from the users who enquire through the website.
Line 24: Change to the name of the recipient who will handle all emails that come from the website.
Line 27: Change this to what you want the subject of the email to be in the recipient's email.
Line 28: Here is where you name your website, for instance "Yum Yum Restaurant Website" - this name will be used when the user does not supply a name, or when there is no email input on the form. Eg. when the form has only name and phone fileds, the email will appear to come from "Yum Yum Restaurant Website".

You will receive feedback from the Swift Mailer system on your page. You will be given an error until you get the sending settings just right. When the settings are correct, you'll receive a green box with a success message. Swift Mailer is used because it is reliable in sending, and gives feedback when message has been sent.

For a full range of documentation on configuring and using the Swift Mailer Library see here: http://swiftmailer.org/docs/sending.html

If you encounter a "Connection refused" problem with the contact form you may need to contact your server or email host to determine the correct SMTP settings, or fall back to using the standard mail function (see next section). When you see a timeout message, it could be that the supplied port number or security setting is wrong for your particular SMTP server.

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

Linking the mail form using native PHP mail()

The Mail Transport sends messages by delegating to PHP's internal mail() function.

In our experience, the mail() function is not particularly reliable. We only recommend using this if you can't get a satisfactory result using the above mentioned SMTP method.

The problem with mail() is that it "tries" to simplify things to the point that it actually makes things more complex due to poor interface design. The developers of Swift Mailer have gone to a lot of effort to make the Mail Transport work with a reasonable degree of consistency.

Serious drawbacks when using this Transport are:

Unpredictable message headers
Lack of feedback regarding delivery failures
Lack of support for several plugins that require real-time delivery feedback

It's a last resort, so use SMTP instead where possible.

Using the mail transport

Open mail/mail.php and make the following changes:

Line 9: Make sure line 9 has $emailMethod set to phpmail. That is, "phpmail" within the quotation marks on the right-hand-side of the equals sign like this:


    $emailMethod                = 'phpmail'; // REQUIRED value. Options: 'smtp' , 'phpmail'

For a full range of documentation on configuring and using the Swift Mailer Library see here: http://swiftmailer.org/docs/sending.html

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

Redirecting to a confirmation page

Foundry can redirect your users to a confirmation page after successful submission of email forms or newsletter signup (MailChimp / Campaign Monitor) forms.

Default behaviour is to send the form then display a success message in a green box. Setting the success-redirect parameter on any form will override the default behaviour and send the user to your specified page instead of showing the green box. A form with a success redirect parameter would look like this:


    <form class="form-email" success-redirect="http://mediumra.re/thanks.html" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
        <input type="text" class="validate-required" name="name" placeholder="Your Name">
        <input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
        <textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
        <input type="submit" value="Send Message">
    </form>

The address given in the success-redirect attribute should be a fully formed URL including http:// to ensure maximum compatibility.

If the attribute success-redirect is left blank, or not included in the form tag, the default behaviour will occur (green box success message appears).

Ajax MailChimp and Campaign Monitor forms

Foundry forms in versions 1.8.0 and newer can be used to sign up your users to MailChimp and Campaign Monitor mailing lists without reloading the page, opening a new page, or redirecting to another page.

The forms are handled by ajax in scripts.js and older forms (Foundry versions 1.7.x and older) can easily be modified to submit via ajax also. To update an older form, simply replace the submit button on your form:


    <input type="submit" value="Sign up now!" />

with the following:


    <button type="submit">Sign up now!</button>

This change is required by scripts.js to show the loading animation inside the submit button when the user has clicked to submit the form. You then need to update your scripts.js by replacing the copy in your site's /js/ folder with the version from the newer 1.8.x scripts.js file in your download package.

In Foundry version 1.8.0, the scripts.js file reads the contents of the iframe containing your MailChimp / Campaign Monitor form and uses the inputs and action parameter to submit the form via ajax. A future update after 1.8.0 will discontinue the use of the iframe method altogether.

Setting the success-redirect parameter on a MailChimp or Campaign Monitor form will override the default success behaviour and send the user to your specified page instead of showing the green success box. See forms section for how to implement success-redirect attribute.

Embedding MailChimp and Campaign Monitor forms

The easiest way to embed a MailChimp or Campaign Monitor form in Foundry is to use Variant to embed the form and let it generate the necessary code. The reason for this is that Variant encodes the embed form to make it embeddable in Foundry's iframe.

Open your Campaign Monitor or MailChimp account and copy the form code from there to your clipboard. Open Variant, select the form section that matches the section you want to use, and click the envelope icon to bring up the "Embed Newsletter Form" dialog box. Paste in the whole code you copied from your mail list provider and click Save. Then click GET HTML on Variant's sidebar and copy the iframe into your HTML Page. If you are using Variant to build your page, this will all be done for you.

If you are working from an example MailChimp / Campaign Monitor form shown in one of the demo pages included with the template, your form will be ready to go and will submit via ajax. A later version of Foundry will discontinue use of the iframe method altogether.