Ace admin template uses the same elements and classes of Bootstrap with addition of a few elements and classes to add some customization:


Some ".ace-nav" colors to change the top bar elements color:

  1. <ul class="nav ace-nav">
  2. <li class="purple">
  3. ...
  4. </li>
  5. <li>
  6. ...
  7. </li>
  8. </ul>
The following colors are defined:

grey purple green light-blue light-blue2 red light-green light-purple light-orange light-pink dark white-opaque dark-opaque

As well as the following:
.no-border .margin-4 .margin-3 .margin-2

You can find them inside the ace-nav.less file. The colors are defined in variables.less.

When you change a skin using the settings button, some of the topbar buttons .ace-nav > li may change color.
The color is dynamically changed by switching to one of the above mentioned color classes using Javascript and is not dependent on that specific skin.

A few additional classes have been defined in utility.less that may be useful at times.

.lighter .bolder
.inline .block
.center & .align-center .align-left .align-right
.middle & .align-middle .align-top .align-bottom
.position-relative .position-absolute
.no-underline .no-hover-underline
.no-shadow

For example .inline and .position-relative can be used to add a dropdown inside a "DIV" element without the need to define a new class:

  1. <div class="inline position-relative">
  2. <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
  3. <ul class="dropdown-menu">
  4. </ul>
  5. </div>

The following color classes have been defined (the values can be changed inside variables.less):

.dark .white .red .light-red .blue .light-blue .green .light-green .orange .orange2 .light-orange .purple .pink .pink2 .brown .grey .light-grey
The following font sizing classes have been defined:

.bigger-110 .bigger-120   ...   .bigger-290 .bigger-300

.bigger-125 .bigger-175 .bigger-225 .bigger-275
and smaller font classes:
.smaller-20 .bigger-30   ...   .smaller-90

.smaller-25 .smaller-75
  1. <i class="icon-twitter blue bigger-150"></i>
  2. <i class="icon-user smaller-75"></i>

The following classes specify a percentage of the parent element's width:

.width-20 .width-25   ...   .width-95 .width-100
  1. <div class="clearfix">
  2. <a href="#" class="pull-left btn btn-small width-45">Button 1</a>
  3. <a href="#" class="pull-right btn btn-small width-45">Button 2</a>
  4. </div>

Some spacing classes to add horizontal space:

.space-2 .space-4   ...   .space-30 .space-32
The same classes are availabe with the .vspace-2 ... .vspace-32 name.
They are hidden in larger screens and visible in smaller devices where blocks are stacked on top of each other and some space between them would be nice.
  1. <div class="space-16"></div>
  2. ...
  3. <div class="span6"></div>
  4. <div class="vspace-16"></div> <!-- space visible on smaller devices -->
  5. <div class="span6"></div>

Similar classes are defined for horizontal lines:

.hr-2 .hr-4 ... .hr-30 .hr-32
  1. <div class="hr-10"></div>
  2. <div class="hr-16 hr-double dotted"></div>

Some other classes are:

.overflow-visible .overflow-hidden .overflow-scroll .overflow-auto

For example the default CSS "overflow" property of "tab-content" in Bootstrap is set to auto.
That doesn't look nice in the homepage's "Recent Tasks" tab when dragging and sorting tasks around.
Using the "overflow-visible" class makes it better, without the need to define new CSS rules for that specific item or using inline styles.

  1. <div class="tab-content overflow-visible">
  2. <!-- Tab Content Here -->
  3. </div>

More classes that may be handing at times:

.no-margin .no-padding .no-border
There are also .header classes with same above text colors:
  1. <h3 class="header blue lighter smaller">
  2. Header Text
  3. </h3>

A few additional classes for elements

For bootstrap tabs some extra classes have been defined.
For the .tab-content element:

