Lion - Premium Admin Template

Soft and responsive solution for your project

Created: 16/06/2012
latest Update: 15/08/2013
By: Dmitry Ivaniuk
http://aqvatarius.com/themes/virgo.php
Email: aqvatarius@gmail.com

Update

v1.1 - v1.2

Changed default JS structure. Added file jquery.scrollUp.min.js

<script type='text/javascript' src='js/scrollup/jquery.scrollUp.min.js'></script>

CSS

Updated: stylesheet.css,stylesheets.css,

Added: themes.css

IMG

Added files: logo_dark.png, loader.gif

Added folders: backgrounds,themes/dark, themes/simple

Updated: actions.js, plugins.js, charts.js

Added folders: scrollup

Added files: other/table_edit.js

If you doesnt need to use scrollup plugin dont add file in all pages and remove init of this plugin in plugins.js:273

   // Scroll up plugin
   $.scrollUp({scrollText: '^'});
   // eof scroll up plugin

For more info about theming, or new features check changelog and section "How to..."

v1.0 - v1.1

Changed default JS structure. Added file jquery.cookies.2.2.0.min.js

<script type='text/javascript' src='js/cookies/jquery.cookies.2.2.0.min.js'></script>

CSS

Updated: stylesheet.css,stylesheets.css

Added folders: codemirror,filetree

IMG

Added folders: cards,filetree

Updated: actions.js

Added folders: codemirror,filetree

PHP

Added folders: filetree

If you using wide screen version of layout and you dont need to control it with cookies:

1. Ignore changes in JS structure(do not add jquery.cookies.2.2.0.min.js in all files(dont forget that this file need for greed func.))

2. Remove from actions.js code:

        ...
        $.cookies.set('c_screen','0'); // line 118
        ...
        $.cookies.set('c_screen','1'); // line 122
        ...
        if($.cookies.get('c_screen') == '1') // line 222
           $("#wrapper").addClass("screen_wide"); // line 223 
        ...

Easiest way to update template is replace all files in directories and add jquery.cookies.2.2.0.min.js on all pages.

Featured

Fixed or Responsvie 4+ columns layout
Cross-browser compatible
Built using HTML5, CSS3 and JavaScript
Retina ready

Integrated plugins:
- Twitter Bootstrap v2.2.1
- jQuery v2.0.0
  - jQuery UI v1.10.3
  - jQuery Cookies v2.2.0
  - jQuery Flot v0.7
  - jQuery Sparkline v2.1
  - jQuery CKEditor v4.0
  - jQuery NicEdit v0.9
  - jQuery DataTables v1.9.4
  - jQuery FancyBox v2.1.4
  - jQuery FullCalendar v1.6.1
  - jQuery Masked Input v1.3.1
  - jQuery Custom content scroller v2.8.2
  - jQuery Select2 v3.3.2
  - jQuery Uniform v2.1.1
  - jQuery Inline Form Validation Engine v2.6.1(multi-language support)
  - jQuery MultiSelect v0.9.5
  - jQuery Stepy v1.1.0
  - jQuery TagsInput
  - jQuery SyntaxHighlighter v.3.0.83
  - jQuery iButton v1.0.03
  - jQuery Color Picker
  - jVectorMap v1.2.2
  - jQuery Noty v2.0.3
  - jQuery iButton v1.0.03
  - jQuery File Tree v.1.01(since v1.1)
  - jQuery ScrollUp(since v1.2)
  - jQuery Timepicker(since v1.2)
- elFinder v2.0
- Plupload v1.5.7
- CodeMirror v3.14(since v1.1)

