“Simple HTML Theme Documentation” by “Michael Reimer” v1.0

“Simple HTML Theme Documentation”

Created: 20/06/2012
By: Michael Reimer
Email: info@bestpsdfreebies.com

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 website's contact form here.

Table of Contents

  1. Template overview
  2. Getting Started
  3. Add Your Logo
  4. Create Primary Navigation
  5. Edit the Sidebar
  6. Edit the Footer
  7. Setting up the Home Page
  8. About Page / Page Template with Sidebar
  9. Services Page
  10. Team Page
  11. Filterable Work Page
  12. Contact Page
  13. PSD Files
  14. Sources, credits and helpful links

Template overview - top

Hi, firstly I would like to thank you for purchasing my template. In this section I`ll briefly introduce Simple's features. So lets start.

Template features:

Spotlight Works in:

To make some order in this documentation I`ll go over each page and the features they each include

Getting Started - top

Simple is a clean & simple template, written in valid HTML 5, and is a highly professional layout. Please follow this documentation to make the best use out of this awesome theme.

Installation

Simple is HTML template so there's no real "installation" required. Just unzip the main file you've downloaded from Themeforest and after unzipping you have your all template ready to be used. Open the folder simple and upload these files to your server. You are now ready to make changes to your theme.

By default you will have dummy content populating your website. You will have to take out and replace content as needed. Please follow the instructions in the following sections below.

Add Your Logo - top

Adding your own logo to the website is really quite simple. All you have to do is create your logo graphic file and upload it to the images folder. Then go into the css file (all.css) and change the code to now reflect your logo image. You may have to change the width and height attributes as well depending on the size of your logo image. Reference the image below to get a better understanding of the css code you will have to change. The great thing is that you only have to change this code once and it is affected on all pages on your website.

Create Primary Navigation - top

You will have to edit the primary navigation at the of the page on every page you create for you website. After you create it on one page, all you have to do is copy and paste it on every other page.

One thing to take note is of how to create drop down menu's. You will have to create an inner unorder list with the primary navigation item list tag. Then make sure to place the drop-item class in the link tag for the primary navigation item. Reference the below image to get a better idea of what Im meaning.

Edit the Sidebar - top

The sidebar is a section found on most pages and can be edited on each page to display any content you want to. It is wrapped between 2 div tags with id sidebar. Then within in the sidebar div tags you can have several widgets / sections. Each of those sections are wrapped within a div tag with the class side-box. You can make as many sections as you want. Reference the image below to gain a better understanding.

Edit the Footer - top

The footer section is wrapped between 2 div tags with the id footer. Edit the content in the code as needed here. Pretty straight forward edit.

Setting up the Home Page - top

The home page has a bunch of sections that need to be updated. These sections include the logo, primary navigation, 3 featured areas, call-out section, newsletter sign up form, and home page about blurb.

Home Page Slider

Currently the way it is set up, the front slider incorporates a graphic with some content. I will go through on how to update the slider.

The slider is wrapped between 2 div tags with the class gallery-area. Each slide is wrapped between a list tag. It is important to keep the images around the size of 476 px wide by 327px high. As well, it is best to have the images be png format to make use of the background. You can also add a button to each slide as indicated in the code preview image below. Edit the code as needed for the slider. You can have as few or as many slides as you want.

Featured Section

This section is located right below the slider and has 3 containers to feature 3 important items for your website.

The featured section is wrapped between 2 div tags with the class info-area. Each featured section is wrapped between 2 div tags with the class block. Here it is important to take note that the h3 tag pulls an image background for the title. By default you have 3 default titles of Join Us, Packages, and Get Support. If you want more section titles, then you will have to create more graphic titles. I used impact font for the current titles. As well, the buttons at the bottom of each featured section are graphic images. By default there buttons with the titles Join, Browse, or See How. You can create more buttons by editing the psd files included with this theme. Edit each section as you would like. Please reference the code preview below to get a better understanding of how each section is coded.

Call-To-Action Section

This section is located right below the Featured Section. This section is great to call out a service or a specific action you want your customers to do.

This section is wrapped between 2 div tags with the class info-row. Just update the link tag as needed.

Newsletter Signup Section

This section is located in the bottom right hand side of the homepage. This section would be very useful to attract users to sign up for your business' monthly newsletter. This section is 100% customizable and you can change the form as needed.

Text Section

This section is located in the bottom left hand side of the homepage. This section would be used to let people know a bit about your company, or some content you want the users to read. Update this section as needed.

No section is set in stone on what you need to do, but gives you a great start on how to setup your home page. Edit the page as needed.

About Page / Page Template with Sidebar - top