.no-border .no-padding
.padding-2 .padding-4   ...   .padding-32
For the .nav-tabs element:
.padding-2 .padding-4   ...   .padding-32
.tab-space-1 tab-space-2   ...   .tab-space-4
.tab-size-bigger
.tab-color-blue
  1.  
  2. <ul class="nav nav-tabs tab-space-2">
  3. </ul>
  4.  
  5. <ul class="nav nav-tabs tab-color-blue">
  6. </ul>
  7.  
  8. <ul class="nav nav-tabs tab-size-bigger">
  9. </ul>
  10.  
For accordions you can use .accordion-style2 for alternative style:
  1. <div class="accordion accordion-style2">
  2. ...
  3. </div>

Progress bars come with some extra colors and sizes:

.progress-purple .progress-pink .progress-yellow .progress-inverse
.progress-small .progress-mini
  1. <div data-percent="70%" class="progress progress-small progress-purple progress-striped active">
  2. <div class="bar" style="width:70%;"></div>
  3. </div>

Buttons come with some extra classes:

.btn-purple .btn-pink .btn-yellow .btn-grey .btn-light
.no-hover .no-border
.btn-app
  1. <a href="#" class="btn btn-small btn-purple">
  2. Print
  3. <i class="icon-print icon-on-right bigger-110"></i>
  4. </a>
  5.  
  6. <a href="#" class="btn btn-app btn-small btn-primary">
  7. <i class="icon-edit bigger-175"></i>
  8. <span class="bigger-110">Edit</span>
  9. </a>

Similar extra classes are available for badges and labels:

.label-purple .badge-pink .label-yellow .badge-grey .label-light .badge-primary
The following options are defined for labels:
.label-large .arrowed .arrowed-in .arrowed-right .arrowed-in-right
  1. <span href="#" class="label label-large label-primary arrowed-in arrowed-right">
  2. Label Text
  3. </span>
Label Text

Dropdown menu extra options:

.dropdown-info .dropdown-primary .dropdown-danger .dropdown-warning .dropdown-inverse .dropdown-success .dropdown-purple .dropdown-pink .dropdown-yellow .dropdown-grey .dropdown-light .dropdown-lighter

.dropdown-caret
.dropdown-close .dropdown-closer

Tooltip and popover extra options:

.tooltip-error .tooltip-warning .tooltip-info .tooltip-success
  1. <a href="#" title="error message" class="my-tooltip-link tooltip-error">
  2. Show Tooltip
  3. </a>
Please note that when enabling tooltips for an element, if you want to use the above mentioned colors, the container option should not be used.
  1. //This won't work with '.tooltip-error', etc
  2. $('.my-tooltip-link').tooltip({ container:'body' , placement:'top' });
  3.  
  4. //Don't specify the 'container' so that tooltip gets inserted after our element
  5. $('.my-tooltip-link').tooltip({ placement:'top' });
Note If you want to use a tooltip inside a modal dialog, again you shouldn't use the container option of the tooltip.
Because it will appear below our modal box as the CSS z-index value of "tooltips" is defined less than that of "modals".
On the other hand If for example you want to show a tooltip inside a tab or accordion, and the tooltip text is long and doesn't fit the container's width or height, it may be hidden or cause scrollbars on the container.
In this case, it's better to use the container option and set it to body so the tooltip is not a child of that tab or accordion and will be shown with no problems for the container.

jQuery UI slider also come with some extra classes:

.slider-green .slider-red .slider-purple .slider-orange .slider-dark .slider-pink
.ui-slider-small
  1. <span class="ui-slider-green"></span>

Dashboard Elements

Info and Stats

  1. <div class="infobox infobox-green">
  2. <div class="infobox-icon"><i class="icon-comments"></i></div>
  3. <div class="infobox-data">
  4. <span class="infobox-data-number">32</span>
  5. <span class="infobox-content">comments + 2 reviews</span>
  6. </div>
  7. <div class="stat stat-success">8%</div>
  8. </div>
32 comments + 2 reviews
8%
32 comments + 2 reviews
8%