Interface elements
- Header navigation buttons with popup and dropdown
- Left side navigation, with collapsible levels
- Breadcrumb line with right side elements
- Responsive alert blocks(warning,error,success,info)
- Styled jQuery UI items: Accordion, Sortable, Selectable, Slider, Tabs, Dialog, Datepicker
- Styled Bootstrap items: Progressbars, Tabs, Tooltips, Popovers, Dialog, Stacked Tabs, Stacked Pills, Lables and Badges, Buttons, Pagination
- Icomoon font icons and Glyphs icons
- Block with head, content, footer(each of items ready for form elements)
- Custom block scroling
- Lot of quick-info widgets
- Styled typography elements
- Messages, dialogues and contact list widgets
- Code highlighter, a lots of informer examples
- Simple and customizable gallery grid
Form elements:
- Styled input fields with placeholder, readonly, disabled
- Default and styled select,file,checkbox and radio buttons
- Styled form elements for validation states
- Select and multiselect with search
- Tags input
- Multi-select
- Color picker plugin
- iPhone style checkbox and radio buttons
- Extending form controls(appends & preappends)
- Form validation plugin
- Masked input plugin
- Form wizard plugin
- 2 WYSIWYG editor plugins
- Code editor plugin
- Simple and sortable tables with features
- Datepicker, timepicker and comboboxes
Other features:
- jQuery flot line, bar, stacked, pie, real-time update charts
- jQuery Sparkline bar, line, pie, discrete charts
- Google maps API usage examples
- jVectormap maps plugin
- Calendar plugin with features
- File manager and file uploader plugins
- File tree plugin
34+ valid HTML pages
30+ ready-to-use plugins
10 page samples
2 custome themes and 8 custom backgrounds
And much more…

Files

css - folder with css files
img - folder with images files
js - folder with javascript files
php - folder with php scripts
calendar.html - Calendar plugin
charts.html - Chart samples
files.html - File handling plugins
form_elements.html - Form elements
form_validation.html - Form validation plugins
form_wizard.html - Form wizard plugin
form_wysiwyg.html - WYSIWYG plugins
index.html - Dashboard
maps_google.html - Google map samples
maps_vector.html - Vector map samples
messages.html - Messages and dialogue samples
sample_blank.html - Sample of blank page
sample_error_403.html - Error page sample
sample_error_404.html - Error page sample
sample_error_503.html - Error page sample
sample_faq.html - FAQ page sample
sample_gallery.html - Gallery
sample_invoice.html - Invoice page sample
sample_login.html - Login page sample
sample_mailbox.html - Mailbox page sample
sample_search.html - Search page sample
sample_payment.html - Payment table page sample
sample_price.html - Price table page sample
sample_user_edit.html - User edit page sample
tables_default.html - Default tables samples
tables_sort.html - Sorting tables samples
tables_edit.html - Editable tables samples
typography.html - Typography elements
ui_buttons.html - Buttons samples
ui_elements.html - UI Elements
ui_grid.html - Layout grid
ui_icons.html - Icons list
ui_widgets.html - Widget samples
ajax_messages.html - assets file(messages in head)

CSS structure

stylesheets.css is the main CSS file that includes:

        
@import "bootstrap/bootstrap.min.css";
@import "jquery/jquery-ui-1.10.3.custom.css";

@import "select2/select2.css";
@import "uniform/uniform.default.css";
@import "tagsinput/jquery.tagsinput.css";
@import "multiselect/multi-select.css";
@import "validationengine/validationEngine.css";
@import "stepy/jquery.stepy.css";
@import "cleditor/jquery.cleditor.css";
@import "mcustomscrollbar/jquery.mCustomScrollbar.css";

@import "shbrush/shCoreDefault.css";
@import "shbrush/shThemeDefault.css";
@import "ibutton/jquery.ibutton.css";
@import "colorpicker/colorpicker.css";

@import "datatables/jquery.dataTables.css";
@import "fancybox/jquery.fancybox.css";

@import "codemirror/codemirror.css"; /*(since v1.1)*/
@import "filetree/jqueryFileTree.css"; /*(since v1.1)*/

@import "icomoon.css";
@import "stylesheet.css";
@import "themes.css"; /*(since v1.2)*/
@import "mystyles.css";

bootstrap/bootstrap.min.css - bootstrap stylesheets
jquery/jquery-ui-1.10.3.custom.css - jQuery UI custom stylesheets
select2/select2.css - Select2 stylesheets
uniform/uniform.default.css - Uniform plugin stylesheets
tagsinput/jquery.tagsinput.css - custom stylesheet for tags input plugin
multiselect/multi-select.css - multiselect plugin stylesheets
validationengine/validationEngine.css - Validation engine stylesheets
stepy/jquery.stepy.css - stylesheet for wizard
cleditor/jquery.cleditor.css - WYSIWYG plugin stylesheets
mcustomscrollbar/jquery.mCustomScrollbar.css - Custom scrollbar stylesheets
shbrush/hCoreDefault.css, shbrush/shThemeDefault.css - SyntaxHighlight plugin stylesheets
ibutton/jquery.ibutton.css iButton plugin stylesheets
colorpicker/colorpicker.css jQuery color picker plugin stylesheets
datatables/jquery.dataTables.css DataTables plugin stylesheets
fancybox/jquery.fancybox.css - fancybox plugin stylesheets
codemirror/codemirror.css - CodeMirror plugin stylesheets
filetree/jqueryFileTree.css - File Tree plugin stylesheets
icomoon.css - icons stylesheets
stylesheet.css - Lion styleshets
themes.css - Lion themes styleshets
mystyles.css - Your own styles

