Documentation | UniAdmin - Backend Template

1.Basic Description
- 1.1.Features
- 1.2.Installation
- 1.3.Basic Page Information
- 1.4.Login Page Information
2.Data Table
- 2.1.Simple Data Table
- 2.2.Advanced Data Table
3.Charts
- 3.1.Creating Chart
- 3.2.Setting Chart Type
4.WYSIWYG
- 4.1.jQuery WYSIWYG
- 4.2.TinyMCE
5.Fancybox
- 5.1.Fancybox Image
- 5.1.Fancybox Gallery
- 5.2.Fancybox Modal Window
6.Tabs
7.Code Validations
- 7.1.Valid HTML
- 7.2.Valid CSS
8.The Files Structure
- 8.1.Directories
- 8.2.HTML Files
- 8.3.CSS Files
- 8.4.JavaScript Files

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

fluid layout
charting library
Fancybox for lightbox effect and modal windows
WYSIWIG editors - TinyMCE and jQuery WYSIWYG
well structured HTML & JavaScript code

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.

Sidebar with two level main navigation
Content boxes
Charts
Modal window
WYSIWYG editors
Four variants of notification boxes
Simple and advanced data table

1.4. Login Page Information

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

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

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:

Column ordering by clicking on column name
Searching in table content
Advanced pager
Displaying specific number of rows per page
Auto pager
AJAX loading of rows

<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

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:

bar
area
pie
line

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

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>

5.2. Fancybox Gallery

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

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.

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.

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

UniAdmin Static HTML Backend Template Documentation

Contents

1. Basic Description

1.1. Features

1.2. Installation

1.3. Basic Page Information

1.4. Login Page Information

2. Data Table

2.1 Simple Data Table

Simple Data Table HTML Structure

2.2. Advanced Data Table

Advanced Data Table HTML Structure

Advanced Data Tables Options

3. Charts

3.1. Creating Chart

3.2. Setting Chart Type

4. WYSIWYG

4.1. jQuery WYSIWYG

HTML structure

JavaScript code

4.2. TinyMCE

HTML structure

JavaScript code

5. Fancybox

5.1. Fancybox Image

5.2. Fancybox Gallery

5.3. Fancybox Modal Window

6. Tabs

HTML Structure

JavaScript

7.Code Validations

7.1.Valid HTML

7.2 Valid CSS

8. The Files Structure

8.1. Directories

8.2. HTML Files

8.3. CSS Files

8.4. JavaScript Files