It can have the following color classes: (Please see assets/css/less/infobox.less)

  • .infobox-green
  • .infobox-green2
  • .infobox-purple
  • .infobox-purple2
  • .infobox-pink
  • .infobox-blue
  • .infobox-blue2
  • .infobox-blue3
  • .infobox-brown
  • .infobox-wood
  • .infobox-lightbrown
  • .infobox-orange
  • .infobox-orange2
  • .infobox-grey
  • .infobox-black

You can use .infobox-dark for a darker box and .infobox-small for a smaller box.

.infobox-icon .infobox-chart .infobox-progress containers are for placing icons and charts.

.infobox-data-number .infobox-text are for title and .infobox-content is for extra explanation.

.stat and .badge is for the small stats and arrows.

Note View mustache/app/views/pages/partials/index/infobox.mustache for more info.

Conversations, Tasks and Members

For more info please check the relevant mustache templates in here: mustache/app/views/pages/partials/index

Widgets

  1. <div class="widget-box">
  2.  
  3. <div class="widget-header">
  4. <h5>Default Widget Box</h5>
  5. <div class="widget-toolbar">
  6. <a data-action="settings" href="#"><i class="icon-cog"></i></a>
  7. <a data-action="reload" href="#"><i class="icon-refresh"></i></a>
  8. <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
  9. <a data-action="close" href="#"><i class="icon-remove"></i></a>
  10. </div>
  11. </div><!--/.widget-header -->
  12.  
  13. <div class="widget-body">
  14. <div class="widget-main">
  15. </div>
  16. </div><!--/.widget-body -->
  17.  
  18. </div><!--/.widget-box -->
.widget-header" comes with following classes:
.widget-header-small .widget-header-large .widget-header-flat .header-color-blue .header-color-blue2 .header-color-blue3 .header-color-green .header-color-green2 .header-color-green3 .header-color-red .header-color-red2 .header-color-red3 .header-color-orange .header-color-purple .header-color-pink .header-color-dark .header-color-grey
.widget-box can come with following classes:
.transparent .light-border .no-border
.widget-main can come with following paddings:
.no-padding .padding-2 .padding-4   ...   .padding-32
For example when putting a table inside the widget you may want to use .no-padding

.widget-toolbar example:

  1.  
  2. <div class="widget-header header-color-pink">
  3. <h5>With Tabs</h5>
  4. <div class="widget-toolbar no-border">
  5. <ul class="nav nav-tabs">
  6. <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  7. <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  8. <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
  9. </ul>
  10. </div>
  11. </div><!-- .widget-header -->
  12.  

Gallery

Gallery items can have tags (inside li or a), captions (inside a or stand alone) and a toolbar.

  1. <ul class="ace-thumbnails">
  2.  
  3. <li>
  4. <a href="image-1.jpg" title="title" data-rel="gallery1">
  5. <img alt="150" src="thumb-1.jpg" />
  6. </a>
  7. <div class="tags">
  8. <span class="label label-info">breakfast</span>
  9. </div>
  10. <div class="tools">
  11. <a href="#"><i class="icon-link"></i></a>
  12. <a href="#"><i class="icon-remove"></i></a>
  13. </div>
  14. </li>
  15.  
  16.  
  17. <li>
  18. <a href="image-2.jpg" data-rel="gallery1">
  19. <img alt="150" src="{thumb-2.jpg">
  20. <div class="text">
  21. <div class="inner">Sample Caption on Hover</div>
  22. </div>
  23. </a>
  24. </li>
  25. .
  26. .
  27. .
  28.  
  29. </ul>

Pricing Tables

Pricing Tables come in two sizes, small and large and are based on widget boxes:

  1. <div class="widget-box pricing-box">
  2. </div>
  1. <div class="span3">
  2. <div class="widget-box transparent">
  3. <div class="widget-header">
  4. <h5 class="bigger lighter">Package Name</h5>
  5. </div>
  6. <div class="widget-body">
  7. <div class="widget-main no-padding">
  8. <ul class="unstyled list-striped pricing-table-header">
  9. <li>Disk Space </li>
  10. .
  11. .
  12. .
  13. </ul>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18.  
  19.  
  20. <div class="span2 pricing-span">
  21. <div class="widget-box pricing-box-small">
  22. </div>
  23. </div>
