Introduction


Please make sure to follow me on Twitter / Facebook or subscribe to http://feeds.feedburner.com/responsiweb, to be informed of updates when available.

First of all I would like to thank you for purchasing Ace admin template. I hope you like it and find it easy to work with.

This is the 4th release (v1.1.3) and there may be bugs and missing features which will be targeted in next updates.

Also, this documentation is brief and may be lacking in some parts. If you think more explanations or examples are needed, just let me know.

Please send your questions, comments, suggestions and bug reports to me at ace.support@live.com and I will do my best to reply as soon as possible.

Best Wishes
Mohsen Hosseini

Features

Ace is a lightweight and feature rich admin template which is clean and easy to use.
Current release comes with the following features:

  • 4 different theme colors
  • Responsive design based on Bootstrap 2.3.2
  • Custom elements and plugins including:
    • Pure CSS3 checkbox, radio and On/Off switch elements (not available in IE8)
    • File input control
    • Simple color picker
    • Customizable widgets in different colors and styles
    • Client side saving of user settings such as collapsed sidebar,etc
  • Bootstrap, jQuery UI and third party plugins and elements including:
    • Charts
    • Dynamic tables & grids
    • Inline editable feature
    • Slider
    • Spinner
    • Treeview
    • Wizard
    • Form validation
    • Wysiwyg & Markdown editor
    • Drag & drop file upload
    • Color picker
    • Date picker
    • DateRange picker
    • Time picker
    • Colorbox for gallery
    • Full calendar
    • Tag input
    • Chosen selects
    • Select2 selects
    • Textarea input limiter
    • Textarea auto resize
    • Masked input
    • Nestable hierarchical list
    • Growl like notifications
    • Imageless spinner
Note Stylings of most third party elements have been modified to replace external images and icons with CSS and FontAwesome.

This has benefits such as better view on Retina displays as almost no pixel graphics are used and it also means fewer network file requests resulting in faster page load time.

Planned Features

The following list will be added to the template on next updates:

  • Upgrading to Bootstrap 3.x while maintaining support for Bootstrap 2.3.x
  • New features & elements such as :
    • Search results
    • Tables with details
    • File upload and management
    • Email template
    • Frontend page templates
  • Adding more examples
If you also have a recommendation or feature request, please let me know.

Changes and updates


Some elements have been enhanced and some bugs fixed.
Please take a look at the changelog file for a quick overview.

Make sure you have a copy of your application files before making changes.

v1.1.3 Changes

Styled checkboxes
Previously, browser checkboxes and radio buttons were hidden by default and you needed to insert an .lbl element after them to be displayed correctly.
This caused some issues with environments or libraries that created checkboxes that were difficult to add an .lbl element after them.
So now, default checkboxes are shown without change and you can style them by adding .ace class to checkboxes and inserting an .lbl element after them.

Please see Forms & Elements section for more info.
You can also use the previous method by removing .ace class name from assets/css/less/form-checkbox.less and recompiling ace.less

To fix sidebar you now should add .sidebar-fixed class to .sidebar element and to fix breadcrumbs you should add .breadcrumbs-fixed class to .breadcrumbs element.

You should now use assets/js/ace-extra.js inside head element, to be able to enable and save some user settings using Javascript.

Please see Settings section for more info.


The #sidebar-collapse element's icon has two attributes data-icon1 and data-icon2 which determine the button's icon in expanded/collapsed state.

#ace-settings-header has been changed to #ace-settings-navbar

Thirdparty Chosen plugin now uses chosen- prefix rather than chzn- for its classes.
If you have defined custom CSS rules or used chzn-* selectors inside your scripts, you may need to modify them accordingly.

v1.1.2 Changes

There are a few things you may need to change in your HTML code.

First of all, CSS "ID"s have been replaced with classes. It seems to be the preferred approach.

So for example in CSS files where we had:
#main-content { ... }

It has been changed to:
.main-content { ... }

The element in HTML code still keeps the ID attribute, so previous Javascript code should work as expected.

<div class="main-container" id="main-container">
  ...
</div>

...

<a class="menu-toggler" id="menu-toggler">
  <span></span>
</a>

You just need to add a class with the same ID value to HTML elements.

