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:

Documentation - Documentation for Circle Video site template
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:

HEADER
- header - logo and navigation
- goto - goto section

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.

FOOTER

						    
								Copyrights 2016 yourcompanyname.com

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

To edit LOGO.

Open HTML file
Find logo section. You can search for "logo" keyword. Or find comments with particular description.
Find logo image tag.
```
							
```
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

css/style.css - Theme CSS (compiled from less source files)
css/font-awesome.min.css - Font Awesome
css/font-circle-video.css - Circle Video font
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/)

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

JavaScript

JavaScript files:

Theme JS - js/custom.js
jQuery - js/jquery-2.0.3.min.js
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