calendar.html

css/fullcalendar/fullcalendar.css - Fullcalendar plugin stylesheets

files.html

js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css - Pluploader plugin stylesheets
css/elfinder/elfinder.min.css - Elfinder plugin stylesheets

calendar.html

jvectormap/jquery-jvectormap-1.2.2.css - jVectormaps plugin stylesheets

calendar.html

jvectormap/jquery-jvectormap-1.2.2.css - jVectormaps plugin stylesheets

Javascript structure

Main javascript files

    <script type='text/javascript' src='js/jquery/jquery-2.0.0.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-ui-1.10.3.custom.min.js'></script>
    <script type='text/javascript' src='js/jquery/jquery-migrate-1.1.1.min.js'></script>
    <script type='text/javascript' src='js/jquery/globalize.js'></script>
    
    <script type='text/javascript' src='js/bootstrap/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/cookies/jquery.cookies.2.2.0.min.js'></script> 

    <script type='text/javascript' src='js/scrollup/jquery.scrollUp.min.js'></script> 
    

    <script type='text/javascript' src='js/plugins.js'></script>    
    <script type='text/javascript' src='js/actions.js'></script>

calendar.html

<script type='text/javascript' src='js/fullcalendar/fullcalendar.min.js'></script>

charts.html

    <script type='text/javascript' src='js/charts/excanvas.min.js'></script>    
    <script type='text/javascript' src='js/charts/jquery.flot.js'></script>    
    <script type='text/javascript' src='js/charts/jquery.flot.stack.js'></script>    
    <script type='text/javascript' src='js/charts/jquery.flot.pie.js'></script>
    <script type='text/javascript' src='js/charts/jquery.flot.resize.js'></script>
    ...
    <script type='text/javascript' src='js/charts.js'></script>

files.html

    <script type='text/javascript' src='js/elfinder/elfinder.min.js'></script>

    <script type='text/javascript' src='js/plupload/plupload.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.gears.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.silverlight.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.flash.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.browserplus.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.html4.js'></script>
    <script type='text/javascript' src='js/plupload/plupload.html5.js'></script>
    <script type='text/javascript' src='js/plupload/jquery.plupload.queue/jquery.plupload.queue.js'></script>

form_elements.html

    <script type='text/javascript' src='js/select2/select2.min.js'></script>
    <script type='text/javascript' src='js/uniform/jquery.uniform.min.js'></script>
    <script type='text/javascript' src='js/tagsinput/jquery.tagsinput.min.js'></script>
    <script type='text/javascript' src='js/multiselect/jquery.multi-select.js'></script>
    <script type='text/javascript' src='js/ibutton/jquery.ibutton.min.js'></script>    
    <script type='text/javascript' src='js/colorpicker/colorpicker.js'></script>

form_validation.html

    <script type='text/javascript' src='js/validationengine/languages/jquery.validationEngine-en.js'></script>
    <script type='text/javascript' src='js/validationengine/jquery.validationEngine.js'></script>
    <script type='text/javascript' src='js/maskedinput/jquery.maskedinput.min.js'></script>

form_wizard.html

    <script type='text/javascript' src='js/validationengine/languages/jquery.validationEngine-en.js'></script>
    <script type='text/javascript' src='js/validationengine/jquery.validationEngine.js'></script>
    <script type='text/javascript' src='js/stepy/jquery.stepy.min.js'></script>

form_wysiwyg.html

    <script type='text/javascript' src='js/nicedit/nicEdit.js'></script>
    <script type='text/javascript' src='js/cleditor/jquery.cleditor.min.js'></script>

maps_google.html

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

maps_vector.html

    <script type='text/javascript' src='js/jvectormap/jquery-jvectormap-1.2.2.min.js'></script>
    <script type='text/javascript' src='js/jvectormap/jquery-jvectormap-world-mill-en.js'></script>
    <script type='text/javascript' src='js/jvectormap/jquery-jvectormap-europe-mill-en.js'></script>
    <script type='text/javascript' src='js/jvectormap/jquery-jvectormap-us-aea-en.js'></script>

