Getting started

The files you will need to get started are located in the distfolder. The index file in the root of this directory is where you can add the content to your site.

1. Change background image

An image with the class sample-imgIs already included. You will need to delete in the markup and add your own. Open up the file ccs/custom.css and add a class for the image. Example:
.home-img { background-image: url("img/home-img.jpg")}. In the html markup add home-img to the class. Example:

<section class="bg hero-bg home-img dark-theme"> 
< -- content here -- >
</section>

The classes bg and hero-bg are needed to create the fullscreen cover page that you see. If you are using a background image in any of your sections or you do not want the image to take up the entire screen, you only need the class bg.

2. Change title and description

Main titles use a h1 tag and have the class title. This styles the font size at different screen sizes. Change the text to your website's title. The h2 tag is for the description. The default font style is open-sans. See the section on typography for more customization options.

3. Change theme

Every element including page content and menus can have a dark or light theme. Add the class dark-theme for a dark background color and white text, light-theme for a white background color and dark text. If using a background image or background color in a section, it is recommended you add the class dark-theme.

Layouts

There are two options for your layout: a fullscreen layout or a page-header layout. Copy the template code you want to use into your in your index file. If you are adding a background image, add a class to your css file for the image.

 .home-image {
background-image: url('../img/pic.jpg');
}
.

Inside the html markup add home-image to the section class. You may add either the class dark-theme or light-theme. If you would like to add a background color, you can use any of the colors that we have included. See the colors section for more details. Or create a class for your color in your css file.

.bg-color {
background-color: #222;
}

Typography

Four google fonts are included in the theme. To use, add the link to the stylesheet in the head of the index file. The Roboto font is included by default. Add class roboto, lato, open-sans, or montserrat to the element you would like to style. You can also style the thickness by adding the class thin, light, normal, bold, or bolder.Example: <h1 class="roboto bold">Title<h1> To add a different font, add the link to the font file inside the head of your html file like this:

<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>

In your stylesheet, add the font to the element you want to style. .title { font-style: 'Roboto', serif; }. Serif is included as a backup font. By default, our body copy uses Open Sans as the font. You can also style the alignment of your text with the classes text-center, text-left, and text-right. View additional ways you to style your text on Bootsrap's website

<!-- ROBOTO FONT -->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>

Roboto thin

Roboto light

Roboto normal

Roboto bold

Roboto bolder

<!-- LATO FONT -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

Lato thin

Lato light

Lato normal

Lato bold

Lato bolder

<!-- OPEN SANS FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

Open Sans light

Open Sans normal

Open Sans bold

Open Sans bolder

<!-- MONTSERRAT FONT -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

Montserrat normal

Montserrat bold

Colors

The following colors are made available as background colors. Just add its name as a class to an element. For example: <section class="gray-dark-bg">


black-bg
#000000

gray-darker-bg
#1F1F1F

gray-dark-bg
#262728

gray-bg
#4C4D4F

gray-light-bg
#6A6A6A

gray-lighter-bg
#dee1e5

light-bg
#E9E9E9

lighter-bg
#F6F6F6

white-bg
#fff

cloud-gradient

ash-gradient

blue-gradient

electric-gradient

rose-gradient

pink-gradient

Buttons

Options

Buttons can be rectangular (default), pill or circular. Use the <span> tag for buttons. For linked buttons wrap the span tags with <a> tags. Use <input> tags for form element buttons.
Default pill Button 1

<a href="#"><span class="button button-default button-dark">Rectanglular</span></a>
<input type="submit" value="submit" class="button button-default button-pill button-dark">
<span class="button button-circle button-dark">1</span>

Fill

You can further customize your buttons by making them blue, dark, light, filled, or outline. Add the class button-blue, button-dark, button-light, button-blue-o, button-dark-o, or button-light-o.

Blue Blue Dark Dark
Light Light
<span class="button button-default button-dark">Dark</span>
<span class="button button-default button-dark-o">Outline</span>
<span class="button button-default button-light">Light</span>
<span class="button button-default button-light-o">Light</span>

Sizes

In addition to the default size, buttons can be small or large. Add class button-sm, or button-lg respectively.

Small default large
<span class="button button-default button-pill button-sm button-dark">Small</span>
<span class="button button-default button-pill button-dark">default</span>
<span class="button button-default button-pill button-lg button-dark">large button</span>

PayPal button

You can have a button link to a payment form through PayPal. Log in to your PayPal account and create a buy now button. In the button's code, get the value for the id. In your website markup, create a button and set the href attribute to href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=######" where ##### is your id number.

Icons

Icons can be included inline with other list elements. Class names can be found on the Font Awesome website. You can also style the size by adding the class fa-lg, fa-2x, fa-3x, fa-4x, or fa-5x. If you would like to display a list of icons that span horizontally, add the class social-list to the element.


<ul class="social-list">
  <li><a href="#" class="fa fa-lg fa-twitter"></a></li>
  <li><a href="#" class="fa fa-lg fa-facebook"></a></li>
  <li><a href="#" class="fa fa-lg fa-soundcloud"></a></li>
  <li><a href="#" class="fa fa-lg fa-youtube"></a></li>
</ul>

