Contents

1. Basic Description

AIT has created for you an universal HTML/PHP template, which is accommodated for use in a wide variety of commercial websites and personal pages. The main feature of this template is the versatility, color variability and the ability to adapt it to their own needs without any major problems and less skilled programmer.

The template was designed by standard conception of classic websites. The template includes one homepage and one standardised sub page that can be configured by your web conception.

1.1. Installation

Template installation is really easy just extract files from archive and copy them to the hosting. It's recommended to have PHP enabled on the server side, without it AJAX contact form is not functional.

It is not recommended to remove any JavaScript file because all script are important for successful running of the template.

1.2. Homepage

The Homepage is designed by the consideration to use for standard website requirements that could carry out many of your needs. The main feature of template is high level of modifications and variations that you can set by the simple changing of several classes. It includes:

1.3. Subpage

The Subpage is designed by the consideration to customisation of a different contents and components you may need. You can use the all elements same as the homepage like great slider or free combinations of boxes at the top or bottom of the page. It includes:

1.4. AJAX Contact Form

Implementation of AJAX Contact Form si located in file lib/mail/contact.php. For sending e-mails is used Swift Mailer library.

Contact Form Validation

Validation of contact form is done by setting specific classes to input field or textarea. Every class has own validation rules. HTML implemetation of contact form is in contact.html file.

Basic validation rules:

required
makes the element always required
minlength( length )
makes the element require a given minimum length
maxlength( length )
makes the element require a given maxmimum length
email( )
makes the element require a valid email
url( )
makes the element require a valid url

In this example for the input field was set validation rule 'required' if we want to set addtional rule for example to check minimal lenght just write in class attribute of input tag minlength(3).

<div class="fl">
    <input type="text" class="input required" id="name" name="form[name]" />
</div>

Form more information check jQuery Validation plugin homepage.

Setting e-mail address

It is recommended to set your e-mail address for contact form. Open file lib/mail/contact.php and locate setTo() method. This method has parameter as array. As a next step change in array default values('your@mail.sk' and 'Your name') to values corresponding with your real name and e-mail address.

<?php
// Loads SwiftMailer library
require_once('swift_required.php');
// Get variables sent from contact form 
$form = $_POST['form'];
// Send email
$transport = Swift_MailTransport::newInstance();
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance()
    ->setSubject($form['subject'])
    ->setTo(array('your@mail.sk' => 'Your name'))
    ->setFrom(array($form['mail'] => $form['name']))
    ->setBody($form['message']);
$result = $mailer->send($message);      
// Return status
echo $result;   
?>

Adding New Field to Contact Form

For adding new field to contact form we use previous two examples. Copy the first example paste it in contact.html on position where you want to have new field. At next step add validation rules and set new name for field(name attribute of input tag) for example form[address].

Now you have new variable in contact form script accessible via variable $form(concrete $form['address']). We want to add the value of new variable at the end of message so we use setBody() method and append new value.

<?php
// Loads SwiftMailer library
require_once('swift_required.php');
// Get variables sent from contact form 
$form = $_POST['form'];
// Send email
$transport = Swift_MailTransport::newInstance();
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance()
    ->setSubject($form['subject'])
    ->setTo(array('your@mail.sk' => 'Your name'))
    ->setFrom(array($form['mail'] => $form['name']))
    ->setBody($form['message'] . '\n' . $form['address']);
$result = $mailer->send($message);      
// Return status
echo $result;   
?>
Gallery

This is really simple task. Just copy and paste code snippet from example. Replace image filepaths. Filepath in link tag is large image and the link in image tag is thumbnail. You have to add to link tag the class attribute with value gallery-item. If you want to have gallery groups just add to links rel attribute with same value.

<a href="image/tmp/template-red.jpg" rel="group" class="gallery-item">
    <img src="image/tmp/template-red-thumb.jpg" class="alignleft" alt="Red Template"/>
</a>

2. Color Combinations & Codes

The template was designed by standard conception of classic websites. The template includes one homepage and one standardised subpage that can be configured by your web conception. It enables a high level of customisation and many universal ways to use it in a lot of variations at your business.

2.1. Home Variations

