1. Start
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. Template customization
  6. Installing the Template
  7. PSD Files
  8. Sources and Credits

Awesome HTML Template - Onepage Portfolio & Blog

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! this is my e-mail: jmartinez@imaginacionweb.net

HTML Structure

This theme has a responsive design with variation of column layouts depending on the page.This theme is based on bootstrap 1170px (12 columns), which will help streamline any customization you want to perform. If you are unfamiliar with grid system, be sure to read about it here.

The main structure of this site is wrapped in a "container" div, followed by a "row-fluid" div. These div Within each section is given a site's home grid size equaling all 12 columns long.

This topic has the following structure has aslide or section, and footer content, this is the following structure:

If you would like to edit the color, font, or style of any elements in one of these columns, you would search the classes´ names or id´s names and go to css, search the name selected and make the changes that you want  :

Note: If you want change something about I.E.  in the  folder folder "css" there is one called "ie".   Also, there is a file called simple-menu-ie.css where is styles of menu

CSS Files and Structure

I'm using a master file of CSS (styles.css) in this issue that you are free to change depending on the customization you want. four are also three additional stylesheets that change is not recommended. Style sheets lies in the 'CSS' folder and their subfolders, such as slide/style.css. The web page additional stylesheets are:

  1. styles.css - The main stylesheet is encouraged to modify.
  2. bootstrap.css - This style sheet is required for grid system bootstrap. Read more about this system here.
  3. ie.css - This stylesheet IESS shim is in Internet Explorer 8.
In the folder "css" there is a file called "styles.css", this file has the principal structure that uses our theme, and is defined with this order:

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.



the Javascript folder is "js" and Inside it, there are folders, too. the name of each folders does references to the function of each files.  For example, in the folder "js" there is a folder with name "slide", this folder does reference to the slide´s functions.
also, in the javascript folder there are one files called "jquery-func.js", this file executes the functions of the scripts that are in the folders.
this file is divided with the next structure:



  1. http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
  2. jquery-ui.min.js
  3. jquery.fancybox.js
  4. smooth-scroll.js
  5. masonry.js
  6. tinynav.js
  7. jquery.sticky.js

Template customization


Locate the name of the image you want to change in the. Html img and then look in that name, and proceed to put your choice.


To make changes to information follow the instructions above for images for headings and paragraphs open the. Html decee modify and change the content you want. be careful not to delete any labels to avoid damaging the design, consider which opens and closes each, can be guided with the comments in each. html.

Installing the Template

You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

Once you have downloaded the files from ThemeForest, open the html folder. find 3 folders in this well (css, img and js) and 3 html files.

Getting the Template Online

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
  2. Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
  3. Find the folder you want to upload domain template files to your server. You will want to click and drag all the files that you have marked. within the html folder, which includes the 3 folders (css, images and js) files. html you want to display.
  4. Once the files are made up, you can access the site.

PSD Files


Sources and Credits

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

Included in the folder "help"

Open source projects & jQuery
Google WebFonts

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.