Table of Contents

What's Included
Background Slideshow
Contact Form
MailChimp Signup Form
Video Background
Countdown
Text Rotator
Credits

What's Included

XS is a flexible theme with minimalistic and universal design. It comes with three different versions (image, slideshow, and video background). The theme also includes a countdown and a variety of powerful jQuery plugins.

---

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

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

Ion Icons

The premium icon font
Plugin Website

Font Awesome

The iconic font and CSS toolkit
Plugin Website

YTPlayer

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

Vegas Background Slideshow

VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
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

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

Text Rotator

A light weight jQuery plugin that will allow to add rotating text to website
Plugin Website

---

Background Slideshow

XS includes jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.

Get started

Apply Vegas to body or any element.

$('#example, body').vegas({
                    slides: [
                    { src: '/img/slide1.jpg' },
                    { src: '/img/slide2.jpg' },
                    { src: '/img/slide3.jpg' },
                    { src: '/img/slide4.jpg' }
                    ]
                    });

Read the Settings page for more information.

---

Contact form

XS includes a working contact form. In order to activate the form, follow these directions:

• Open the mail/contact_me.php file.
• On line 17, 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/form.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.

---

MailChimp Signup Form

XS 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.

1. Log into your MailChimp account.
2. Go to your lists. This is usually a link on the top menu bar called "Lists"
3. 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."
4. Click on the second option that says "Embedded forms"
5. 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.
6. 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 XS template you're using!
7. 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.

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!

---

Video Background

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.

---

Countdown

Time and date setting: js/jquery.countdown.js

countdown('2016/05/22 10:00:00')

Read the Settings page for more information.

---

Text Rotator

Put every rotating words inside the <span class="rotate"></span> and separate it with a comma and the script will automatically cycle through each words in order.

Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator

Read the Settings page for more information.

---

Credits Photos

• Unsplash - unsplash.com
• IM FREE - imcreator.com