Vertical align

Centers an element vertically with respect to the document window. This is how the title on the home page is centered. Wrap the content you would like vertically aligned in a div and give it a class name. Use the class name to call the vAlign function.

$(document).ready(function () { 
...
$('.center-content').vAlign();
...
});

Smooth page scroll

Animates the page scroll when visiting links. The trigger should be a link with a class name. Set each link's href to the target's id. Use the class name to call with the smoothScroll function.

$(document).ready(function () { 
...
$('.anchor').smoothScroll();
...
});

You can also pass the following options via JavaScript:

Name Type Default Description
speed number 700 The time in milliseconds for the animation to complete.
offset number 55 Number of pixels to offset the stop position.

Video

YouTube

First upload your video to YouTube. Copy the template code from youtube.tpl.html to your HTML markup. In cerebro.js, find the section labeled YouTube. Change the videoId value to your video's id.

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
'videoId': 'AKUPLmR4KX4', //change the value to your youtube video's id
...

More info for using the YouTube API can be found on the YouTube developer site.

Vimeo

First, upload your video to Vimeo. You will need to be running a local server to test your video on your local machine. Copy the vimeo template code from vimeo.tpl.html to your HTML markup. In the iframe tag, replace the id with your video's id.

Add initialization code to the cerebro.js file.

$(document).ready(function () { 
...
vimeo.init();
...
});

More info on the Vimeo API can be found on the Vimeo developer site.

Clock

The countdown clock comes in the three sizes, small, default, and large. For small, add the class clock-sm, for large, add the class clock-lg to the outermost element. For example: <div class="clock clock-lg">. You can hide either the day, hour, minute, or seconds by deleting the section. Example usage:

$(document).ready(function () { 
...
//creates a clock set to end on March 1, 2015 at 5:00pm
var clock = new Countdown("March 1, 2015 17:00:00");
clock.init();
...
});

Small clock

175 Days
16 Hours
09 Minutes
32 Seconds

Default clock

175 Days
16 Hours
09 Minutes
32 Seconds

Large clock

175 Days
16 Hours
09 Minutes
32 Seconds

Contact form

Overview

The contact form can be used as a form in a page or in a modal as a popup contact form. Plus there is support for sending emails over SMTP. You can use a transactional email service like Mandrill as an SMTP server.

HTML

In the html file, find the form element and change the action attribute to the path of contact.php or smtp-contact.php. Use contact.php if you would like to send emails using PHP's mail function. Use smtp-contact.php if you would like to send emails using an smtp server.

<form id="contact-form" method="post" action="path/to/contact.php">
. . .
</form>

To change the text of the submit button, find the input element and change the value attribute. The popup contact form uses a modal window. The data-target attribute of the trigger button must equal the id of the contact form. And the trigger button should have data-toggle="modal". To animate the modal when shown, include the class fade in the the contact modal. To include a backdrop to the form add the attribute data-backdrop="true" to the modal. If would like to prevent the modal from closing when clicking the backdrop, set data-backdrop="static" to the modal.

<!-- Trigger button -->
<span class="contact-btn button button-default button-dark-o" data-toggle="modal" data-target="#contact">inquiry form</span
<!-- Contact modal -->
<div id="contact" class="contact modal fade" data-backdrop="static" role="dialog">
. . .
</div>

JavaScript

Initialize the contact form with $('#contact-form').contact() where #contact-form is the id of the form element. You can also pass options for the form via JavaScript.

Name Type Default Description
labels boolean false Hides or shows the label elements on the form.
placeholder boolean true Hides or shows the placeholder text in the form field.
$(document).ready(function () { 
...
$('#contact-form').contact({'labels': true});
...
});

PHP

This contact forms uses PHPMailer to send emails. Their documentation includes additional ways you can customize your emails. To test sending, emails you will need to be running a server locally. I recommend MAMP if you use a mac or WAMP if you use Windows. Open contact.php if you will be sending emails without SMTP. Else open the smtp-contact.php file. The following are values that need to be set for either option.

Field Description
$mail->From The email address shown as the sender.
$mail->FromName The name shown as the sender. (i.e. your name or company name)
$mail->addAddress Email address of the recipient. (i.e. your email)
$mail->Body The email message. The default includes the first name, last name and email address entered in the form with the message.

The following values need to be set if you are sending emails with SMTP.

Field Description
$mail->Host The SMTP server specified by your host.
$mail->Username The username specified by your host.
$mail->Password The password associated with your username.

Adding a new form field

Add the HTML to the form.

<!-- Phone number -->
<div class="form-section col-xs-12">
<label for="number">Phone number</label>
<input type="number" id="number" class="form-field" name="phone-number" placeholder="Phone number">
</div>

Next, you will need to add the PHP code for the field in contact.php or smtp-contact.php. Create a variable to store the field's info and filter the data. Example: $variable = strip_tags(trim($_POST['input-name']));. For our phone number example it would look like this:

$number = strip_tags(trim($_POST['phone-number']));

Optionally you can add some error checking code. Finally, you will want to do something with the data. You could append it to the mail body. Add the phone number data to the message like this:

$email_content .= $number
$email_content .= $message
$mail->Body = $email_content