Template Documentation

0. Tips & Tricks

How Do I Put My Logo To The Header?

It's relatively simple! First, you need open every html file you have in the package and in the header section change h1 class="logo" to h1 class="logo img". After, open style.css file in a text editor of your choice and look for .logo.img a and put the URL to your logo image where the comment tells you to. Also you might wanna change the width of the logo container if necessary.

How Am I Supposed To Change Section's Background?

In order to do this just change the class of the corresponding section. The classes that currently exist consisted of the prefix back- and the suffix diagonals, hexagons, crosses, ticksanddots. You can create your own backgrounds, but you might need at least basic CSS knowledge in order to do this.

How To Make The Contact Form To Send Messages To My Email?

It's pretty easy. Just follow the instructions described here.

How To Use Columns?

It's very easy. First you should create a div with a class column-container, then add another div with classes column and another class which specifies which column it will be, for example one-third. So if you want to have 3-columned content you just add 3 divs with the same class column one-third and then put content as usual inside of each div. And don't forget to add class last to the last column in a row so it won't collapse to the row below.

The template supports the following column classes: full-width, one-third, two-thirds, one-half, one-fourth, three-fourths. The titles are self-explanatory. You can also always copy-paste from the example given in the demo.

1. HTML Files Included

The package includes 10 HTML templates:

• 1. index.html - home page
• 2. about.html - about page
• 3. blog.html - page with a list of posts
• 4. blog_post.html - single blog post page
• 5. contacts.html - contacts page
• 6. portfolio.html - portfolio page
• 7. portfolio_single_fw.html - portfolio work page with no sidebar
• 8. portfolio_single_sbleft.html - portfolio work page with left sidebar
• 8. portfolio_single_sbright.html - portfolio work page with right sidebar
• 10. single.html - single page containing inline styles all other features

2. HTML Structure

Please take into account that you will need at least basic knowledge of HTML in order to edit the content. Otherwise you might incidentally disrupt the structure in a way which might prevent page from being rendered as expected.

This theme is a HTML layout built based on the latest HTML5 web standard. It supports almost every screen resolution that is possible, which some might call being responsive. The structure includes (i) a header, a set of separate (ii) sections, and (iii) a footer. As mentioned, the markup was created with modern web-standards in mind and more likely not to work correctly on older browsers.

Please look at the rough layout structure given below:

Fig.1 shows that theme structure uses HTML5 elements such header, section and footer. So this markup will not work in browsers that do not support modern web-standards.

1.1. Header

Header contains such elements as logo and navigation. Navigation is a set of passive links that jump to a corresponding section if clicked. You can insert URLs into href attributes in case if you need to redirect user to a new page.

1.2. Sections

Each section is a very flexible container for any kind of content. Although, as you can see on Fig.1, there're several custom styles for a specific section visualization cover, features, team, testimonials, and subscribe. ou can apply a custom style to any section by applying an id attribute to a corresponding section. Also all the sections can be customized by applying classes (see Fig.1) to it. Each class change section's background pattern (see demo).

1.3. Footer

Footer is a thin dark-grey line at the very bottom of the page. It contains copyrights and links to social profiles.

2. CSS Files and Structure

Please take into account that you will need at least basic knowledge of CSS in order to edit the styles. Otherwise you might incidentally disrupt the styles in a way which might prevent page from being rendered as expected.

I'm using only one CSS file style.css which is located inside s (for styles) folder.

This file contains all the stylings and also the CSS-reset located at the very top of the file. Keep in mind, that these values might be overridden somewhere else in the file. The file is separated into sections using:

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Please note! I'm using specific CSS3 properties (like multiple block shadows and gradients) somewhere in the code so the template might not render as expected in older browsers.

3. JavaScript

Please take into account that you will need at least basic knowledge of Javascript and jQuery in order to edit the scripts. Otherwise you might incidentally prevent page from being rendered as expected.

This theme imports 3 Javascript files located inside j (j is for javascript) folder.

• jquery-latest.min.js - the latest minified vesrion of the jQuery framework;

• jqueryTouchSwipe.min.js - the minified version of the touchSwipe plugin that allows touch gestures support;

• custom.js - file containing my custom code;
• custom-min.js - compressed version of custom.js;

jquery-latest.min.js

is a minified compilation of jQuery. I suppose you'll never want to make changes within this library so I linked the minified version in order to reduce the file size.

jqueryTouchSwipe.min.js

is a minified version of the plugin. As with the previous one, I suppose you'll never want to make changes within this library so I enclose the minified version in order to reduce the file size.

custom.js

This file includes several jQuery functions responsible for variety of different types of interactions, content adaptation, touch gestures processing, google analytics integration.

custom-min.js

The minified version of custom.js. Use it if you don't want to change the code and in order to reduce the file size.

4. PHP Files

Theme contains only one very simple PHP file which is responsible for sending a mail. File is called sendmail.php and located in the p (p is for PHP) folder of the theme. Function composes message out of the query which it receives from AJAX function and sends it to a corresponding email address. In order to specify the email address to which all messages will be submitted find the following line in the sendmail.php file (as shown on Fig.6).

... and change yourname@yourdomain.com to the desired email address, along with the subject, and save the file.

Please note! To edit php files you will need to have at least basic knowledges of PHP otherwise letters sent by the form on the page may never reach you.

5. PSD Files

I've included 2 .psd files with this template:

cover_template.psd - this file contains a template which allows you to create your own cover image.

This .psd file contains guides and notes that will help you to understand it. Please enable both in Photoshop in order to achieve that.

back_pattern_template.psd - this file contains a template of the background texture that is used on the "Features" (see the demo) section. You can change the color and the depth of the texture, then save it and use it in the template.