Vitality is a one page website theme built on the Bootstrap framework.

Thank you for purchasing Vitality! These docs provide usage instructions for the various components built into the theme. If you run into any other problems with the theme, or encounter any bugs, please contact Start Bootstrap Themes directly through the contact form on our profile page at WrapBootstrap here: https://wrapbootstrap.com/user/StartBootstrap.

Vitality comes with five different prebuilt sample pages for various types of websites along with ten color schemes.

Vitality is a flexible theme and comes with five different website samples and ten color schemes to start with. The theme also includes LESS files for deeper customization, a working contact form, and a variety of powerful jQuery plugins.

Plugins

The following plugins are used in the Vitality theme. For more detailed usage instructions for each plugin, please visit the plugin website using the links provided below.

Font Awesome
Magnific Popup
Owl Carousel
jq Bootstrap Validation
Formstone - Background (Previously Formstone - Wallpaper)
WOW.js
Animate.css

Updating Plugins

Updating a plugin to a newer version may causes some elements in the theme to malfunction. Please contact Start Bootstrap Themes if you are having a problem updating a plugin and we will update the theme.

Color Schemes

Vitality comes built with 10 different color schemes. Each color scheme has it's own CSS file associated with it. After you've picked a color scheme, make sure to uncomment it within the <head> tag. You can use any of the following color schemes:

<link href="css/vitality-red.css" rel="stylesheet" type="text/css">
<link href="css/vitality-aqua.css" rel="stylesheet" type="text/css">
<link href="css/vitality-blue.css" rel="stylesheet" type="text/css">
<link href="css/vitality-green.css" rel="stylesheet" type="text/css">
<link href="css/vitality-orange.css" rel="stylesheet" type="text/css">
<link href="css/vitality-pink.css" rel="stylesheet" type="text/css">
<link href="css/vitality-purple.css" rel="stylesheet" type="text/css">
<link href="css/vitality-tan.css" rel="stylesheet" type="text/css">
<link href="css/vitality-turquoise.css" rel="stylesheet" type="text/css">
<link href="css/vitality-yellow.css" rel="stylesheet" type="text/css">

Use Only One Stylesheet

Make sure to only use one of the 10 available stylesheets available!

Button Styles

In addition to the defauly Bootstrap buttons there are two additional button styles that are used in the Vitality theme.

Dark Outline Button

For use on light backgrounds. Examples: "Send" button on the contact form, "Sign Up" button on the pricing table.

.btn-outline-dark

Light Outline Button

For use on dark backgrounds. Example: Call to action buttons, "View Details" buttons on the portfolio section.

.btn-outline-dark

Body Styles

There are three body styles that you can use with the Vitality theme: default, modern, and vintage. To use the files, all you need to do is change the class of the body tag.

Default Style

Raleway heading font with Roboto paragraph font.

<body>

Modern Style

Montserrat heading font with Cardo paragraph font.

<body class="modern">

Vintage Style

Sanchez heading font with Cardo paragraph font.

<body class="vintage">

Font Dependencies

Each body style uses different fonts. Check the fonts in the <head> section to make sure you are using the correct fonts for your style.

The Vitality header comes with two options. You can either use a background image or a background video.

Background Image

The first option for the Vitality header is the use of a background image. The header background image in the sample templates are set using inline CSS directly in the document.

To edit the header image, change the path of the background image in the <header> tag. Make sure your image path is correct.

Example: <header style="background-image: url('img/agency/backgrounds/bg-header.jpg')">.

Background Image Style & Dimensions

All of the images in the theme samples were edited in Photoshop to have a dark overlay. For optimial legibility on the foreground content, we recommend giving all background images a 50% opacity, black overlay or decreasing the brightness on the image.

Our recommended image dimensions for background images is 1500x1000 pixels.

Background Video

To configure a background video for your header you will need to configure the Formstone Background plugin in the vitality.js file. You must also be using the header structure used in the video.html sample file. You will also want to edit the file path of the mobile fallback image.

Example: Edit the poster and mp4 file paths in the vitality.js file. Supported file formats are mp4, ogg, and webm. For more information on using the Formstone Background plugin, visit http://formstone.it/components/background.

// Formstone Background - Video Background Settings
$("header.video").background({
    source: {
        poster: "img/agency/backgrounds/bg-mobile-fallback.jpg",
        mp4: "mp4/camera.mp4"
    }
});

Video Compression Tip

When you're using a background video for your header, you want to keep the file size as small as possible so you don't have pauses or stuttering in your video as it plays in the background. A great, open source tool you can use is a program called Handbrake. To compress your video, download Handbrake and run your video through the program with the "Web Optimized" box checked. It can convert a 20MB mp4 video file down to 2MB without quality loss!

Vitality includes a working contact form. All of the sample pages, except for the culinary.html sample, include a contact form. In order to activate the form, follow these directions:

Open the mail/contact_me.php file.
On line 19, enter the email address you want mail sent to. $to = 'YOUR-EMAIL-ADDRESS@YOUR-DOMAIN.com'; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE FORM TO SEND MAIL TO*
On line 22, enter the email address you want messages sent to you to be from. $headers = "From: noreply@YOUR-DOMAIN.com\n"; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE MESSAGE TO BE FROM*. Typically, an email address like noreply@your-domain.com will work here.
Save, and upload the file.