For more info please check the relevant mustache templates at: mustache/app/views/pages/partials/pricing

Invoice

Invoice page also basically consistes of a .widget-box.
The following classes are used: .invoice-box .invoice-info .invoice-info-label

For more info please check the relevant mustache at:
mustache/app/views/pages/invoice.mustache

Login & Register

It also is based on .widget-box and you can see the following template for more info: mustache/app/views/pages/partials/login

User Profile Page

There are 3 profile pages included which mostly use the general elements with some extra additions. For more info take a look at:
mustache/app/views/pages/partials/profile/style_1.mustache

mustache/app/views/pages/partials/profile/style_2.mustache
mustache/app/views/pages/partials/profile/style_3.mustache

The general container for profile has the class name .user-profile
The profile photo is .profile-picture
The user info container is .profile-contact-info and when striped it has .profile-user-info-striped as well.
Each user info row is .profile-info-row, each info name is .profile-info-name and info value is .profile-info-value

The recent profile activity container is .profile-feed and each item is .profile-activity as you can see in: mustache/app/views/pages/partials/profile/activity.mustache

In the second profile style, there are also user skills, which are contained by .profile-skills and also the .profile-users container which is the friends section.

The third profile style in inside a .tab-content with the extra .profile-edit-tab-content class.

Please check the relevant templates at
mustache/app/views/pages/partials/profile and LESS file at assets/css/less/page.profile.less for more info.

Inbox & Messages

Please check the relevant templates at
mustache/app/views/pages/partials/inbox and LESS file at assets/css/less/page.inbox.less for more info.

You can use smaller tabs by removing .tab-size-larger class from the relevant .nav-tabs.
Or you can remove tabs and use inbox menus like this:

  1. <div class="span2 inbox-menu">
  2.  
  3. <div class="center">
  4. <a href="#" class="btn btn-small btn-purple btn-new-mail">
  5. <i class="icon-envelope"></i>
  6. Write Mail
  7. </a>
  8. </div>
  9.  
  10. <div class="space-6"></div>
  11. <div class="inbox-folders responsive">
  12.  
  13. <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
  14. <i class="icon-inbox blue bigger-110"></i>
  15. <span class="bigger-110">Inbox</span>
  16. <span class="badge badge-primary counter">2</span>
  17. </a>
  18. <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
  19. <i class="icon-inbox blue bigger-110"></i>
  20. <span class="bigger-110">Sent</span>
  21. <span class="badge badge-primary counter">2</span>
  22. </a>
  23.  
  24. </div>
  25.  
  26. </div>
  27.  
  28. <div class="span10">
  29. <!-- messages -->
  30. </div>

You can also make inbox messages more compact by adding .message-condensed class to .message-container element.

Timeline

Widget boxes are used for timelines.
Default timeline items use .transparent.widget-box elements.
Please see mustache/app/views/pages/partials/timeline for more details.

CSS3 Checkbox, Radio and On/Off Switches

Ace comes with Pure CSS3 styled checkbox without any javascript. Switches are also animated on supported browsers such as Firefox and Chrome. It also falls back to default browser style on IE8.

Please note that, from v1.1.3, you should add ".ace" class to input/radio elements to have them styled.

  1. <input type="checkbox" id="checkbox1" class="ace" />
  2. <label class="lbl" for="checkbox1"> check me</label>
  3.  
  4. <label>
  5. <input type="checkbox" class="ace" />
  6. <span class="lbl"> check me</span>
  7. </label>
  8.  
  9.  
  10. <input type="radio" name="radio_field[]" value="1" class="ace" />
  11. <label class="lbl" for="checkbox1"> radio option 1</label>
  12.  
  13. <input type="radio" name="radio_field[]" value="2" class="ace" />
  14. <label class="lbl" for="checkbox1"> radio option 2</label>
  15.  
  16. <input type="radio" name="radio_field[]" value="3" class="ace" />
  17. <label class="lbl" for="checkbox1"> radio option 3</label>
