Light of Peace Site Template Documentation v1.0

 

Table of Contents

  1. Color Schemes
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Sources and Credits
  7. Contact form set up

Created: 04/25/2010
By: solja7
Email: edwin@population-2.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 me or you can contact me via contact form on my website.
Thank you!

A) Color Schemes

There are 5 color schemes included in this theme. Replace the css and img folder with the css and img folder from the style folder.

Style 1 (default)



Style 2



Style 3



Style 4




B) HTML Structure

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of content-left. The sidebar's content is within a div with an id of content-right. Here is the general structure of the typical page:

HTML Structure

1.HOME PAGE

Slide Structure

This page has a slide feature using easyslider. You can add a slide by adding the list item.
The image size for the slide is 640px x 280px.

Slide Structure

Unordered list with a class of "tabs" holds the tab..
tab_container
div holds the tab content. Each list item ("tabs") has an attribute of “href” that matches the ID of the .tab_content div.

.headline_box div is an expandable box.

2. NEWS PAGE

This page is a blog style page. Each post wrapped in .post div.You can add thumb-right right class to make the thumbnail image align to right. And thumb-left left class to make the thumbnail image align to left.

3. GALLERY PAGE

The image gallery used FancyBox script. You can read full documentation at http://fancybox.net/
The image size for the thumbnail is 260px x 195px.


C) CSS Files and Structure - top

I'm using four CSS files in this theme.

1. reset.css

This is Eric Meyer reset file.
Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

2. style.css

This contains the specific styling for the page. The file is separated into sections using:

  1. BASIC ELEMENTS
  2. GENERAL LAYOUT
    • Header
    • Content
    • Footer
  3. HOME PAGE
    • Slide
    • Tabs
    • Headline
  4. ABOUT US PAGE
  5. CONTACT PAGE
  6. NEWS PAGE
  7. GALLERY
  8. SERMONS
  9. MISC
    • Button
    • Pop Up Window

3. superfish.css

This contains the styling for the navigation bar (#nav).

4. jquery.fancybox-1.3.0.css

This contains the styling for the fancybox on gallery page.

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.


D) JavaScript - top

This theme imports these Javascript files.

1. jQuery

A fast, lightweight, extensible JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

2. cufon (cufon-yui.js and Bebas_400.font.js )

This script is used to replace the fonts with non-standard fonts. The font I used for this theme is Bebas. It’s free and can be downloaded at http://www.fontsquirrel.com/fonts/Bebas
You can replace any text with cufon by adding "replace" class. More information about cufon

3. superfish (superfish.js and hoverIntent.js )

Creates enhanced Suckerfish-style dropdown menus from existing pure CSS dropdown menus. Full documentation at http://plugins.jquery.com/project/Superfish

4. png fix (jquery.pngFix.pack.js)

This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Full documentation at http://jquery.andreaseberhard.de/pngFix/index.html

5. popup (popup.js)

This script is for popup window to show direction and service times information. Credits to Adrian " yEnS" Mato Gondelle www.yensdesign.com

6. easyslider (easySlider1.5.js)

This is a script to create a slideshow on the homepage. You can read further documentation at http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
This script is only embedded in the home.html.

7. fancybox (jquery.fancybox-1.3.0.pack.js)

It is a script for displaying images, html content and multi-media in a Mac-style "lightbox " that floats overtop of web page. Full documentation at http://fancybox.net/
This script is only embedded in the gallery.html.

8. jquery form (jquery.form.js)

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. This script is only embedded in the contact.html. Full documentation at http://jquery.malsup.com/form/


E) PSD Files - top

I've included ten PSDs with this theme:

  1. Home Page layout in 4 color schemes
  2. Six PSDs of the default color (green):
    • about.psd
    • contact.psd
    • gallery.psd
    • home.psd
    • news.psd
    • sermons.psd
  3. Seamless background file - texture-bg.psd

F) Sources and Credits - top

You can download the full icon sets used in this theme at:

Font used for logo is Optimus Princeps. You can download it at http://www.dafont.com/optimusprinceps.font


G) Contact form set up - top

In order to make the contact form work, you have to open the contact.php and replace 'your email' with your email address.


Thank you for purchasing this theme. Please let me know if you have any questions relating to this theme. You can email me at edwin@population-2.com. 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.

Go To Table of Contents