Contents

1. Basic Description

AIT has created for you an universal HTML/CSS backend template, which is accommodated for use in a wide variety of commercial backends. 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 backends. The template includes one homepage and one standardised login page that can be configured by your backend conception.

1.1. Features

1.2. Installation

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

1.3. Basic Page Information

Basic page contains all HTML elements needed for backend template.

1.4. Login Page Information

TERMINATOR Login Page

Login page contais only login form used by user to login into the system.

2. Data Table

Data tables are used to show information in ordered format. We provide two variants of these forms. First variant is really simple and ready for your customization. Second variant is advanced data table with ready for use pager, column ordering, searching ...

2.1 Simple Data Table

TERMINATOR Simple DataTable

Simple Data Table HTML Structure

If you want to display information in your own way use simple data table. Copy and paste bunch of code below and CSS rules are automatically applied on table but there is no JavaScript code which powers this kind of table.

<table>
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Content for column 1</td>
        <td>Content for column 2</td>
        <td>Content for column 3</td>                                                                
    </tr>
</tbody>
</table>

2.2. Advanced Data Table

TERMINATOR Advanced DataTable

Advanced Data Table HTML Structure

The difference between simple and advanced data table in HTML structure is datatable class added to advanced HTML code. It is important to add this class to HTML tag table which is used to recognize advanced data table by JavaScript.

Advanced data table consists of table head - thead and body - tfoot. Without table thead and tbody the advanced data table will not work correctly and throws JavaScript errors.

Main features of using advanced data table are:

<table class="datatable">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Content for column 1</td>
        <td>Content for column 2</td>
        <td>Content for column 3</td>                                                                
    </tr>
</tbody>
</table>

Advanced Data Tables Options

Advanced data table is created by jQuery plugin which you can download here. If you want to create advanced data table just create HTML structure described thereinbefore.

This jQuery plugin has a lot of options but we set only the most important options. For more information about plugin's options visit this link but the default plugin's options create the most common table.

This code is located in js/script.js file.

function InitTables () {
    $('.datatable').dataTable({
        'bLengthChange': true,
        'bPaginate': true,
        'sPaginationType': 'full_numbers',
        'iDisplayLength': 2,
        'bInfo': false,
        'oLanguage': 
        {
            'sSearch': 'Search all columns:',
            'oPaginate': 
            {
                'sNext': '&gt;',
                'sLast': '&gt;&gt;',
                'sFirst': '&lt;&lt;',
                'sPrevious': '&lt;'
            }
        },        
        'aoColumns': [ 
            { "bSortable": false },
            null,
            null,
            null,
            null,
            null,
            null
        ]    
    });
}

3. Charts

TERMINATOR Chart Bar TERMINATOR Chart Line
TERMINATOR Chart Area TERMINATOR Chart XRay

3.1. Creating Chart

Copy and paste bunch of code below and change table cells data by your own data. Adding the visualize1 class to table is used to recognize chart information for JavaScript. If you want do display chart and table just remove style attribute from table.

For more information about this jQuery charting plugin visit this page.

This code is located in js/script.js file.

<table class="visualize1" style="display: none;">
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>120</td>
            <td>140</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
        </tr>
        <tr>
            <th scope="row">Laura</th>
            <td>80</td>
            <td>40</td>
        </tr>
    </tbody>
</table>

3.2. Setting Chart Type

Open js/script.js and find InitGraphs function. Change type attribute to new value from chart types.

Chart types:

function InitGraphs () {
    $('.visualize1').visualize({
            'type': 'pie',
            'width': '200px',
            'height': '200px'
    });

    $('.visualize2').visualize({
            'type': 'bar',
            'width': '200px',
            'height': '200px'
    });
}

4. WYSIWYG

For a big popularity of WYSIWYG editors we implemented two versions of these editors. First version uses jQuery WYSIWYG plugin for simple editor but if you want advanced editor use second version which implements TinyMCE editor.

4.1. jQuery WYSIWYG

HTML structure

Create textarea and apply jwysiwyg class.

<textarea rows="" cols="" class="jwysiwyg"></textarea>

JavaScript code

For more information about this jQuery plugin visit this page or github page.

This code is locatend in js/script.js file.

$('.jwysiwyg').wysiwyg({
    controls: {
        strikeThrough : { visible : false },
        underline     : { visible : true },

        separator00 : { visible : true },

        justifyLeft   : { visible : true },
        justifyCenter : { visible : true },
        justifyRight  : { visible : true },
        justifyFull   : { visible : true },

        separator01 : { visible : true },

        indent  : { visible : true },
        outdent : { visible : true },

        separator02 : { visible : true },

        subscript   : { visible : true },
        superscript : { visible : true },

        separator03 : { visible : true },

        undo : { visible : false },
        redo : { visible : false },

        separator04 : { visible : false },

        insertOrderedList    : { visible : true },
        insertUnorderedList  : { visible : true },
        insertHorizontalRule : { visible : true },

        separator07 : { visible : false },

        cut   : { visible : false },
        copy  : { visible : false },
        paste : { visible : false }
    }
});