Note You must include an element with .lbl class right after the checkbox or radio. It may or may not contain text.
Checkboxes have a second style which you should add .ace-checkbox-2 class to the input element.
If you've been using a function inside a server side script to produce the HTML for checkboxes, you may need to change them a bit to output an element with .lbl class after it.
  1. <input type="checkbox" id="switch1" class="ace ace-switch" />
  2. <label class="lbl" for="switch1"></label>
  3.  
  4. <label>
  5. <input type="checkbox" class="ace ace-switch ace-switch-6" />
  6. <span class="lbl"> check me</span>
  7. </label>

Currently switches come in 7 styles: .ace-switch , .ace-switch.ace-switch-2, ... .ace-switch-.ace-switch-7



Custom File Inputs

File input come in 2 different formats, small and large with drag & drop ability with some methods and callbacks.

The following options are available

  • style which is either false (the default one) or well which is the larger one with preview and multiple file display.
  • no_file, with default value No File ...
  • no_icon, with default value icon-upload-alt
  • btn_choose, with default value Choose
  • btn_change, with default value Change (preferably set to null for well style)
  • icon_remove, with default value icon-remove. Set to null if you don't want a remove/reset button.
  • droppable. Default values false. Disable or enable drag & drop feature on the control.
  • thumbnail. Determines how preview thumbnails are displayed. Default value is small with large and fit options.
  • before_remove. Called before user clicks on remove/reset button. Return false to cancel remove or reset.
  • before_change. Called after user selects or drops files and before onchange event is fired.
    Returning false will cancel it and no files will be added to the control.
    Returning a FileList object or an array containing File objects will change the control's file list accordingly.
    See an example below.
    Note It's not possible to change the HTML file input control's value because of browser's security policies.
    We can only reset it.
    But when when change the file list inside before_change function, the new list will be saved to ace_input_files data object as described below.
    See form-elements.html for an example as how to change & limit the selected files to images only.
  • preview_error will be called when making thumbnail preview of an image fails.
    It takes two arguements, first is the file name and second is the error code specifying the type of error. (See example below)

