Changes and Updates


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

Ace v1.2.0 to v1.3.0 (current version)

1. New Features / Improvements / Fixes

  • Custom scrollbar plugin
  • Automatic scrollbars for fixed sidebar
  • Horizontal Menu
  • 3 Different mobile menu styles. More info
  • New mobile navbar user buttons style. More info
  • New submenu style displayed on mouse hover. More info
  • Compact sidebar style
  • Alternative active menu item style. More info
  • LESS skin files
  • In-browser CSS & JS file builder to make your own minimal files
  • Enhanced widget box functions and events. More info
  • On-page help which lets you pick any element and see how it works
  • nativeUI option for custom editable addons. More info
  • Date addon for inline editable plugin. More info
  • Added Bootstrap datetime picker plugin. More info
  • Tabbed user dropdowns inside navbar. More info
  • New classes for navbar user dropdowns: .dropdown-content & .dropdown-footer which allows addings scrollbars to .dropdown-content.
    More info
  • New white button styles. More info
  • ASP.net friendly checkboxes and radio buttons.
    You need to build your own custom CSS via the builder and choose More info
  • Add data attribute data-position='auto' to dropdown elements so they become a dropup when appropriate. More info
  • New .ace-icon(changeable) & .menu-icon classes which help with switching between different font icon libraries. More info
  • File input whitelist & blacklist options and other fixes & enchancements. More info
  • Custom color picker enhancements. More info
  • Light and blurred background for login page.
    More info
  • Some browser fixes. Now compatible with almost all desktop and mobile browsers.

