1. Start
  2. What is this?
  3. What is this not?
  4. Filestructure
  5. HTML Structure
  6. The Grid System
  7. Whitelabel Plugins
  8. Third Party Plugins
  9. Live Search
  10. Icons
  11. Javascript
  12. CSS
  13. Theming
  14. Different Resolutions
  15. jQuery Tour Plugin
  16. Changelog
  17. Sources & Credits
  18. Final Words

Whitelabel

a full featured Admin Skin


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to start a discussion at my support forum. Thanks so much!

What is this?


This Theme is a rich featured admin backend which has (nearly) all necessary client side features which is the starting point of your Content Management System (CMS)

What is this not?


This Theme isn't - as all other items in this category - a ready to use Content Management System. It contains a lot of client side action (Javascript) but didn't come with server side code (PHP). The purpose of this item is to provide you basic (and even more than that) features which will power your next CMS.

Filestructure


Here's the general filestructure of this item:

Filename Type Description
css folder contains all required styling information
elfinder folder contains the conector and php class for the fileexplorer
js folder contains all javascript. Plugins, configuration files
apple-touch-icon-precomposed.png image is used when adding webpage to the homescreen on mobile devices
doc-* html file the documentations of the whitelabel plugins
submit.php php file is used for all forms. just an example which shows all sent values
search.php php file handles the live search and returns an array of result
upload.php php file handles the file upload from the file upload fields
widget-content.php php file is used for ajax widgets. Returns html file with some time data
*.html html file all the examples for this template

 

HTML Structure


This Theme is a fluid layout with up to 12 colums based on the 960 Grid System. It uses media queries to fit for different screen resolutions.

General Structure

<body>

    <div id="pageoptions"></div>

    <header></header>
    
    <nav></nav>

    <section id="content"></section>
    
    <footer></footer>
    
</body>

The Header

<header>
    <div id="logo">
        <a href="test.html">Logo Here</a>
    </div>

    <div id="header">
        <ul id="headernav">
            <li><ul>
                <li><a href="file.html">Title</a><span>notification</span></li>
                <li><a href="#">Submenu</a><span>4</span>
                <ul>
                    <li><a href="#">Just</a></li>
                    <li><a href="#">another</a></li>
                    <li><a href="#">Dropdown</a></li>
                    <li><a href="#">Menu</a></li>
                </ul>
                </li>
                <li><a href="#">Settings</a></li>
                ...
            </ul></li>
        </ul>

        <div id="searchbox">
            <form id="searchform">
                <input type="search" name="query" id="search" placeholder="Search">
            </form>
        </div>

    </div>
</header>

As you can see the header is divided into two parts: The logo and the header with the navigation and the searchfield.

The header navigation is nested in an additional list element which is necessary for the dropdown in on smaller screens. Don't use more than five navigation points.

To get a notification sign just use span tags within the anchors

The searchfield is design to attach a query string to the url on submit:

http://yourdomain.tld/whitelabelpath/?query=your+search

The Main Navigation

<nav>
    <ul id="nav">
        <li class="i_house"><a href="#"><span>Nav Menu</span></a></li>
        <li class="i_house"><a href="#"><span>Nav Menu</span></a></li>
        <li class="i_book"><a><span>Has Sub Menu</span></a>
            <ul>
                <li><a href="#"><span>Sub Menu</span></a></li>
                <li><a href="#"><span>Sub Menu</span></a></li>
                ....
            </ul>
        </li>
        <li class="i_house"><a><span>Nav Menu</span></a></li>
        ...
    </ul>
</nav>

The Main Navigation is wrapped within an nav tag.

The elements need the shown markup. You can define a icon within the list element.

The Content

<section id="content">

    <div class="g12">
        <h1>Headline</h1>
    </div>
    <div class="g6">
        {CONTENT GOES HERE}
    </div>
    <div class="g6">
        {CONTENT GOES HERE}
    </div>
    
</section>

The Content gets it layout with the grid system.

The Footer

<footer>Copyright by revaxarts.com 2011</footer>

The Footer is just a small line beneth the content. It should contain some copyright information

The Grid System


This Theme is based on the 960 Grid System. It's divided into twelve fluid columns

To keep things short I changed the standard class names "grid_X" to "gX" (where X should get replaced with the actuall collumn with)

Examples:

For 3 columns use this markup:

<div class="g4">
    {CONTENT GOES HERE}
</div>
<div class="g4">
    {CONTENT GOES HERE}
</div>
<div class="g4">
    {CONTENT GOES HERE}
</div>

Two Columns with a thiner left one could look like this:


<div class="g4">
    {CONTENT GOES HERE}