The Homepage is designed by the consideration to use for standard website requirements that could carry out many of your needs. The main feature of template is high level of modifications and variations that you can set by the simple changing of several classes. You can see some examples here:

Background:
HTML: gradient1.gif, #333333
BODY: bubles_white.png, light
DIV.back: shadow.png

Slider:
[div class="picture box_full white"]
..[table class="description dark"]..
...[td class="text right"]...
[div class="nav box_full white"]

1-st Row of Boxes:
[div class="boxes lines_x1x1x"]
..[div class="box box_3-1"]..
..[div class="box box_3-1"]..
..[div class="box box_3-1"]..

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_3-1 black"]..
..[div class="box box_3-2 white"]..

Background:
HTML: gradient2.gif, #333333
BODY: ornament_white.png, dark
DIV.back: shadow.png

Slider:
[div class="picture box_full black"]
..[table class="description light"]..
...[td class="text"]...
[div class="nav box_full black"]

1-st Row of Boxes:
[div class="boxes lines_x1x1x1x"]
..[div class="box box_4-1"]..
..[div class="box box_4-1"]..
..[div class="box box_4-1"]..
..[div class="box box_4-1"]..

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_2-1 black"]..
..[div class="box box_2-2 black"]..

Background:
HTML: gradient_gold_sky.gif, #333333
BODY: gold_sky.jpg, dark
DIV.back: bubles_white.png

Slider:
[div class="picture box_full black"]
..[table class="description dark"]..
...[td class="text"]...
[div class="nav box_full black"]

1-st Row of Boxes:
[div class="boxes lines_x1x0x1x"]
..[div class="box box_4-1"]..
..[div class="box box_4-2"]..
..[div class="box box_4-1"]..

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_4-1 black"]..
..[div class="box box_4-3 black"]..

Background:
HTML: gradient_blue_sky.gif, #333333
BODY: blue_sky.jpg, dark
DIV.back: ornament_black.png

Slider:
[div class="picture box_full white"]
..[table class="description dark"]..
...[td class="text"]...
[div class="nav box_full white"]

1-st Row of Boxes:
[div class="boxes lines_x0x1x0x"]
..[div class="box box_4-1 black"]..
..[div class="box box_4-1"]..
..[div class="box box_4-1"]..
..[div class="box box_4-1 black"]..

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_4-1 white"]..
..[div class="box box_4-2 white"]..
..[div class="box box_4-1 white"]..

2.2. Subpage Variations

The Subpage is designed by the consideration to customisation of a different contents and components you may need. You can use the all elements same as the homepage like great slider or free combinations of boxes at the top or bottom of the page. You can see some examples here:

Sidebar:
[div id="sidebar"]
..[div class="sidebox"]..sidesearch
..[div class="sidebox"]..submenu
..[div class="sidebox"]..sidepost

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_1-1 black"]..
...[div id="content_links"]...
.... [widget boxes] ....

Sidebar:
[div id="sidebar"]
..[div class="sidebox"]..sidesearch
..[div class="sidebox"]..submenu
..[div class="sidebox"]..sidepost

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_1-1 black"]..
...[div id="content_links"]...
.... [widget boxes] ....

Sidebar:
[div id="sidebar"]
..[div class="sidebox black"]..sidesearch
..[div class="sidebox white"]..submenu
..[div class="sidebox black"]..sidepost

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_1-1 black"]..
...[div id="content_links"]...
.... [widget boxes] ....

Sidebar:
[div id="sidebar"]
..[div class="sidebox"]..sidesearch
..[div class="sidebox black"]..submenu
..[div class="sidebox"]..sidepost

2-nd Row of Boxes:
[div class="boxes"]
..[div class="box box_1-1 white"]..
...[div id="content_links"]...
.... [widget boxes] ....

3. Slideshow

Slideshow display multiple images with descriptions one by one using visual effects. You can use arbitrary amount of slides.

Slideshow

3.1 Controlling Slideshow

There are two ways how to control slides in slideshow. In first way you can just click on the large arrows situated in slideshow. When you click on left arrow the previous slide is displayed but when you click on right arrow next slide is displayed.

