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!
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)
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.
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 |
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.
<body> <div id="pageoptions"></div> <header></header> <nav></nav> <section id="content"></section> <footer></footer> </body>
<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
<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.
<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.
<footer>Copyright by revaxarts.com 2011</footer>
The Footer is just a small line beneth the content. It should contain some copyright information
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)
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!
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:
* extends a third party plugin
This plugin manages the alert boxes. Mainly the click behaviors.
This plugin extends the jQuery autocomplete plugin
This plugin manages breadcrumb navigation
This Plugin extends the fullcalendar plugin
This plugin extens the flot plugin
This plugin converts an input field into a color picker field
This plugin converts an input field into a date picker field. It extends the jQuery UI datepicker plugin
This plugin handles all the Dialogs and message boxes. It extends the jQuery UI dialog plugin
This plugin makes a WYSIWYG Editor. It extends the jQuery WYSIWYG plugin
This plugin makes a Fileexplorer. It extends the elFinder plugin
This plugin converts an file upload field into a multi upload form. It extends the jQuery-File-Upload plugin
This plugin manages the behavior of a html form
This plugin makes a sortable gallery. USes the Fancybox plugin
This plugin converts a multiple select field into a fancy selection combo box
This plugin converts an input field into a number only field
This plugin converts a password field into a full featured password field with confirmation and strengthmeter
This plugin extends the jQuery Slider.
Uses the LocalStore to save data on the clients browser
This plugin converts an input field into a time field for 24 hour formats or 12 hour formats
This plugin converts an input field into a "must - be - valid" field. Works together with the wl_Form plugin
Adds widget functionaltiy to a valid widget Markup
This Theme uses following third party plugins:
The search field at the top right offers instant search functionality:
The script binds a keyup event handler to the search field which sends the search term with an ajax request to the search.php file. This file executes the search and returns an array with the results.
The search.php receives a POST variable called "term" and must return a JSON object with following structure:
[ { "href" : "link to target page", "text" : "text which is shown in the results", "img" : "a URL to a 50x50 pixel image which is displayd with the result (optional)" }, { "href" : "link to target page", "text" : "text which is shown in the results", "img" : "a URL to a 50x50 pixel image which is displayd with the result (optional)" }, {...} ]
Text with more than 100 characters will get trimmed!
The included search.php gives you an idea how to set this up
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.
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
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
Set all your defaults within this file. These settings overwrite the default settings of each plugin
This file contains all the plugin calls and operation. Also the stuff for the demo is included
This file has the same purpose as the script.js file but only for the login field
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!
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
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
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
With this item you get the complete jQuery Tour plugin available at CodeCanyon
You find the package in the zip file
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
jQuery Tour Plugin 4 free (http://rxa.li/tour)
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
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
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
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)
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
native form submit no equal to ajax submit updated jQuery to 1.6.2 dropdowns now inline-blocks
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
initial release
I've used the following images, icons or other files as listed.
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