Cover Documentation

top

1. What's Included

Cover is a flexible theme and comes with eight different prebuilt sample pages for various types of websites. The theme also includes a working contact form, countdown plugin and a variety of powerful jQuery plugins.

top

2. Plugins

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

Ion Icons

The premium icon font
Plugin Website

YTPlayer

jQuery component to build custom Youtube® player or to use a Youtube® video as background.
Plugin Website

Device.js

Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
Plugin Website

Jquery Countdown

A simple and html agnostic date countdown plugin for jQuery
Plugin Website

Form.js and jq Bootstrap Validation

A jQuery valdiation plugin for Bootstrap forms.
Plugin Website

Jquery Placeholder

HTML5 Placeholder jQuery Plugin for contact form
Plugin Website

WOW.js

A jQuery plugin for reveal animations when you scroll.
Plugin Website

Animate.css

A CSS plugin for CSS animations.
Plugin Website

SmoothScroll.js

Smooth scrolling with the mouse wheel and keyboard buttons.
Plugin Website

top

3. Contact form

Cover includes a working 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 = '[email protected]'; // *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: [email protected]\n"; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE MESSAGE TO BE FROM*. Typically, an email address like [email protected] 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.

top

4. Smooth Page Scrolling

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 #you-section-id id added to the link itself.

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

<a href="#you-section-id">Link Text</a>

top

5. Header Video

To retrive the video from YouTube you can use any of the following string:

The URL of the page containing the video
videoURL: ‘https://www.youtube.com/watch?v=V2rifmjZuKQ’.
The short URL available fron the YouTube share panel
videoURL: ‘http://youtu.be/V2rifmjZuKQ’.
The video ID
videoURL: ‘V2rifmjZuKQ’.

Data-property

mute: true (boolean) mute the audio;
showControls: true (boolean) show or hide the player controls;
ratio: ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
quality: ‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”.
opacity: 0 to 1 (number) define the opacity of the video.
containment: (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element.
optimizeDisplay: true (boolean) will fit the video size into the window size optimizing the view.
loop: true (boolean) or false loops the movie once ended.
vol: 1 to 100 (number) set the volume level of the video.
startAt: 20 (number) Set the seconds the video should start at.
stopAt: 20 (number) Set the seconds the video should stop at. If 0 is ignored.
autoPlay: true (boolean) or false play the video once ready.
showYTLogo: true (boolean) Show or hide the YT logo and the link to the original video URL.
showControls: true (boolean) Show or hide the controls bar at the bottom of the page.
addRaster: false (boolean) Show or hide a raster image over the video.
realfullscreen: true (boolean) activate the new HTML5 full screen behavior.
stopMovieOnBlur: true (boolean) activate the pause behavior when the window loose focus.
gaTrack: true (boolean) activate the Google Analytics event tracker for that player.

top

6. Countdown

Time and date setting: js/cover.js in countdown section. More info on Plugin Website

top

7. Google Maps Section

Custom Google Map Skin, Address and PNG map marker (map-marker.png): js/map.js

top

8. Credits Photos and Images

Photos:

Unsplash - unsplash.com
Gratisography - gratisography.com
IM FREE - imcreator.com

Illustrations:

Once again, thank you so much for purchasing this theme. If you have any questions that are beyond the scope of this help file, please contact ForBetterWeb.com directly through the contact form on our profile page at WrapBootstrap here.

Go To Table of Contents