In second way you can use bullets situated over the main image. The number of bullets describes how many slides the slideshow has and active slide. Clicking on the bullets you can change the slides. The benefit of using bullets over the arrows is that you can jump over the two or more slides.

3.2 Adding Slides

When you want add new slides to slider just copy and paste image. If you want short description for image just fill title attribute of image.

<div class="slides">
    <img src="images/tmp/slide5.jpg" alt="" title="Text of the first slider defined by title attribute of this image" />
    <img src="images/tmp/slide6.jpg" alt="" title="Fill title attribute of the second image" />
    <img src="images/tmp/slide7.jpg" alt="" title="This is the description of the third slider picture" />
    <img src="images/tmp/slide8.jpg" alt="" title="Fill title attribute of the fourth image here" />
</div><!-- /#slider_items -->

3.3 Slideshow speed

If you are not satisfied with the default speed of slideshow you can easily change it just open file js/script.js. At next step locate the line where the slideshow function is defined and change value of timeout parameter. The value of animSpeed parameter is in miliseconds.

When you want change speed of the slider just locate JavaScript definitions of slider in js/script.js file and change animSpeed parameter value. The value is in miliseconds.

/* ********************************************************************* */   
// Slider Nivo
$('#slider .slides').nivoSlider({
  effect:                   'random',
  slices:                   15,
  animSpeed:                500,
  pauseTime:                4000,
  startSlide:               0, 
  directionNav:             true,
  directionNavHide:         false, 
  controlNav:               true, 
  controlNavThumbs:         false,
  controlNavThumbsSearch:   '.jpg', 
  controlNavThumbsReplace:  '_thumb.jpg', 
  keyboardNav:              true, 
  pauseOnHover:             false,
  manualAdvance:            false, 
  beforeChange:             function(){
  },
  afterChange:              function(){     
  },
  slideshowEnd:             function(){}    
});

4.Code Validations

4.1.Valid HTML

The HTML code is valid as XHTML Strict 1.0 doctype and uses simple tableless design. Validity is tested by w3.org and the design is composed width consideration to Internet Explorers 7+, Firefox, Opera, Chrome and Safari.

XHTML Strict 1.1 Valid

The template was successfully checked as XHTML 1.1 Strict. This means that the resource in question identified itself as "XHTML 1.1 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).

4.2 Valid CSS

All CSS styles are valid as CSS 2.1 standard. The validity of CSS files was checked by The W3C CSS Validation Service.

CSS 2.1 Valid

5. The Files Structure

Here is the description of contents that creates template layout and includes basic elements of the website:

5.1. Directories

css/
CSS files
image/
images which are required by CSS
js/
JavaScript files
lib/
PHP libraries for sending mails and debugging PHP code
doc/
documentation page for Glamorous web template

5.2. HTML Files

index.html
start file - homepage which contains advanced image slider
index2.html
start file - homepage variation 2
index3.html
start file - homepage variation 3
index4.html
start file - homepage variation 4
about.html
subpage with information about your company
contact.html
subpage with functional AJAX contact form with basic JavaScript validation
portfolio.html
simple portfolio subpage
conception.html
information about template benefits
solution.html
basic template layout with boxes descriptions
structure.html
main information about template main structure
style-settings.html
all formatting styles in one page
validity.html
HTML & CSS validation information
blog.html
simple blog page
gallery.html
image gallery powered by Fancybox
combinations.html
boxes combinations

5.3. CSS Files

screen.css
master CSS file contains main CSS rules
print.css
formats template for print devices(hide main menu, footer, etc.)
reset.css
this CSS file sets default values for HTML tags
ie7.css
additional CSS rules for Internet Explorer 7
nivo-slider.css
styles just for nivo slider interface

5.4. JavaScript Files

jquery.js
jQuery - JavaScript framework
jquery.fancybox.js
jQuery plugin - advanced image lightbox and galleries
jquery.nivo.slider.js
jQuery plugin - image slider
jquery.validate.js
jQuery plugin - advanced forms validation
script.js
own jQuery code snippets

5.5 PHP Files

Swift Mailer
mailing library for sending mails with a multitude of features

6. Online Documentation

Please visit the following url to get extended and always updated documentation.