messages.html

    <script type='text/javascript' src='js/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js'></script>

sample_faq.html

    <script type='text/javascript' src='js/highlight/jquery.highlight-4.js'></script>
    <script type='text/javascript' src='js/other/faq.js'></script>

sample_gallery.html

    <script type='text/javascript' src='js/fancybox/jquery.fancybox.pack.js'></script>

sample_mailbox.html

    <script type='text/javascript' src='js/tagsinput/jquery.tagsinput.min.js'></script>
    <script type='text/javascript' src='js/cleditor/jquery.cleditor.min.js'></script>
    <script type='text/javascript' src='js/uniform/jquery.uniform.min.js'></script>

sample_search.html

    <script type='text/javascript' src='js/uniform/jquery.uniform.min.js'></script>
    <script type='text/javascript' src='js/ibutton/jquery.ibutton.min.js'></script>

sample_user_edit.html

    <script type='text/javascript' src='js/uniform/jquery.uniform.min.js'></script>
    <script type='text/javascript' src='js/ibutton/jquery.ibutton.min.js'></script>

tables_sort.html

    <script type='text/javascript' src='js/datatables/jquery.dataTables.min.js'></script>

tables_edit.html

    <script type='text/javascript' src='js/other/table_edit.js'></script>

ui_elements.html

    <script type='text/javascript' src='js/noty/jquery.noty.js'></script>
    <script type='text/javascript' src='js/noty/layouts/topCenter.js'></script>
    <script type='text/javascript' src='js/noty/layouts/topLeft.js'></script>
    <script type='text/javascript' src='js/noty/layouts/topRight.js'></script>    
    <script type='text/javascript' src='js/noty/themes/default.js'></script>

ui_grid.html

    <script type='text/javascript' src='js/cookies/jquery.cookies.2.2.0.min.js'></script>

ui_widgets.html

    
    <script type='text/javascript' src='js/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js'></script>    
    <script type='text/javascript' src='js/shbrush/XRegExp.js'></script>
    <script type='text/javascript' src='js/shbrush/shCore.js'></script>
    <script type='text/javascript' src='js/shbrush/shBrushXml.js'></script>
    <script type='text/javascript' src='js/shbrush/shBrushJScript.js'></script>
    <script type='text/javascript' src='js/shbrush/shBrushCss.js'></script>    
    <script type='text/javascript' src='js/ibutton/jquery.ibutton.min.js'></script>
    <script type='text/javascript' src='js/uniform/jquery.uniform.min.js'></script>    
    <script type='text/javascript' src='js/sparklines/jquery.sparkline.min.js'></script>

form_code_editor.html

    
    <script type='text/javascript' src='js/codemirror/codemirror.js'></script>
    <script type='text/javascript' src="js/codemirror/addon/edit/matchbrackets.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/xml/xml.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/javascript/javascript.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/css/css.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/clike/clike.js"></script>
    <script type='text/javascript' src="js/codemirror/mode/php/php.js"></script>
    
    <script type='text/javascript' src="js/filetree/jqueryFileTree.js"></script>

HTML structure

Structure of html document

...

header structure

In header buttons block, you can use buttons with dropdown or popup. For more info check section How-to...

Left side navigation structure

                        
    
    
        

        
        
            First leveltext
 
            
                First level
                
                    Simple second leveltext

                    
                        Second level with sublevel
                                                    
                            Active third leveltext

Content head (breadcrumb)

                        
    
    
        
            Title
            
                First level -            
                Active
            
               
        ...

Right free space can be used with form elements, or default search block.

Content grid

There used bootstrap 12 grid system.

Content Block structure

In div.side can be puted any form elements, or buttons.

If block using without .head, add to content class .closed

Accordion structure

                            
    
        
            heading 1
            
                accordion content
                        
            heading 2
            
                accordion content 2
                             
            ...

Accordion structure

                            
    
        
            heading 1
            
                accordion content
                        
            heading 2
            
                accordion content 2
                             
            ...

UL list structure

UL simple list structure

UL custom list structure

jQuery Tabs structure

jQuery Tabs structure

Informer structure

Custom scrollbar

Block content boxes

                            
    
        ...
        
            200 Points total
            160 Used
            40 Aviable
        
        ...

Forms structure

Messages structure

How-to...?

How to set default width of content?