The specific changes are:

  • #user_info .user-info (Topright user menu)
  • #user_menu .user-menu
  • #menu-toggler .menu-toggler
  • #sidebar .sidebar
  • #sidebar-shortcuts .sidebar-shortcuts
  • #sidebar-shortcuts-large .sidebar-shortcuts-large
  • #sidebar-shortcuts-mini .sidebar-shortcuts-mini
  • #sidebar-collapse .sidebar-collapse
  • #main-container .main-container
  • #main-content .main-content
  • #page-content .page-content
  • #breadcrumbs .breadcrumbs
  • #nav-search .nav-search
  • #nav-search-input .nav-search-input
  • #nav-search-icon .nav-search-icon
  • #ace-settings-container .ace-settings-container
  • #ace-settings-btn .ace-settings-btn
  • #ace-settings-box .ace-settings-box
  • #btn-scroll-up .btn-scroll-up

The text on first level links of side navigation which were SPAN elements, should have the .menu-text class now:

<li>
  <a href="index.html">
    <i class="icon-dashboard"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

Same applies to #menu-toggler element:

<a href="#" class="menu-toggler" id="menu-toggler">
  <span class="menu-text"></span>
</li>

The default size of icons inside buttons have been removed.
You may specify icon sizes using .bigger-110 ... .bigger-300 as described later.

<a href="#" class="btn btn-app btn-primary">
  <i class="icon-envelope bigger-200"></i>
  Email
</li>

For easier changing of icons inside breadcrumbs, add .home-icon to the first icon (the one indicating homepage) and add .arrow-icon to other icons.

To see what changes have been made to other controls and plugins please check the relevant sections below.

HTML files are located on the main directory as you can see.

They are automatically generated from the Mustache template files.

There is more details about Mustache files in this section.

Note You don't need Mustache files for your application.

But you can see how different sections of Ace admin template are structured by looking at Mustache template files.

Otherwise you may have to dig through lots of static HTML code to figure out things.

Template files are inside mustache/app/views folder.

  • assets folder containing
    • css
    • css/less
    • js
    • images and fonts
  • docs folder containing this documentation file.
  • examples folder which has a few example files such as uploading files.
  • mustache folder containing
    • app folder containing views(mustache templates) and data files used to generate the HTML output.
    • js folder containing the necessary Javascript compilers and classes to generate the HTML output.
      Use the following command to generate HTML output inside:
      node index.js
      The result files will be saved to output_folder.
    • php folder containing PHP Mustache compiler and some demo classes to generate the HTML output on the fly.
      You can view it like this:
      http://server_address/path_to_ace/mustache/php/

CSS files consist of:

  • ace.min.css
  • ace-responsive.min.css
  • ace-skins.min.css
  • ace-ie.min.css (for ie8)
The uncompressed css files are put in the "uncompressed" folder.


LESS files are located under the assets/css/less directory.

You can compile and generate your own CSS if you want to remove some parts.

For example if you don't need RTL (right to left) style, comment that line and compile it.

At this time, the latest stable version of LESS which is 1.4.1 has been used to compile and generate the output.


Javascript files are:

  • ace.min.js
  • ace-elemenets.min.js
  • ace-extra.min.js
The uncompressed js files are put in the "uncompressed" folder.


HTML pages are the following:

  1. Empty (empty.html)
  2. Blank HTML Page (blank.html)
  3. Buttons & Icons (buttons.html)
  4. Full Calendar (calendar.html)
  5. UI Elements (elements.html)
  6. Error 404 (error-404.html)
  7. Error 500 (error-500.html)
  8. FAQ (faq.html)
  9. Form Elements (form-elements.html)
  10. Form Wizard (form-wizard.html)
  11. Gallery (gallery.html)
  12. Grid (grid.html)
  13. Inbox & Messages (inbox.html)
  14. Dashboard (index.html)
  15. Invoice (invoice.html)
  16. jQuery Grid Plugin (jqgrid.html)
  17. jQuery UI (jquery-ui.html)
  18. Login, Registration and Password Retrieval Page (login.html)
  19. Nestable List (nestable.html)
  20. Pricing Boxes (pricing.html)
  21. Profile (profile.html)
  22. Tables (tables.html)
  23. Timeline (timeline.html)
  24. Treeview (treeview.html)
  25. Typography (typography.html)
  26. Widget Boxes (widgets.html)
  27. Wysiwyg (wysiwyg.html)