The following methods are also supported:

  • reset_input which resets the input and clears all previews and data inside it.
  • reset_input_field which only resets the file input element.
  • disable
  • enable
  • update_settings. You can use to change the input's settings, such as no_file, no_icon, btn_change, its callbacks, etc...
  • show_file_list. It will redraw the list of files selected. Can be used after update_settings.
  • enable_reset. Which takes either "false" or "true" and disables or enables "reset/remove" button functionality. Useful for disabling reset/remove during a file upload.
  • files. Retrieve a list of selected files.
  • method. Returns the method used to select files which is either "drop" or "select".
    1. <input type="file" id="file-input-1" />
    2. <script>
    3. $('#file-input-1').ace_file_input({
    4. no_file:'No File ...',
    5. btn_choose:'Choose',
    6. btn_change:'Change'
    7. }).on('change', function(){
    8. var files = $(this).data('ace_input_files');
    9. //or
    10. //var files = $(this).ace_file_input('files');
    11.  
    12. var method = $(this).data('ace_input_method');
    13. //method will be either 'drop' or 'select'
    14. //or
    15. //var method = $(this).ace_file_input('method');
    16. };
    17. </script>
    1. //after creating the ace input, you can use the following methods:
    2. $('#file-input-1').ace_file_input('disable');
    3. $('#file-input-1').ace_file_input('enable');
    4. $('#file-input-1').ace_file_input('reset_input');
    5. //etc
    Note Check examples/file-upload.html for a working example.
    1. <input type="file" multiple />
    2. <script>
    3. $('input[type=file][multiple]').ace_file_input({
    4. style:'well',
    5. btn_choose:'Drop images here or click to choose',
    6. btn_change:null,/* we don't need it */
    7. no_icon:'icon-cloud-upload',
    8. droppable:true,
    9. thumbnail:'large',
    10. before_change:function(files, dropped) {
    11. var file = files[0];
    12. if(typeof file == "string") {
    13. //file is just a file name here (in browsers that don't support FileReader API such as IE8)
    14. if(! (/\.(jpe?g|png|gif)$/i).test(file) ) {
    15. //not an image extension?
    16. //alert user
    17. return false;
    18. }
    19. }
    20. else {
    21. var type = $.trim(file.type);
    22. if(
    23. ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
    24. ||
    25. //for android's default browser!
    26. ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )
    27. )
    28. {
    29. //alert user
    30. return false;
    31. }
    32.  
    33. if( file.size > 1024*100 ) {
    34. //is the file size larger than 100KB?
    35. //alert user
    36. return false;
    37. }
    38. }
    39.  
    40. return true;
    41. },
    42.  
    43. before_remove:function() {
    44. //if(upload_in_progress) return false;//don't allow resetting the file input while upload in progress
    45. return true;
    46. },
    47.  
    48. preview_error : function(filename, error_code) {
    49. //name of the file that failed
    50. //error_code values
    51. //1 = 'FILE_LOAD_FAILED',
    52. //2 = 'IMAGE_LOAD_FAILED',//the loaded file is not an image
    53. //3 = 'THUMBNAIL_FAILED'//somehow creating the thumbnail failed.
    54. //notify user?!
    55. }
    56.  
    57. });
    58. </script>

    When you want to upload the files you can use ace_input_files and ace_input_method data of the file element.

    You can retrieve them like this:

    1. var files = $('file input element').data('ace_input_files');
    2. // which is an Array or FileList containing the selected files.
    3. var method = $('file input element').data('ace_input_method');
    4. // which is either "drop" or "select" depending on how the user selected files.
    5.  
    6. //OR
    7.  
    8. var files = $('file input element').ace_file_input('files');
    9. var method = $('file input element').ace_file_input('method');

    Hint For an example see the examples/file-upload.html
    A working PHP example for handling the uploaded file from the file control in "file-upload.html" is available at examples/file-upload.php


    Custom Color Picker

    1. <select id="colorpicker" class="hidden">
    2. <option data-custom="val1" value="#AC725E">#AC725E</option>
    3. <option data-custom="val2" value="#D06B64">#D06B64</option>
    4. .
    5. .
    6. .
    7. </select>
    1. $('#colorpicker').ace_colorpicker({pull_right:false|true , caret:false|true})
    2. .on('change', function(){
    3. /**
    4. $(this).val();
    5. $(this).data('custom');
    6. etc ...
    7. */
    8. });


    Inline Editable Plugin

    There are 4 custom additions to the editable plugin, including Image, Wysiwyg, Spinner and Slider editables.

    They are defined inside assets/js/x-editable/ace.editables.js

    Please check the profile.html or mustache/app/views/assets/scripts/profile.js for usage examples.

    For the image editable plugin you can specify all ace file input options, as well as some extra options that you can see in the example file:

    • name: The name of the file input field is put here
    • max_size: The maximum size of a file user can choose
    • on_error: callback function called when an error occurs
    • on_success: callback function called when a file is successfully selected
    The before_change callback for this input has already been defined to accept images only, but you can override it:
    1. $('#avatar').editable({
    2. type: 'image',
    3. name: 'avatar',
    4. value: null,
    5. image: {
    6. //specify ace file input options here
    7. before_change: function(files, dropped) {
    8. //this will override the one already defined which only accepts images.
    9. },
    10. //no_icon:'icon-picture',
    11. //no_icon:'icon-picture',
    12.  
    13. //some additional parameteres
    14. name : 'avatar',//put the field name here as well
    15. max_size: 102400,//in byes
    16. on_error: function(error_code) {
    17. if(error_code == 1) {
    18. //file format error
    19. }
    20. else if(error_code == 2) {
    21. //file size error
    22. } else {
    23. //other error
    24. }
    25. },
    26. on_success: function() {
    27. //a valid image selected
    28. }
    29.  
    30. },
    31. url: function(params) {
    32. //user clicked "OK" and we are ready to upload
    33. //Please see the example file here: examples/profile-avatar-update.js
    34. }
    35.  
    36. });


    Wysiwyg editor

    Please see examples/wysiwyg.html for an example customizing wysiwyg element.
    Mindmup wysiwyg editor is a lightweight plugin taking advantage of HTML5, jQuery and Bootstrap and is quite good in most cases, but it's not as feature rich as other well known plugins such as CKEditor or TinyMCE.
    So I will add support for another plugin in upcoming updates.


    You can use the following wrapper function to create a wysiwyg plugin:

    1. <div id="editor-1"></div>
    1. $('#editor-1').ace_wysiwyg()
    This will create the default editor will all options available.

    You can choose to have a limited set of buttons with different icons, tooltips or button classes:
    1. $('#editor-1').ace_wysiwyg(
    2. {
    3. toolbar:
    4. [
    5. 'bold',
    6. {name:'italic', title:'Custom Title!', className:'btn-info'},//customize
    7. 'strikethrough',
    8. 'underline',
    9. null,//null value creates some spacing between buttons (grouping)
    10. 'foreColor',
    11. null,
    12. 'insertImage',
    13. null,
    14. {name:'createLink', placeholder:'Add a link', button_text:'Custom Button Text'}
    15. ]
    16. ,
    17. speech_button : false//don't show the speech input button on Chrome
    18. //,
    19. //wysiwyg:{}//Specify the options to be passed to the plugin. Refer to plugin docs to see what parameteres it takes.
    20. //,
    21. //toolbar_place : function(toolbar) {}//see below
    22. }
    23. )
    24. .prev().addClass('wysiwyg-style2');//use the second wyswiyg toolbar style here

    By default the created toolbar will be inserted right before the editor element, but you can choose a different place.
    For example you may want to put it inside the header of a widget box:

    1. toolbar_place: function(toolbar) {
    2. return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
    3. }
    Now the toolbar for this instance of wysiwyg editor will be inside the specifed widget header.
    When you insert an image inside the editor, Firefox allows resizing of it. But Webkit based browsers don't show such ability.
    Using jQuery UI Resizable feature, you can add resize ability.
    I've put an example on wysiwyg page which you can see on bottom of wysiwyg.html page or the relevant inline script file mustache/app/views/assets/scripts/wysiwyg.js.
    Add .wysiwyg-style1 or .wysiwyg-style2 to .wyswiyg-toolbar element, for other toolbar styles.

    .wyswiyg-toolbar is dynamically created and inserted before our editor element:

    1. $('#editor-1').prev().addClass('wysiwyg-style2');


    FuelUX Spinner

    FuelUX Spinner is used with a little extra wrapping for easier use and customiztion.
    1. <input type="text" id="spinner" />
    1. $('text field element').ace_spinner({
    2. //FUEL_UX SPINNER options
    3. // + custom ones
    4. icon_up:'icon-plus',//default : 'icon-chevron-up'
    5. icon_down:'icon-minus',// default : 'icon-chevron-down'
    6. btn_up_class:'btn-success',//default : ''
    7. btn_down_class:'btn-danger'//default : ''
    8. }).on('change', function(){
    9. //alert($(this).val());
    10. });


    FuelUX Wizard

    FuelUX Wizard is used with a little extra wrapping for easier use and customiztion.
    Please Note You should add a selector to the steps indicator element:
    data-target="#step-container"
    and add the relevant data to the steps container:
    id="step-container"
    1. <div data-target="#step-container" id="fuelux-wizard" class="row-fluid hidden">
    2. <ul class="wizard-steps">
    3. <li data-target="#step1" class="active">
    4. <span class="step">1</span>
    5. <span class="title">Step # 1</span>
    6. </li>
    7. <li data-target="#step2">
    8. <span class="step">2</span>
    9. <span class="title">Step # 2</span>
    10. </li>
    11. .
    12. .
    13. .
    14. </ul>
    15. </div><!--/.row-fluid-->
    16.  
    17. <div id="step-container" class="step-content row-fluid position-relative">
    18. <div class="step-pane active" id="step1">
    19. <form id="form-1">
    20. </form>
    21. </div><!--#step1-->
    22. <div class="step-pane active" id="step2">
    23. </div><!--#step2-->
    24. .
    25. .
    26. .
    27. </div><!--/.step-content-->
    28.  
    29. <div class="row-fluid wizard-actions">
    30. <button class="btn btn-prev">
    31. <i class="icon-arrow-left"></i>
    32. Prev
    33. </button>
    34. <button class="btn btn-success btn-next" data-last="Finish ">
    35. Next
    36. <i class="icon-arrow-right icon-on-right"></i>
    37. </button>
    38. </div><!--/.wizard-actions-->
    1. $('#fuelux-wizard').ace_wizard().on('change', function(e, info){
    2. if(info.step == 1 && !$('#form-1').valid()) return false;
    3. }).on('finished', function(){
    4. alert('Success!');
    5. }).on('stepclick', function(){
    6. //return false;//if you don't want users click on backward steps
    7. });


    FuelUX Treeview

    FuelUX tree is used with a little extra wrapping and some extra options for easier use and customiztion.
    1. <div id="tree1" class="tree"></div>
    1. $('#tree1').ace_tree({
    2. dataSource: treeDataSource ,
    3. multiSelect:true,
    4. loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
    5. 'open-icon' : 'icon-minus',
    6. 'close-icon' : 'icon-plus',
    7. 'selectable' : true,//or false
    8. 'selected-icon' : 'icon-ok',
    9. 'unselected-icon' : 'icon-remove'
    10. });
    Check out examples/treeview.html for an example.


    Bootstrap Tag Input

    Not working in IE8. Can be replaced by a textarea on IE8.
    Please check the mustache/app/views/assets/scripts/form-elements.js to see an example.