4.2. TinyMCE

HTML structure

Create textarea and apply tinymce class.

<textarea rows="" cols="" class="tinymce"></textarea>

JavaScript code

For more information about this jQuery plugin visit this page.

This code is locatend in js/script.js file.

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : '../js/tiny_mce/tiny_mce.js',
    // General options
    theme : "advanced",
    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,
               insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
               fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

    // Theme options
    /*
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
                                 justifyleft,justifycenter,justifyright,justifyfull,
                                 styleselect,formatselect,fontselect,fontsizeselect",
    */
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
                               justifyleft,justifycenter,justifyright,justifyfull,styleselect",
    /*
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,
                                 numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,
                                 unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,
                                 preview,|,forecolor,backcolor",
    */
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,
                               numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink",
    /*
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,
                                 emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    */
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
                               styleprops,|,cite,abbr,acronym,del,ins,attribs,|,
                               visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // Example content CSS (should be your site CSS)
    content_css : "css/content.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "lists/template_list.js",
    external_link_list_url : "lists/link_list.js",
    external_image_list_url : "lists/image_list.js",
    media_external_list_url : "lists/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
        username : "Some User",
        staffid : "991234"
    }
});

5. Fancybox

TERMINATOR Fancybox Modal Windows

5.1. Fancybox Image

Creating fancybox image is ultra simple step. It is recommended to link an image thumbnail to original image.

<a href="img/tmp/autumn1.jpg">
   <img src="img/tmp/thumb/autumn1.jpg" alt="Envato Image" class="fr" />
</a>

When you have a lot of images and you want switch gallery images on the fly just add rel attribute with group name to link.

<a href="img/tmp/autumn1.jpg"rel="group">
    <img src="img/tmp/thumb/autumn1.jpg" alt="Envato Image" class="fr" />
</a>

5.3. Fancybox Modal Window

<a href="#modal" class="modal-link">Open Modal</a>
<!-- MODAL WINDOW -->
<div id="modal" class="modal-window">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. &nbsp;&nbsp; 
        <a onclick="$.fancybox.close();" href="javascript:;">Close</a>
    </p>
</div>

6. Tabs

TERMINATOR Tabs

HTML Structure

<div class="content-box">
    <div class="box-header clear">
        <!-- Box tabs -->
        <ul class="tabs clear">
            <li><a href="#data-table">Data Table</a></li>
            <li><a href="#table">Table</a></li>
        </ul>        
        <h2>Box Title</h2>
    </div>
    
    <div class="box-body clear">
        <!-- DATA TABLE -->
        <div id="data-table"></div>>        
        <!-- TABLE -->
        <div id="table"></div>
    </div> <!-- /.box-body -->
</div> <!-- /.content-box -->

JavaScript

/* Tabs */
$('.content-box .tabs').idTabs();

7. Icon Bar

TERMINATOR Icon Bar

HTML code

If you want set active element in icon bar just add active class to li element

<!-- ICONBAR -->
<div class="content-box clear">
<div class="box-body iconbar">
    <div class="box-wrap">
    <div class="main-icons" id="iconbar">
        <ul class="clear">
            <!-- YOUR ICONBAR ITEMS HERE -->
        </ul>
    </div>
    </div>
</div>
</div>

JavaScript code

// Look for active element
indexStart = 1;
$('#iconbar li').each( function(index) { 
        if ($(this).hasClass('active')) 
            indexStart = index;
});
// Initialize carousel plugin
$('#iconbar').jcarousel({
    start:          indexStart,
    scroll:         7,
    buttonPrevHTML: '<span>&lt;</span>',
    buttonNextHTML: '<span>&gt;</span>',
    initCallback:   function (instance, state) {}
});    
instance = $('#iconbar').data('jcarousel')
// Roll on active element
if (indexStart >= 7) {
    if (!$.browser.webkit) {
        list = $('#iconbar .jcarousel-list');  
        number = list.css('left');
        list.css({'left': 0});
        list.delay(500).animate({left: '+=' + number}, 750, function () {});
    }
}

8. Categories Tree

TERMINATOR Categories Tree

HTML CODE

Self explanatory HTML code