To set another fixed width for content you should change width in stylesheet.css:

    #layout{...width: 1000px;...}

To set it responsive by default you should add class .screen_wide to #wrapper

...

How to set navigation hidden by default?

To set it hidden by default you should add class .sidebar_off to #wrapper

...

How to add popup in header?

There same structure like in block, but wrapped int div.popup in .buttons

If in .buttons > .item you will add div.popup it will be opened onClick .buttons > .item > a

How to add dropdown in header?

There same structure like in bootstrap group buttons

How to do wide prepended/appended elements?

You should add .wide_elements to input-append/prepend

JS function will calculate width of each elements, and set rest of free width to input

How to use default block head buttons?

.block_loading, .block_toggle, .block_remove it's predefined clasess.

How to use block loading layer?

    
    block_loading($("#your_block > .content"));

Call this function to add or hide(if open) loading layer.

How to use highligted block?

How to use choosed theme?

If you doesnt need to have setting, and you need to predefine theme/background, include class name of theme or background into body

    
    <body class="yourTheme yourBackground">
    ...
    </body>

If you doesnt set it, template will show default theme.

If you need to use only one theme, and you alredy choosed it, and seted to body tag, than you can remove from themes.css other themes, and remove settings controll from template.

Remove settings from actions.js:

    
    /* Settings */
        var sTheme = $.cookies.get('sTheme');
        if(null != sTheme){
            $(".themes a[data-theme="+sTheme+"]").addClass('active');
            $("body").addClass(sTheme);
        }else            
            $(".themes a.default").addClass('active');
        
        $(".themes a").click(function(){
            $(".themes a").removeClass('active');
            $(this).addClass('active');
            $('body').removeClass('themeSimple themeDark').addClass($(this).attr('data-theme'));
            $.cookies.set('sTheme',$(this).attr('data-theme'));
            return false;
        });
        
        var sBack = $.cookies.get('sBack');
        if(null != sBack){
            $(".backgrounds a[data-back="+sBack+"]").addClass('active');
            $("body").addClass(sBack);
        }else            
            $(".backgrounds a.default").addClass('active');
        
        $(".backgrounds a").click(function(){
            $(".backgrounds a").removeClass('active');
            $(this).addClass('active');
            $('body').removeClass('b_bcrosshatch b_crosshatch b_cube b_dots b_grid b_hline b_simple b_vline').addClass($(this).attr('data-back'));
            $.cookies.set('sBack',$(this).attr('data-back'));
            return false;
        });    
    /* EOF Settings */

After it was deleted, template will be faster, and cleaner. Also, dont forget to check actions.js, find comments with CAN BE REMOVED and remove it if you doesnt need it.

How to use editable tables?

First of all, this feature is for people who have basic jQuery skills.

...

Also, dont forget to add in bottom of page(befor <body>) jquery dialog window for Remove button alert.

    
        Row will be deleted

Open js/other/table_edit.js. There you will find commented areas where you can use ajax connections.

For example, to save changes in "dblclicked" input open table_edit.js:21 and find:

// Here your ajax actions after pressed Enter button

So, here you can insert your function call...

// Here your ajax actions after pressed Enter button
    save_cell($(this));

Usualy, in this situations devs save id of data on TR, or on TD. So you need to write new function where you will get an id, and send data to server. Somethink like this:

    function save_cell(cell){
        var id = cell.parents('tr').attr('id');//if id of row is on tr
        //var id = cell.attr('id);//if it's on td
        var val = cell.html();
        $.post('your_script',{id: id, value: val},function(response){
            alert(response);//server response
        });
    }

Same solution for other calllbacks...

Dont forget, if you doesnt find answer on your question, or you have some suggestions, you always can contact me with email. And i will do my best to help you.

Credits

Changelog

Version v1.2 - 15.08.2013
- added multi-themes support(2 themes, 8 backgrounds)
- added clearform function
- added combobox function
- added sidebar features
- added timepicker
- added sortable tables examples
- added editable tables
- added scroll to top button
- added new widgets
- updated block loader function
- updated header image to css style(now it's lighter and retina ready)
- updated documentation
- minor bugs fixed
Version v1.1 - 26.07.2013
- added .PSD file of main page
- added cookies control of layout
- added code editor plugin
- added file tree plugin
- added pricing table page sample
- added payment table page sample
- added credit cards icons
- added minor features
- minor bugs fixed
Version v1.0 - 17.06.2013
- Release