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

UniAdmin 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

UniAdmin 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

UniAdmin 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

UniAdmin Charts

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

UniAdmin WYSIWYGs

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

UniAdmin 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

UniAdmin 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.Code Validations

7.1.Valid HTML

The HTML code is valid as XHTML Strict 7.1 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.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).

7.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

8. The Files Structure

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

8.1. Directories

css/
CSS files
images/
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

8.2. HTML Files

index.html
main backend page
login.html
page with login box

8.3. CSS Files

style.css
master CSS file contains main CSS rules
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

8.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.visualize.js
jQuery plugin - creating charts from tables
jquery.wysiswyg.js
jQuery plugin - simple WYSISWYG editor
jquery.datatables.js
jQuery plugin - advanced data tables
script.js
own jQuery code snippets
cufon.js
font replacement