Adding Fields to the Contact Form

If you want to add fields to the contact form, you will need to edit the mail/contact_me.php file as well as the js/contact_me.js file. Requires basic working knowledge of PHP and JavaScript.

If Your Form Isn't Working

If you have followed the instructions above, and uploaded your website to a live server and the form is still not working then it is likely that your web host is blocking the form from sending messages. In order to troubleshoot form functionality after it's been uploaded it is best to contact your server administrator or web host to see if there are permissions or security features preventing the form from sending, or if the version of PHP on your web server is not compatible with the form scripts.

Vitality now comes with a call to action box that has a built-in MailChimp signup form. All you need to do in order to activate this feature is include your MailChimp form action within the template! Below are the steps on how to do this.

Log into your MailChimp account.
Go to your lists. This is usually a link on the top menu bar called "Lists"
You will now see your subscriber lists on the screen. On the right hand side of the list there will be a button that says "Stats" and a dropdown arrow. Click on the dropdown arrow to open a menu and select "Signup forms."
Click on the second option that says "Embedded forms"
The embedded forms has multiple formats, but we only need the form action! To get the form action select the "Naked" form option. The other options are Classic, Super Slim, and Advanced.
Once you see the "Naked" form option you will see a preview and an embed code. Copy the embed code and paste it into a blank Notepad or text editor document. The code will have a <form action="...">. Copy the contents of the form action that is between the quotations, and drop the form action URL into the Vitality template you're using!
Now the form should be working. You can test it by entering an email address and hitting the subscribe button. It should take you to a new window notifying you that you've signed up for the mailing list.

Not Using MailChimp?

If you aren't using MailChimp you can still use the signup form HTML. Just delete references to the MailChimp scripts and use the remaining HTML as a template for your different signup method!

As a one page theme, the smooth page scrolling feature is a great way to let your users navigation your content while being contsantly aware of where they are on the page. In order to use the page scroll content, you need a few things. You need a link that you want users to click on to bring them to a section, a unique ID set for the section you want to navigation to, and the page-scroll class added to the link itself.

Here is an example of what a link needs in order to scroll to a section:

<a href="#link" class="page-scroll">Link Text</a>

Note the page-scroll class being added to the link. For a more detailed example, see the links in the navigation bar within any of the samples!

Here is an example of what your section should look like that you're linking to with the above link example:

<section id="link">...</section>

Note that the section's ID matches the link's destination!

The Vitality theme comes built-in with 4 modal windows that open up as individual portfolio items. If you are using the full width portfolio carousel, then the 4 modal windows correspond with the four different slides. If you choose to use the portfolio grid, then you may want to add more portfolio item modals to your theme!

If you want to add more items to your theme, the first step is to copy one of the example modals, and paste it as many times as you want (depending on the number of portfolio items you have). Next, you will want to copy some of the portfolio items in the preview area (either the full screen carousel slides, or the individual portfolio items on the grid) and create as many as you would like.

Once you have your portfolio items copied, and the modals copied, you will need to connect the two. If you look at the example modals, you will see that the portfolio items will reference an ID in the link tag. For example, you will see the items reference href="#portfolioModal1" in the link tag. You will then see at the bottom of the HTML, the modal windows themselves have ID's attached to them. For example, id="portfolioModal1". All you need to do when adding more items is make sure the link tag and the ID on the portfolio modal match. In the theme, you are given ID's 1-4 to work with, so it's reccomended to go to 5, 6, 7 and on when making new modals. Again, just make sure the link tag and the modal ID match for each portfolio item you're making!

If you run into problems, bugs, or have general questions about the theme, please feel free to email us using the form on our WrapBootstrap profile page at https://wrapbootstrap.com/user/StartBootstrap and we will attempt to answer your questions. We also offer custom design services if you are looking for a customized version of this theme (custom design services are not included with purchase).

Once again, thank you for choosing Vitality, and we wish you the best of luck on many projects to come!

Start Bootstrap Themes is always adding new features and making improvements to Vitality! That being said, whenever the theme is updated you will want to update your own website. Referenced below are some changes you might need to make to your own theme if you choose to use the updated files:

Upgrading to 1.3.3+

In version 1.3.3, a new class was added to distinguish between regular links and links that allow the page to smooth scroll to an anchor point. The best example of this is shown in the navigation menu. Make sure to update any of your links that scroll somewhere on the page by adding the .page-scroll class to them. Below is an example of what a menu bar link looks like in 1.3.x and what the new format is in 1.3.3. Use the below information, along with the theme files, for reference.

Menu Bar Links in Version 1.x.x

<li>
    <a href="about">About</a>
</li>

Menu Bar Links in Version 1.3.3+

<li>
    <a class="page-scroll" href="about">About</a>
</li>

Make sure to add the .page-scroll to any link that is smooth scrolling to another ID on the page. This includes the logo in the navigation bar, buttons, and any other elements!

Vitality Documentation

Introduction

What's Included