# 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

JS

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

JS

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

Content head (breadcrumb)

#

                Title

            ...

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

Content grid

There used bootstrap 12 grid system.

Content Block structure

##

                Title

                ...

                ...

                ...

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

                ...

                        ...

                        name
                        ...

                ...

jQuery Tabs structure

                    Tab 1
                    ...

                    ...

jQuery Tabs structure

                        ...

                        ...

Informer structure

Custom scrollbar

            ...

                ...

            ...

Block content boxes

            ...

                200 Points total
                160 Used
                40 Aviable

            ...

Forms structure

            ...

            ...

Messages structure

            ...

                ...

                        ...

                        title

                            ...

                ...

            ...

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

- jQuery
- jQuery UI
- Twitter Bootstrap
- Excanvas plugin
- jQuery Cookies
- Flot charts
- jVectorMap
- Color picker
- Fullcalendar
- Fancybox
- Sparkline
- DataTables
- Custom content scroller
- Uniform
- Select2
- TagsInput
- Maskedinput
- Multiselect
- ValidationEngine
- Stepy
- Noty
- CLEditor
- nicEdit
- SyntaxHighlighter
- Plupload
- Elfinder
- iButton
- CodeMirror
- File Tree
- Scroll Up

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