# Circle Video

## Premium HTML 5 website

- Created: August 2016.
- By: azyrusmax - Envato author
- Portfolio
- Developed By: cokolloo - Envato author
- Profile

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!
Circle Video is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 10. It's powered by jQuery and you'll find nice and discreet interactivity. Also. The code is clearly written and you will find comments for each considerable parts.
Lets take a closer look at the structure of Html, Css, JavaScript

### Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 3 folders.

Here they are, sorted alphabetically:

1. Documentation - Documentation for Circle Video site template
2. HTML - Main folder for template

### How to Edit Template

This is HTML template. It doesn't include backend features. To edit template page you should edit source code.

To edit source code you should be familiar with HTML, CSS, JavaScript and LESS languages.

You can use your favorite text editor. For example Notepad++ - https://notepad-plus-plus.org/

You should use LESS compiler to compile CSS files from LESS source files. For example WinLess - http://winless.org/

Below you will find files structure.

### HTML Structure

Body part of the Html file is divided in three main sections and each of these sections is further divided into smaller parts:

1. HEADER
   - header - logo and navigation
   - goto - goto section
2. CONTENT

   10 pages:

   - index.html - Home page
   - single-video.html - Video page
   - channel.html - Channel page
   - upload-edit.html - Edit video page
   - upload.html - Upload new video page
   - signup.html - SignUp page
   - search.html - Search page
   - login.html - Login page
   - history.html - History page
   - categories.html - Category page

   Content on each page divided into blocks. All blocks wraped with comments which are self explained.

                                    ...

                                    ...

                                    ...

                                    ...

3. FOOTER

       								Copyrights 2016 yourcompanyname.com

HTML code includes comments which makes it easyreading and self-explanatory.

To edit LOGO.

1. Open HTML file
2. Find logo section. You can search for "logo" keyword. Or find comments with particular description.
3. Find logo image tag.

4. Edit 'src' attribute to change logo.

##### Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    		<!DOCTYPE html>
            <html lang="en">
                ...
            </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a `.row` and add the appropriate number of `.col-lg-*` columns. As this is a 12-column grid, each `.col-lg-*` spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

    		<div class="row">
    		  	<div class="col-lg-4">...</div>
    		  	<div class="col-lg-8">...</div>
    		</div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using `.col-lg-offset-*` classes. Each class increases the left margin of a column by a whole column. For example, `.col-lg-offset-4` moves `.col-lg-4` over four columns.

    		<div class="row">
                <div class="col-lg-4">...</div>
                <div class="col-lg-4 col-lg-offset-2">...</div>
            </div>

### CSS Files

CSS theme file was compiled from LESS source files. It's not recommended to edit CSS file. Edit LESS file and compile CSS

1. css/style.css - Theme CSS (compiled from less source files)
2. css/font-awesome.min.css - Font Awesome
3. css/font-circle-video.css - Circle Video font
4. css/bootstrap.css - Bootstrap

### LESS Files

LESS files are structured and dived by pages and sections.

Use any less compiler to compile source files in CSS. I use WinLess compiler (http://winless.org/)

1. css/style.less - Theme LESS file. Main file which includes all other files.
2. css/less/_general.less - Global theme styles and variables
3. css/less/_header.less - Header block styles
4. css/less/_footer.less - Footer block styles
5. css/less/_content.less - Home page content blocks styles
6. css/less/_search.less - Search page content blocks styles
7. css/less/_upload.less - Upload / Edit video content blocks styles
8. css/less/_account.less - SignUp / Login content blocks styles
9. css/less/_categories.less - Categories content blocks styles
10. css/less/_history.less - History content blocks styles
11. css/less/_channel.less - Channel content blocks styles
12. css/less/_singlevideo.less - Single Video content blocks styles

### JavaScript

JavaScript files:

1. Theme JS - js/custom.js
2. jQuery - js/jquery-2.0.3.min.js
3. Bootstrap - js/bootstrap.min.js

### PSD Files

- Photoshop files are not included in this Theme, you can purchase the PSD format files on Themeforest

### Sources and Credits

I've used the following scripts, icons or other files as listed.

WARNING!!! Demo images are not included into template source files. You should purchase images separatly. Demo images are used from photodune.net

- jQuery - JavaScript Library
- Bootstrap - Bootstrap by Twitter
- Font Awesome
- Hind Google font

Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the Circle Videos and asking your question in the "Item Discussion" section.

If you are satisfied with "Circle Video - site template" please go to your downloads section on ThemeForest.net and rate Circle Video with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Circle Video as much as I've enjoyed designing this template.

Kind Regards,
azyrusmax