The about page gives you a great page template with a right sidebar. Also on this page there are several shortcodes you can use throughout your website. Ill go over these in this section.

Page Title / Subtitle

Every page has a top title with a sub title below. The section is wrapped between 2 div tags with the class ttl-holder. The H1 tag is the main title and the H2 tag is the sub title. Edit as needed for each page. Reference the image below to get a better idea of the code needed to be edited.

Main Content

The main content which you will have to edit can be found between the 2 div tags with the class txt-section. Edit this section as you will.

Shortcodes

We have several pre-made shortcodes / styles you can use. I will go through each of the styles below with images to reference.

Image Left Float

This would be extremely useful for placing images throughout pages you create. Just edit the image tag with your appropriate url between the 2 div tags with the class img-box. Reference the image below to get a better understanding of the div structure and code changes needed.

Drop Cap Letter

This shortcode is useful for a beginning paragraph style. Just edit the appropriate letter between the 2 strong tags with the class big-letter. Reference the image below to get a better understanding of the div structure and code changes needed.

Blockquote

For this shortcode all you need to do is place blockquote tags around the paragraph tag you want to turn into a quote. Reference the image below to get a better understanding of the div structure and code changes needed.

2 Columns

This shortcode is useful for organizing content into 2 columns. To create 2 columns you first have to have a parent div tag with class two-columns. Then create 2 more div structures with class block. Inside these inner div tags you can place any content you want and they will be in 2 columns. Reference the image below to get a better understanding of the div structure and code changes needed.

3 Columns

This shortcode is useful for organizing content into 3 columns. To create 3 columns you first have to have a parent div tag with class three-columns. Then create 3 more div structures with class block. Inside these inner div tags you can place any content you want and they will be in 3 columns. Reference the image below to get a better understanding of the div structure and code changes needed.

Alert Messages

Alert messages are useful for letting the user know something that they need to know right aways. We have provided you with 4 alert message styles (success, error, warning, and info message). Each alert message is coded by a span tag with different classes for each alert style. Class alert-text01 is for Success Alert Message. Class alert-text02 is for Error Alert Message. Class alert-text03 is for Warning Alert Message. Class alert-text04 is for Info Alert Message. Reference the image below to get a better understanding of the div structure and code changes needed.

Pricing Tables

We have also got a pricing table shortcode you can use to display costs for services or products you want to sell. For this shortcode it is a lot easier to explain by looking at the code. Reference the image below to get a better idea. Here it is important to take note that the h3 tag pulls an image background for the title. By default you have 3 default titles of Basic, Value, and Custom. If you want more section titles, then you will have to create more graphic titles. I used impact font for the current titles.

Services Page - top

This page is rather simple. Here you can explain what services you have for your business. Each service is wrapped between 2 div tags with the class service. This is basic page template turned into a service page. Feel free to edit this page as you will.

Each service then has its own service page (service1.html) Where you can in depth explain your service and utilize the pricing tables as needed. Just another page to use if you want.

Team Page - top

This page is rather simple as well. Here you can in a nice and organized way show your business / team members. With this page template you can write a little bio about each person, share their business title, and education info. Also can have a link to each member's twitter account, Facebook account, and email. Definitely a handy little template. This page is a standard page and change the code as needed. Pretty straight forward page.

Filterable Work Page - top

This page is one of the cool features of this theme. You can uniquely display your latest work in a collage of images that can be filtered by categories, which you set.

Image Requirements

When editing this page and adding your own work items, there are a couple things to keep in mind. The images must be 220 px wide. The height is variable.

Filterable Category Section

Right next to the page title is a row of categories which the user can click on to see more specified items based on a category. This section is very important to understand.

This section is created by a unordered list. Each list item has a link tag. Each link tag must have the path go to #filter and have the data-option-value equal your category. Reference the image below to get a better understanding.

Gallery Section

This section is where the work items are organized.Make sure to add each item within the unordered list in its own list tag. Make sure to add a class tag of the specified category you want it to be found under. Then add a url for the specific work page. The next couple span tags are used for the hover affect. Add your title and sub title here. Please reference the image below to gain a better understand on how things are coded here.

Contact Page - top

This page provides a great way for people to contact you. You can edit the content above the form as needed. The contact form simple to use and get up and running. all you have to do is find send.php and add your email in the to spot. Its that simple to do. Reference the image below to see exactly what I mean.

PSD Files - top

Under the psd folder in the main download file you can unzip the psd.zip file and have access to 7 highly detailed psd files for your complete customization.

Credits and helpfull links - top

Fonts

Graphics

End of documentation

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.

Michael Reimer | Best PSD Freebies

Go To Table of Contents