Mustache files are the following:

  • mustache/app folder which has the following:
    • Mustache templates inside mustache/app/views folder:
      1. layouts folder containing the 3 layouts used:
        1. default.mustache which is the layout for most pages
        2. login.mustache which is the layout for the login page.
        3. empty.mustache which is the layout for the empty.html page.

        The partials folder contains different parts of each layout.

        The _shared folder inside partials, contains partial templates that are used by more than one layout.

        For example the partial templates mustache/app/views/layouts/partials/_shared/sidenav.mustache
        and
        mustache/app/views/layouts/partials/_shared/sidenav/items.mustache

        are used to generate the side navigation menu.

      2. pages folder containing the page templates:
        index.mustache, typography.mustache and so on.

        Inside it, is the partials folder which contains sections of some pages.

        For examples mustache/app/views/pages/index folder contains the following partial templates:
        infobox.mustache domains.mustache tasks.mustache members.mustache comments.mustache conversations.mustache
        which together with the index.mustache page template and default.mustache layout template, constitute up the index(dashboard) page.

      3. assets folder containg inline scripts and styles for each page.
        Putting them in separate files makes it easier to read and edit.
        In some (server side programming language) frameworks, this is usually done by registering files and snippets during application run and inserting them in the output at the right spot.
      I have overridden a function of Hogan.js and Mustache.js compiler to automatically load a partial template as needed without preloading them.
      They are located at mustache/js/classes/autoload-hogan.js mustache/js/classes/autoload-mustache.js.
      Inside templates a partial is loaded like this: {{> layout.breadcrumbs}} or {{> page.comments}}
    • data folder containing data files used inside templates which are JSON and CSV files.
      This is for demo only and in your app you usually want to use databases to store and retrieve data.
      The folder consists of:
      1. layouts folder containing data for each layout.
        The partials folder contain data such as "navigation menu items", top notifications and messages, etc.
        For example mustache/app/data/layouts/partials/default/sidenav_navList.json contains the side navigaiton items for the default layout.
      2. pages folder containing data for each page.
        index.json typography.json etc, contain the basic page data such as its title, scripts and styles.
        The partials folder contain data for some pages such as the list of tasks, domains, comments for "index" or recent activity for "profile" page.
      3. common folder contains some data such as site.json which is the general setting & variables.
        We use script-mapping.json inside our custom Mustache classes to map a script name to a file name.
        This way a file name can be modified and the changes will be reflected on all pages using that script or style, in future updates.
      All page data is loaded in the mustache helper class and accessed inside templates like this:

      {{#layout.topbar_tasks.latest}} ... {{/layout.topbar_tasks.latest}}
      {{#page.comments}} ... {{/page.comments}}
      {{#site.title}} ... {{/site.title}}
      etc ...

  • mustache/js folder which consists of a few classes to generate the HTML output as well as the Mustache compilers.
    You can use the node index.js command to generate output inside the output_folder.
  • mustache/php folder which consists of a few PHP classes to generate the HTML output as well as the Mustache compilers.
    View the PHP version by pointing your browser to this address: http://server_address/path_to_ace/mustache/php/


Note Refer to mustache/app/views/layouts/default.mustache file as a starting point to figure out the general structure of HTML elements and sections.
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:

<ul class="nav ace-nav">
  <li class="purple">
	...
  </li>
  <li>
	...
  </li>
</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:

<div class="inline position-relative">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
  <ul class="dropdown-menu">
  </ul>
</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
<i class="icon-twitter blue bigger-150"></i>
<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
<div class="clearfix">
  <a href="#" class="pull-left btn btn-small width-45">Button 1</a>
  <a href="#" class="pull-right btn btn-small width-45">Button 2</a>
</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.
<div class="space-16"></div>
...
<div class="span6"></div>
 <div class="vspace-16"></div> <!-- space visible on smaller devices -->
<div class="span6"></div>

Similar classes are defined for horizontal lines:

.hr-2 .hr-4 ... .hr-30 .hr-32
<div class="hr-10"></div>
<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.

<div class="tab-content overflow-visible">
  <!-- Tab Content Here -->
</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:
<h3 class="header blue lighter smaller">
  Header Text
</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

<ul class="nav nav-tabs tab-space-2">
</ul>

<ul class="nav nav-tabs tab-color-blue">
</ul>

<ul class="nav nav-tabs tab-size-bigger">
</ul>

For accordions you can use .accordion-style2 for alternative style:
<div class="accordion accordion-style2">
  ...
</div>

Progress bars come with some extra colors and sizes:

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

Buttons come with some extra classes:

.btn-purple .btn-pink .btn-yellow .btn-grey .btn-light
.no-hover .no-border
.btn-app
<a href="#" class="btn btn-small btn-purple">
  Print
  <i class="icon-print icon-on-right bigger-110"></i>
</a>

<a href="#" class="btn btn-app btn-small btn-primary">
  <i class="icon-edit bigger-175"></i>
  <span class="bigger-110">Edit</span>
</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
<span href="#" class="label label-large label-primary arrowed-in arrowed-right">
  Label Text
</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
<a href="#" title="error message" class="my-tooltip-link tooltip-error">
 Show Tooltip
</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.
//This won't work with '.tooltip-error', etc
$('.my-tooltip-link').tooltip({ container:'body' , placement:'top' });

//Don't specify the 'container' so that tooltip gets inserted after our element
$('.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
<span class="ui-slider-green"></span>

Dashboard Elements

Info and Stats

<div class="infobox infobox-green">
	<div class="infobox-icon"><i class="icon-comments"></i></div>
	<div class="infobox-data">
		<span class="infobox-data-number">32</span>
		<span class="infobox-content">comments + 2 reviews</span>
	</div>
	<div class="stat stat-success">8%</div>
</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

<div class="widget-box">

 <div class="widget-header">
   <h5>Default Widget Box</h5>
   <div class="widget-toolbar">
	  <a data-action="settings" href="#"><i class="icon-cog"></i></a>
	  <a data-action="reload" href="#"><i class="icon-refresh"></i></a>
	  <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
	  <a data-action="close" href="#"><i class="icon-remove"></i></a>
   </div>
 </div><!--/.widget-header -->

 <div class="widget-body">
  <div class="widget-main">
  </div>
 </div><!--/.widget-body -->

</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:


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

Gallery

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

<ul class="ace-thumbnails">

<li>
 <a href="image-1.jpg" title="title" data-rel="gallery1">
    <img alt="150" src="thumb-1.jpg" />
 </a>
 <div class="tags">
    <span class="label label-info">breakfast</span>
 </div>
 <div class="tools">
    <a href="#"><i class="icon-link"></i></a>
    <a href="#"><i class="icon-remove"></i></a>
 </div>
</li>


<li>
 <a href="image-2.jpg" data-rel="gallery1">
   <img alt="150" src="{thumb-2.jpg">
   <div class="text">
	<div class="inner">Sample Caption on Hover</div>
   </div>
 </a>
</li>
.
.
.

</ul>

Pricing Tables

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

<div class="widget-box pricing-box">
</div>
<div class="span3">
 <div class="widget-box transparent">
    <div class="widget-header">
       <h5 class="bigger lighter">Package Name</h5>
    </div>
    <div class="widget-body">
      <div class="widget-main no-padding">
        <ul class="unstyled list-striped pricing-table-header">
           <li>Disk Space </li>
           .
           .
           .
        </ul>
      </div>
    </div>
 </div>
</div>


<div class="span2 pricing-span">
 <div class="widget-box pricing-box-small">
 </div>
</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:

<div class="span2 inbox-menu">

 <div class="center">
    <a href="#" class="btn btn-small btn-purple btn-new-mail">
       <i class="icon-envelope"></i>
       Write Mail
    </a>
 </div>

 <div class="space-6"></div>
 
 <div class="inbox-folders responsive">

  <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
      <i class="icon-inbox blue bigger-110"></i>
      <span class="bigger-110">Inbox</span>
      <span class="badge badge-primary counter">2</span>
  </a>
  
  <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
      <i class="icon-inbox blue bigger-110"></i>
      <span class="bigger-110">Sent</span>
      <span class="badge badge-primary counter">2</span>
  </a>

 </div>

</div>

<div class="span10">
 <!-- messages -->
</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.

<input type="checkbox" id="checkbox1" class="ace" />
<label class="lbl" for="checkbox1"> check me</label>

<label>
  <input type="checkbox" class="ace" />
  <span class="lbl"> check me</span>
</label>


<input type="radio" name="radio_field[]" value="1" class="ace" />
<label class="lbl" for="checkbox1"> radio option 1</label>

<input type="radio" name="radio_field[]" value="2" class="ace" />
<label class="lbl" for="checkbox1"> radio option 2</label>

<input type="radio" name="radio_field[]" value="3" class="ace" />
<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.
<input type="checkbox" id="switch1" class="ace ace-switch" />
<label class="lbl" for="switch1"></label>

<label>
  <input type="checkbox" class="ace ace-switch ace-switch-6" />
  <span class="lbl"> check me</span>
</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".
  • <input type="file" id="file-input-1" />
    <script>
    $('#file-input-1').ace_file_input({
       no_file:'No File ...',
       btn_choose:'Choose',
       btn_change:'Change'
    }).on('change', function(){
    	var files = $(this).data('ace_input_files');
    	//or
    	//var files = $(this).ace_file_input('files');
    
    	var method = $(this).data('ace_input_method');
    	//method will be either 'drop' or 'select'
    	//or
    	//var method = $(this).ace_file_input('method');
    };
    </script>
    
      //after creating the ace input, you can use the following methods:
      $('#file-input-1').ace_file_input('disable');
      $('#file-input-1').ace_file_input('enable');
      $('#file-input-1').ace_file_input('reset_input');
      //etc
    
    Note Check examples/file-upload.html for a working example.
    <input type="file" multiple />
    <script>
    $('input[type=file][multiple]').ace_file_input({
       style:'well',
       btn_choose:'Drop images here or click to choose',
       btn_change:null,/* we don't need it */
       no_icon:'icon-cloud-upload',
       droppable:true,
       thumbnail:'large',
       before_change:function(files, dropped) {
         var file = files[0];
         if(typeof file == "string") {
         //file is just a file name here (in browsers that don't support FileReader API such as IE8)
           if(! (/\.(jpe?g|png|gif)$/i).test(file) ) {
            //not an image extension?
            //alert user
            return false;
           }
         }
         else {
           var type = $.trim(file.type);
           if(
              ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
              || 
              //for android's default browser!
              ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )
             )
             {
                //alert user
                return false;
             }
    
             if( file.size > 1024*100 ) {
                //is the file size larger than 100KB?
                //alert user
                return false;
             }
        }
    
        return true;
       },
    
       before_remove:function() {
         //if(upload_in_progress) return false;//don't allow resetting the file input while upload in progress
         return true;
       },
    
       preview_error : function(filename, error_code) {
         //name of the file that failed
         //error_code values
         //1 = 'FILE_LOAD_FAILED',
         //2 = 'IMAGE_LOAD_FAILED',//the loaded file is not an image
         //3 = 'THUMBNAIL_FAILED'//somehow creating the thumbnail failed.
         //notify user?!
       }
    
    });
    </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:

    var files = $('file input element').data('ace_input_files');
    // which is an Array or FileList containing the selected files.
    var method = $('file input element').data('ace_input_method');
    // which is either "drop" or "select" depending on how the user selected files.
    
    //OR
    
    var files = $('file input element').ace_file_input('files');
    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

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


    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:
    $('#avatar').editable({
        type: 'image',
        name: 'avatar',
        value: null,
        image: {
            //specify ace file input options here
            before_change: function(files, dropped) {
             //this will override the one already defined which only accepts images.
            },
            //no_icon:'icon-picture',
            //no_icon:'icon-picture',
    
            //some additional parameteres
            name : 'avatar',//put the field name here as well
            max_size: 102400,//in byes
            on_error: function(error_code) {
                if(error_code == 1) {
                    //file format error
                }
                else if(error_code == 2) {
                    //file size error
                } else {
                    //other error
                }			
            },
            on_success: function() {
               //a valid image selected
            }
    
        },
        url: function(params) {
           //user clicked "OK" and we are ready to upload
           //Please see the example file here: examples/profile-avatar-update.js
        }
    
    });
    


    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:

    <div id="editor-1"></div>
    
    $('#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:
    $('#editor-1').ace_wysiwyg(
     {
      toolbar:
       [
        'bold',
        {name:'italic', title:'Custom Title!', className:'btn-info'},//customize
        'strikethrough',
        'underline',
        null,//null value creates some spacing between buttons (grouping)
        'foreColor',
        null,
        'insertImage',
        null,
        {name:'createLink', placeholder:'Add a link', button_text:'Custom Button Text'}
       ]
       ,
       speech_button : false//don't show the speech input button on Chrome
       //,
       //wysiwyg:{}//Specify the options to be passed to the plugin. Refer to plugin docs to see what parameteres it takes.
       //,
       //toolbar_place : function(toolbar) {}//see below
     }
    )
    .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:

    toolbar_place: function(toolbar) {
        return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
    }
    
    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:

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


    FuelUX Spinner

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


    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"
    <div data-target="#step-container" id="fuelux-wizard" class="row-fluid hidden">
      <ul class="wizard-steps">
        <li data-target="#step1" class="active">
          <span class="step">1</span>
          <span class="title">Step # 1</span>
        </li>
        <li data-target="#step2">
          <span class="step">2</span>
          <span class="title">Step # 2</span>
        </li>
        .
        .
        .
      </ul>
    </div><!--/.row-fluid-->
    
    <div id="step-container" class="step-content row-fluid position-relative">
      <div class="step-pane active" id="step1">
        <form id="form-1">
        </form>
      </div><!--#step1-->
      
      <div class="step-pane active" id="step2">
      </div><!--#step2-->
        .
        .
        .
    </div><!--/.step-content-->
    
    <div class="row-fluid wizard-actions">
      <button class="btn btn-prev">
        <i class="icon-arrow-left"></i>
    	Prev
      </button>
      <button class="btn btn-success btn-next" data-last="Finish ">
        Next
        <i class="icon-arrow-right icon-on-right"></i>
      </button>
    </div><!--/.wizard-actions-->
    
    $('#fuelux-wizard').ace_wizard().on('change', function(e, info){
    	if(info.step == 1 && !$('#form-1').valid()) return false;
    }).on('finished', function(){
    	alert('Success!');
    }).on('stepclick', function(){
    	//return false;//if you don't want users click on backward steps
    });
    


    FuelUX Treeview

    FuelUX tree is used with a little extra wrapping and some extra options for easier use and customiztion.
    <div id="tree1" class="tree"></div>
    
    $('#tree1').ace_tree({
       dataSource: treeDataSource ,
       multiSelect:true,
       loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
       'open-icon' : 'icon-minus',
       'close-icon' : 'icon-plus',
       'selectable' : true,//or false
       'selected-icon' : 'icon-ok',
       'unselected-icon' : 'icon-remove'
    });
    
    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.

Settings

Cookies & localStorage

Cookie and localStorage functionality has been added to save/load variables and settings.
The functions are defined in ace-extra.js
//cookie functions
ace.cookie.set(name, value, expires, path, domain, secure);
ace.cookie.get(name);
ace.cookie.remove(name, path);

//localStorage functions
ace.storage.set(key, value);
ace.storage.get(key);
ace.storage.remove(key);
ace.data_storage is a wrapper which by default chooses localStorage if available. Otherwise it will use cookies for saving data.
But you can change that by specifying an arguement.
Inside ace-extra.js, ace.data is initiated and used to save and retrieve settings.
ace.data = new ace.data_storage(2);//use cookies
ace.data = new ace.data_storage(1);//or use localStorage
ace.data = new ace.data_storage();//or use localStorage if available otherwise use cookies

ace.data.set(namespace, key, value);
//for example
ace.data.set('settings', 'sidebar-collapsed', 1);
ace.data.get('settings', 'sidebar-collapsed');

//without namespace
ace.data.set('username', 'alex');
ace.data.get('username');

//remove
ace.data.remove('settings', 'sidebar-collapsed');
ace.data.remove('username');

Currently 4 settings are saved:

  1. #navbar fixed status
  2. #sidebar fixed status
  3. #sidebar collapsed status
  4. #breadcrumbs fixed status
The script to restore user saved settings is placed immediately after the relevant element's HTML code.
This will cause the element's status be restored as soon as it is inserted into DOM.
If you call the functions after the page is loaded, for example in jQuery's document ready event, there may be a delay between the initial state and the saved state.
It may not be noticeable for fixed navbar, etc, but for collapsed sidebar or other settings, it can be noticeable.
Currently it's done like this:
<div class="navbar" id="navbar">
 <script type="text/javascript">
    try{ace.settings.check('navbar' , 'fixed')}catch(e){}
 </script>
 ...
</div>
The code is put inside try/catch block, so that there are no problems in case you don't want to include and use ace-extra.js.
<div class="sidebar" id="sidebar">
  <script type="text/javascript">
    try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
  </script>
  
  ...
  //sidenav items here

  <div class="sidebar-collapse" id="sidebar-collapse">
    <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
  </div>

  <script type="text/javascript">
    try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
  </script>
</div>
Please note that the #sidebar-collapse icon, has two attributes data-icon1 and data-icon2, which determine the button's icon in expanded/collapsed state.
<div class="breadcrumbs" id="breadcrumbs">
  <script type="text/javascript">
    try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
  </script>
  ...
</div>

Hard coding settings inside HTML

In your application you can set some settings in a static way:

  • For fixed navbar:
    Add .navbar-fixed-top class to #navbar (.navbar) element.
    Add .navbar-fixed class to bodyelement.
  • For fixed sidebar:
    Add .sidebar-fixed class to #sidebar.
  • For collapsed sidebar:
    Add .menu-min class to #sidebar.
  • For fixed breadcrumbs:
    Add .breadcrumbs-fixed class to #breadcrumbs element.
    Add .breadcrumbs-fixed class to bodyelement.
  • For skins:
    Add .skin-1 .skin-2 .skin-3 class to body element.

You may notice when you choose a skin, the top user menu buttons (.ace-nav > li) change their color.
This is not dependent on the skin. The color class of the buttons is changed via Javascript.

Note You can also use server side solutions to save/load user settings across browsers and devices using sessions and databases.


RTL

RTL support is for Right to Left Languages such as Hebrew, Arabic and Persian.

If you don't need it, you can comment the "rtl.less" line in "ace.less" and compile to generate CSS without RTL for a smaller file size.

Clicking the setting button makes the changes dynamically.

Note To see what changes should be made for RTL support, please see the switch_direction function inside assets/js/uncompressed/ace.js

But to hardcode in your application, in order to use RTL feature you should add the .rtl class to your body tag element:

<body class="rtl">
Inside your HTML code you should also make the following changes:
  • For every .dropdown-menu toggle the .pull-right class.
    That is, use the .pull-right whenever you don't in LTR mode and remove .pull-right when you normally use it in LTR mode.
  • Use .pull-right whenever you used .pull-left for an LTR document, except for the following:
    • .dropdown-menu blockquote .dropdown-submenu .profile-skills .pull-right
  • Use .pull-left instead of pull-right elements
  • When drawing charts using flot charts library you may need to choose a different "position" parameter for better display.
  • Add .chosen-rtl to select elements when using Chosen plugin
  • For FullCalendar plugin set the isRTL option to true
  • For jqGrid plugin set the direction option to rtl
  • You may swap the following classes in your code:
    .align-left .align-right
    .arrowed .arrowed-right
    .arrowed-in .arrowed-in-right
    .messagebar-item-left .messagebar-item-right for inbox page.
  • Use .pull-right for the first [class*="span"] block inside .control-group .controls
    Example:
    <div class="control-group">
      <div class="controls">
        <span class="span6 input-icon pull-right">
            <input type="text" class="span12">
            <i class="icon-warning-sign"></i>
        </span>
        <span class="help-inline"> message </span>
      </div>
    </div>
    
I've included a few examples in the examples folder.
I will also add more in the future.
Please let me know if you think other examples could be useful.
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