</div>
<div class="g8">
    {CONTENT GOES HERE}
</div>

Please check out the 960 Grid System website for more information!

Whitelabel Plugins


This Theme comes with nine custom and nine extending plugins

Each whitelabel plugin has it's documentation online. For the third party plugins please check there websites

Here is a list of all whitelabel plugins:

  1. wl_Alert
  2. wl_Autocomplete*
  3. wl_Breadcrumb
  4. wl_Calendar*
  5. wl_Chart*
  6. wl_Color*
  7. wl_Date*
  8. wl_Dialog*
  9. wl_Editor*
  10. wl_File*
  11. wl_Fileexplorer*
  12. wl_Form
  13. wl_Gallery
  14. wl_Multiselect
  15. wl_Number
  16. wl_Password
  17. wl_Store
  18. wl_Slider*
  19. wl_Time
  20. wl_Valid
  21. wl_Widget

* extends a third party plugin

Alert Plugin (wl_Alert)

Documentation

This plugin manages the alert boxes. Mainly the click behaviors.

Autocomplete Plugin (wl_Autocomplete)

Documentation

This plugin extends the jQuery autocomplete plugin

Breadcrumb Plugin (wl_Breadcrumb)

Documentation

This plugin manages breadcrumb navigation

Calendar Plugin (wl_Calendar)

Documentation

This Plugin extends the fullcalendar plugin

Chart Plugin (wl_Chart)

Documentation

This plugin extens the flot plugin

Color Plugin (wl_Color)

Documentation

This plugin converts an input field into a color picker field

Date Plugin (wl_Date)

Documentation

This plugin converts an input field into a date picker field. It extends the jQuery UI datepicker plugin

Dialog Plugin (wl_Dialog)

Documentation

This plugin handles all the Dialogs and message boxes. It extends the jQuery UI dialog plugin

Editor Plugin (wl_Editor)

Documentation

This plugin makes a WYSIWYG Editor. It extends the jQuery WYSIWYG plugin

Fileexplorer Plugin (wl_Fileexplorer)

Documentation

This plugin makes a Fileexplorer. It extends the elFinder plugin

File Plugin (wl_File)

Documentation

This plugin converts an file upload field into a multi upload form. It extends the jQuery-File-Upload plugin

Form Plugin (wl_Form)

Documentation

This plugin manages the behavior of a html form

Gallery Plugin (wl_Gallery)

Documentation

This plugin makes a sortable gallery. USes the Fancybox plugin

Multiselect Plugin (wl_Multiselect)

Documentation

This plugin converts a multiple select field into a fancy selection combo box

Number Plugin (wl_Number)

Documentation

This plugin converts an input field into a number only field

Password Plugin (wl_Password)

Documentation

This plugin converts a password field into a full featured password field with confirmation and strengthmeter

Slider Plugin (wl_Slider)

Documentation

This plugin extends the jQuery Slider.

Store Plugin (wl_Store)

Documentation

Uses the LocalStore to save data on the clients browser

Time Plugin (wl_Time)

Documentation

This plugin converts an input field into a time field for 24 hour formats or 12 hour formats

Valid Plugin (wl_Valid)

Documentation

This plugin converts an input field into a "must - be - valid" field. Works together with the wl_Form plugin

Widget Plugin (wl_Widget)

Documentation

Adds widget functionaltiy to a valid widget Markup

Third Party Plugins


This Theme uses following third party plugins:

Icons


This theme comes with over 300 icons, all in dark and light version.

They mainly from the great iconsweet 2 set by yummygum.

Unfortunataly it's not possible to include the set within the template. So if you need more icons please contect my via my profil. I will do my best to add some more icons.

Usage

Simple add i_{iconname} to an element:

<div class="i_house"></div>

This will use the icon with the name "house".

You may have to add additional styling information on that element to display the icon properly

Check out the icons page to see all version

Javascript


This Theme comes with a lot of Javascript

Every whitelabel plugin is separated into a single file.

Following third party plugins are separated into a single file:

All other plugins are togehter in the plugins.js file

The config.js

Set all your defaults within this file. These settings overwrite the default settings of each plugin

The script.js

This file contains all the plugin calls and operation. Also the stuff for the demo is included

The login.js

This file has the same purpose as the script.js file but only for the login field

CSS


The Theme requires a lot of cascading style sheets.

Here's the filestructure of the css folder:

The syte.css file within the root describes the whole layout.

The images folder contains all icons and the background pattern

The other folders are Skins which contains at least the theme.css which describes mainly the colors of the skin. Read more about theming here.

The style.css and the theme.css is divided into section:

/*----------------------------------------------------------------------*/
/* {SECTIONNAME}
/*----------------------------------------------------------------------*/

/*----------------------------------------------------------------------*/
/* {NEXT_SECTIONNAME}
/*----------------------------------------------------------------------*/

The ie.css file in the root of the css directory contains some extra css for IE7 and IE8 which should get modified carefully!

Theming


This Theme comes with two premade Skins:

all required information and assets for each skin is within the light (or dark) folder in the 'css' directory.

The style.css in the root of the css directory defines all styling, without any color information.

all colors come from the theme.css file within the theme directory.

The styling of third party plugins is in the theme directory as well

How to make a new skin

You can start a new skin by duplicating the 'light' folder, rename it and link it within the head tag of the html files.

The theme.css is your starting point. All optical changes should be made here

Different Resolutions


This Theme uses media queries to change appearance depending on the users screen resolution.

The layout change on follwing resolutions:

You can test different screen resolutions by resizing the browser window with a modern browser

 

jQuery Tour Plugin


With this item you get the complete jQuery Tour plugin available at CodeCanyon

You find the package in the zip file

Changelog


Version 1.5.1 (02/08/2012)

wl_Multiselect: added optional searchfield
wl_Gallery: new callback "onMove"
checkboxes now submit 1 and 0 (instead of "true" and "false")
wl_Form: tooltip didn't show required message if a previous tooltip was defined - fixed

Update your files:
js/config.js
js/wl_Multiselect.js
js/wl_Gallery.js
js/wl_Form.js
css/style.css

Version 1.5 (12/14/2011)

jQuery Tour Plugin 4 free (http://rxa.li/tour)

Version 1.4 (10/26/2011)

new Live Search Feature
new wl_File method: "reset
new wl_Gallery options: "editBtn", "deleteBtn"

Form resets now file inputs
small bug fixes

Update your files:
js/plugins.js
js/wl_File.js
js/wl_Form.js
js/script.js
css/style.css
css/light/theme.css
css/dark/theme.css
search.php *new

Version 1.3.2 (10/11/2011)

new jQuery checkbox Plugin for checkbox and radio buttons
updated wl_Form for new plugin
Slider tooltip changes on mousewheel

Update your files:
js/plugins.js
js/wl_Slider.js
js/wl_Form.js
js/script.js
css/style.css
css/light/theme.css
css/dark/theme.css
css/light/images/checkbox.png *new
css/dark/images/checkbox.png *new

Version 1.3.1 (10/03/2011)

new Tooltip on Sliders (optional)
added an add button to the MultiSelect
name attribute now sent with form submit
fixed storage behavior on IE7
small bug fixes

Update your files:
js/plugins.js
js/wl_Multiselect.js
js/wl_Slider.js
js/wl_Form.js
js/config.js
css/style.css
css/light/theme.css
css/dark/theme.css

Version 1.3 (09/14/2011)

new Errorpages
color option for the WYSIWYG editor
improved storage

wl_Charts now supports decimals
added add button for the wl_Multiselect
fixed broken sortable if column is empty
wl_Store is now a wrapper for the jStorage plugin
fixed overflow hidden issue on IE9 with dropdowns
updated datatables to 1.8.1
changed "collapsible" to "collapseable" (thanks Thinkscape)

Version 1.2 (08/09/2011)

new plugin: wl_Multiselect

Form:
New Method: reset
uses name attribute instead of id (id is optional) 
new callback onBeforePrepare
new callback onReset
password confirmation not sent to the server anymore
submitButton can be an jQuery object
new resetButton
onBeforeSubmit can now return the data which is used for sending
Arrays possible to submit (add '[]' to the name attribute)

small bug fixes

Version 1.1.1 (07/14/2011)

native form submit no equal to ajax submit
updated jQuery to 1.6.2
dropdowns now inline-blocks

Version 1.1 (06/30/2011)

new Plugin: wl_File
adds multiple file uploads

Widgets:
widgets are now optional collapseable/sortable
new Widget options: collapseable, sortable

radio button now uses value attribute on submit. if no value is set the id is used
CSS files improved
Form now can handle file uploads
Form now support native submit (non-ajax)
new Form callback: onFileError
a few new icons

Bugfixes:
text wasn't sent if it was equal placeholder text
password field doesn't get red on error
form borders in IE7 had smaller padding

Version 1.0 (06/09/2011)

initial release

 

Sources & Credits


I've used the following images, icons or other files as listed.

 

Final Words


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.

I put a lot of time into this project. Nevertheless some bugs could appear after the release. Please contact me in this case and I'll provide an update asap.

Best wishes

Xaver Birsak – revaxarts.com