The following libraries and plugins have been used to power different parts of Ace admin template.
You can find documentation and examples for each one on their respective pages or you may want to check out Ace html files for examples.
  • jQuery 2.0.3
  • jQuery UI 1.10.3 (Custom Build)
  • Twitter Bootstrap 2.3.2
  • FontAwesome 3.2.1
  • LESS 1.4.1
  • Mustache
  • Twitter Hogan.js
  • Mustache.js
  • Mustache for PHP
  • Google Fonts "Open Sans"
  • jQuery Flot Charts 0.8.1
  • jQuery Sparklines 2.1.2
  • Easy Pie Chart 1.2.5
  • jQuery Knob 1.2.0
  • Mindmup Wysiwyg Editor
  • Toopay Markdown Editor 1.1.4
  • jQuery Validate 1.11.1
  • FuelUX 2.3.0 (Spinner, Wizard & Treeview)
  • Dropzone.js 3.0
  • FullCalendar 1.6.3
  • jQuery ColorBox 1.4.27
  • jQuery dataTables 1.9.4
  • jQuery jqGrid 4.5.2
  • X-editable 1.4.6
  • Select2 3.4.1
  • jQuery Chosen 1.0.0
  • jQuery Masked Input 1.3.1
  • jQuery Input Limiter 1.3.1
  • jQuery AutoSize 1.17.2
  • Bootstrap Tags 2.2.5
  • Nestable Lists
  • Bootstrap Colorpicker
  • Bootstrap Datepicker
  • Bootstrap Timepicker v0.2.3
  • Bootstrap DateRange Picker 1.2
  • Bootbox.js 3.3.0
  • jQuery Gritter 1.2
  • jQuery slimScroll 1.2.0
  • Spin.js 1.3.0
  • jQuery Mobile 1.3.2 (Custom Build)
  • jQuery UI Touch Punch 0.2.2
  • Google Code Prettify
  • ExplorerCanvas
  Choose Skin