2. Changes to Ace

  • You should now add .ace-icon class name to (almost) all icons but you can rename or remove it.
    For more info and the reason for this, see Updating Fontawesome section.
  • Sidebar icons now have a .menu-icon class name. More info
  • Default mobile view sidebar should have .responsive class name now.
    More info
  • Default mobile menu toggle button has been moved to .navbar but you can still use old style toggle button:

    If you want to use old style toggle button, note that the .menu-text element inside it has been renamed to .toggler-text
    For more info plese see Toggle Buttons section or use the on-page help of demo files.
  • Navbar has a few markup changes. Please see Navbar section.
  • For default skin, you should add .no-skin class name to body element now.
    For more info see Skins section.
  • label and .lbl elements had vertical-align:middle CSS rule which is removed now.
    You should add .middle class to those elements that are out of place now.
  • .sidebar-collapse element is now .sidebar-toggle .sidebar-collapse.
    This is because, there is now .sidebar-toggle .sidebar-expand for 2nd mobile menu style.
    More info
  • If you are using settings box it should now be put right after .page-content element's opening tag.
    It also has a slightly different HTML markup. More info
  • No need for .main-container-inner element any more.
    More info
  • Treeview element had two special icons .icon-plus and .icon-minus which have been renamed to .tree-plus and .tree-minus
    More info
  • Widget box title should now have .widget-title class and also widget color options are now applied to the box, not header.
    For example .widget-header.header-color-blue becomes .widget-box.widget-color-blue
    More info
  • Login page links such as "forgot password", etc should now have a data-target attribute.
    More info
  • ace-ie.css or ace-ie.min.css was included only for IE 8 and below. Now it should be included for IE 9 as well, thus:
    <!--[if lte IE 9>
    <link rel="stylesheet" href="path/to/assets/ace-ie.min.css" />
    <![endif]-->
    
  • When building CSS files using the in-browser builder tool, you may be notified that output CSS file is large for IE9 and below.
    In that case, make sure to include the extra CSS file ace-part2.css using the provided instructions.
  • Version number has been removed from jQuery file name for easier updates. Therefore:
    jquery.2.1.9.min.js becomes jquery.min.js
    jquery-1.x.min.js becomes jquery1x.min.js (which is used for IE9 and below)
    Same applies to jQuery UI:
    jquery-ui.min.js
    jquery-ui.custom.min.js
    jquery-ui.min.css
    jquery-ui.custom.min.css
  • If you have used custom mobile view spacing element that add some space only in specific device widths, the naming has changed a bit.
    For example .vspace-xs-16 has been changed to .vspace-16-xs.
    This helps reduce number of CSS selectors.
  • If you've used Mustache templates, some files and data have been renamed:
    1. sidenav_navList sidebar_items
    2. topbar* navbar*
    3. sidenav* sidebar*

3. Changes to Bootstrap

  • The included Bootstrap CSS file has been modified and is slightly different from original Bootstrap files.
    You can still use original Bootstrap files but you should re-compile Ace LESS files with new variables.
    See CSS/LESS files for more info on this.
  • There is not much to about Bootstrap when updating from v3.0 to v3.1
    You can read more about it here:
    http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/ or https://github.com/twbs/bootstrap/issues/11734
  • With dropdown menus, use .dropdown-menu-right instead of .pull-right. This includes navbar's user info dropdowns.

4. Third Party Changes

  • If you are using Colorbox(slideshow) plugin, the latest version requires rel parameter to work properly, for example rel: 'colorbox'. More info
  • Latest inline editable plugin doesn't come with datepicker option.
    I added a custom addon for it. More info
  • Easy pie chart plugin's file has been renamed to easypiechart.js. It was easy-pie-chart.js.
    Also Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
    https://github.com/rendro/easy-pie-chart/issues/81
    You can use an older version of the plugin jquery.easy-pie-chart-older.js and the problem does not exist.
  • I have also changed/customized a few things with some plugins including:
    1. nextIcon and prevIcon options for daterangepicker plugin
    2. Added function.bind for IE in html5shiv (used by easypiechart)
    3. Added bootboxes to markdown editor
    4. And modified/customized a few things with FuelUX plugins

Ace v1.1.3 to v1.2.0

1. Updating to Bootstrap 3

  • The major change is upgrading your application to Bootstrap 3.
    So you may want to take a look at the following guide for migrating to BS3:
    http://bootply.com/bootstrap-3-migration-guide
    or Bootstrap's documentation:
    http://getbootstrap.com/getting-started
  • Here are a few quick tips:
    • Use .row instead of .row-fluid
    • Use .col-xs-* .col-sm-* .col-md-* .col-lg-* instead of .span*
      With Bootstrap 2.x it was alright to randomly have .row-fluid elements without .span* children.
      But with Bootstrap 3, you should remove those unused .row (previously .row-fluid) elements that don't need/contain .col-*-* (previously .span*) inside them and use .clearfix class if it has floating children or use no class at all.
    • Use .btn-xs .btn-sm .btn-lg instead of .btn-mini .btn-small .btn-large
    • Use .well-sm .well-lg instead of .well-small .well-large
    • Use .input-group instead of .input-append and .input-prepend
    • Update Bootstrap's modal dialog HTML code:
      Now it needs .modal-dialog .modal-content classes and the .modal doesn't need .hide class.
    • Bootstrap event names have been namespaced, so for example instead of $('#myModal').on('shown' , ...) we now have $('#myModal').on('shown.bs.modal' , ...)
    • No need for bootstrap-responsive.css or ace-responsive.css now.
      They have been integrated with main CSS files.
    • No need for <span class="divider"><i class="arrow-icon"></i></span> as breadcrumbs divider.
    • Images were responsive by default, i.e. they were limited to their container's size. Now you should use .img-responsive class.
    • Use .dropdown-header instead of .nav-header. This applies to user dropdown menus inside navbar.
    • Default typeahead plugin in Bootstrap 2 has been remove in BS3.
      I've included that in Ace's Javascript file.
      It is used in search box and also Tag Input plugin.
      If you don't need it, you can build a custom Javascript without it.
    • Bootstrap 3 is now setting the CSS rule box-sizing:border-box on all HTML elements.
      It means that if you had custom elements with specific dimensions, paddings and borders that relied on default browser value of box-sizing:contet-box you may now want to recalculate those values.
      Also many third party plugins rely on the default browser value content-box.
      Some of them are reset in assets/css/less/bs3-reset.less
      See this for more info: http://getbootstrap.com/getting-started/#third-box-sizing

2. Changes to Ace

  • Navbar structure and classes are now slightly different. Please see: mustache/app/views/layouts/partials/_shared/navbar.mustache
  • Document structure and classes are now slightly different. Please see mustache/app/views/layouts/default.mustache
  • Use data-icon-show data-icon-hide attributes inside .accordion-toggle elements to specify icons used when toggling panels.
    More info
  • Some changes should be made to form elements inside .form-horizontal.
    An example could be like this:
    <div class="form-group">
      <label for="id-username" class="col-sm-3 control-label no-padding-right">
        Text Field
      </label>
      <div class="col-sm-9">
        <input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="id-username">
      </div>
    </div>
    
  • The wizard steps container doesn't need .hide class
  • Gallery tags should be wrapped inside .label-holder
  • Use .dropdown-only-icon instead of .dropdown-icon-only
  • Use .vspace-*-xs .vspace-*-sm .vspace-*-md .vspace-*-lg instead of .vspace-* for spacing that is visible only on specific sizes.
  • RTL styles has now been separated into ace-rtl.css file.
    You can add or remove it as needed.

Ace v1.1.2 to v1.1.3

Changes to Ace

  • You should now add .ace class name to checkbox and radio buttons to style them.
    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 automatically or differently and wasn't easy to put .lbl 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.
  • To have sidebar fixed by default 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 dynamically enable/save/retrieve some user settings using Javascript, such as fixing navbar/sidebar/breadcrumbs and sidebar collapse/expand.
  • 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 (i.e. the checkbox element inside settings box that fixes/unfixes navbar)

Third Party Changes

  • 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.

Ace v1.1.2

Changes to Ace

  • CSS "ID"s have been replaced with classes.

    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 class="toggler-text"></span>
    </a>
    				
    Basically 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 was SPAN element, should now have .menu-text class:
    <li>
      <a href="index.html">
        <i class="ace-icon fa fa-tachometer"></i>
        <span class="menu-text">Dashboard</span>
      </a>
    </li>
  • Similar things applies to #menu-toggler element.
    You should add .toggler-text class name to its SPAN child:
    <a href="#" class="menu-toggler" id="menu-toggler">
       <span class="toggler-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="ace-icon fa fa-envelope bigger-200"></i>
       Email
    </li>
  • Add .home-icon to the first breadcrumbs icon (the one indicating homepage).

FontAwesome & Icons

Updating Fontawesome 3.x to 4.x

  • Because there are multiple Font icon libraries which you can use and each one has a different naming convention, I added a custom icon class name to be used with all fonts without the need to change CSS or JS code.
    I have added .ace-icon class to be used on all icons except for those that don't any special styling.
    Also .menu-icon should be used for sidebar icons.
  • You can choose a different name other than .ace-icon by modifying @icon variable inside assets/css/less/variables.less and re-compiling LESS files.
    Also inside:
    assets/js/ace.min.js
    or assets/js/uncompressed/ace.js
    or assets/js/ace/ace.js,
    and
    assets/js/ace-extra.min.js,
    or assets/js/uncompressed/ace-extra.js
    you should change ace.vars['icon'] and ace.vars['.icon'] to new values.
  • I have included a Javascript file which helps you to update all your files to use new icon names.
    You can find it here build/icon.js and use it with Node.js like this: node icon.js --path=".../html/myfile.html" or node icon.js --path=".../mydir/"
    Options include:
    1. path: Path to the folder or file you want to update.
    2. ext: if specified only this extensions will be updated.
    Example:
    node icon.js --path="path/to/file-or-folder"
    node icon.js --path="path/to/file-or-folder" --ext="html|php|js"
  • If you want to use the icon.js script to update icon names, make sure you have a copy of your files first.
    Also if you want to use another name other than .ace-icon you should modify var ace_icon variable inside the script.