<!-- 1. LEVEL - BLUE DOTS -->
<ul class="tree categories">
    <!-- 1. ITEM OF 1. LEVEL -->
    <li class="tree-item-main parent">
        <span class="item box-slide-head">Female Articles     
            <!-- ACTIONS -->
            <span class="cat-links">
                <a href="#" class="cat-edit clickable" title="edit">edit</a>
                <a href="#" class="cat-del clickable" title="delete">delete</a>
            </span><!-- /.cat-links -->
        </span><!-- /.item-->
        <!-- 2. LEVEL - YELLOW DOTS -->
        <ul class="box-slide-body">
            <!-- 1. ITEM OF 2. LEVEL-->
            <li class="tree-item parent">
                <span class="item box-slide-head">Fashion        
                    <!-- ACTIONS -->
                    <span class="cat-links">
                        <a href="#" class="cat-edit clickable" title="edit">edit</a>
                        <a href="#" class="cat-del clickable" title="delete">delete</a>
                    </span><!-- /.cat-links -->
                </span><!-- /.item -->
                <!-- 3. LEVEL - GREEN DOTS -->
                <ul class="box-slide-body">
                    <!-- 1. ITEM OF 3. LEVEL-->
                    <li class="tree-item">
                        <span class="item">Dress
                            <!-- ACTIONS -->
                            <span class="cat-links">
                                <a href="#" class="cat-edit clickable" title="edit">edit</a>
                                <a href="#" class="cat-del clickable" title="delete">delete</a>
                            </span><!-- /.cat-links -->
                        </span><!-- /.item -->
                    </li><!-- /1. ITEM OF 3. LEVEL-->
                </ul><!-- /3.LEVEL -->
            </li><!-- /1. ITEM OF 2. LEVEL-->
        </ul><!-- /2.LEVEL -->
     </li><!-- /1. ITEM OF 1. LEVEL -->
 </ul><!-- /1.LEVEL -->

9. Sliding Boxes

TERMINATOR Sliding Boxes

Creating Custom Slide Box

Set box-slide-head class for element which will be used for opening content. In this element should be another elements which may be binded to another events. To unbind an element from box-slide-head element just add class openable.

Set box-slide-body class for element which will by used for content.

If you want, you can set default state of the content body by adding class hidden.

<!-- CONTENT BOX - CLOSED -->
<div class="content-box bt-space10">
<div class="box-body">
    <div class="box-header box-slide-head">
        <span class="slide-but">open/close</span>
        <h2>TITLE</h2>
    </div>
    <div class="box-wrap clear box-slide-body hidden">
        <p>CONTENT</p>
    </div> <!-- end of box-wrap -->
</div> <!-- end of box-body -->
</div> <!-- end of content-box -->

10. Forms validation

TERMINATOR is using standart jQuery validation plugin. You can validate any form by adding class validate-form to form element and than applying plugin's custom validation rules on inputs.

Here you can find validations rules

11.Code Validations

11.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 6+, FireFox, Chrome and Safari.

XHTML Strict 1.1 Valid

The template was successfully checked as XHTML 1.0 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).

12. The Files Structure

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

12.1. Directories

css/
CSS files
images/
images which are required by CSS
js/
JavaScript files
doc/
documentation page for Glamorous web template

12.2. HTML Files

index.html
main backend page
login.html
page with login box
articles.html
manage your article and categories
boxes.html
custom boxes variations
charts.html
chart variations: bar, line, pie, area ...
columns*.html
limitless possibilities in creation of columns
styles.html
content styles
tables.html
tables variations

12.3. CSS Files

screen.css
master CSS file contains main CSS rules
jquery.ui.css
jQuery UI master CSS file
reset.css
this CSS file sets default values for HTML tags
ie7.css
additional CSS rules for Internet Explorer 7
jquery.wysiwyg.css
jQuery WYSIWYG plugin's CSS
visualize.css, visualize-light.css
jQuery Visualize plugin's CSS
fancybox.css
jQuery Fancybox plugin's CSS

12.4. JavaScript Files

jquery.js
jQuery - JavaScript framework
jquery.fancybox.js
jQuery plugin - advanced image lightbox and galleries
jquery.idtabs.js
jQuery plugin - tabbing
jquery.jcarousel.js
jQuery plugin - used for sliding vertical navigation
jquery.jeditable.js
jQuery plugin - edit everything
jquery.visualize.js
jQuery plugin - creating charts from tables
jquery.wysiswyg.js
jQuery plugin - simple WYSISWYG editor
jquery.datatables.js
jQuery plugin - advanced data tables
jquery.validate.js
jQuery plugin - validating forms
tiny_mce folder
Javascript WYSIWYG Editor
cufon.js
font replacement
Zurich_Condensed_Lt_Bd.js
custom font
script.js
own jQuery code snippets