Documentation

Cheers for your purchase.
You are eligible to free download of all future updates once you purchased Csoon Template. Download the latest version anytime from here Free support via email: [email protected]

CSOON-Coming Soon-Template

 
Table of Contents

  1. What's Included
  2. Plugins
  3. Background Slideshow
  4. MailChimp Signup Form
  5. Smooth Page Scrolling
  6. Video Background
  7. Countdown

1. What's Included

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

2. Plugins

The following plugins are used in the Csoon 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

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

3. Background Slideshow

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

4. MailChimp Signup Form

Csoon 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 Csoon 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!

5. 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 constantly 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, class page-scroll 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" class="page-scroll">Link Text</a>

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

7. Countdown

Time and date setting: js/csoon.js

countdown('2017/12/31 23:59:59')

Read the Settings page for more information.

Once again, thank you so much for purchasing this theme.
You are eligible to free download of all future updates once you purchased Csoon Template. Download the latest version anytime from here Free support via email: [email protected]

Go To Table of Contents