Ace Admin Docs
🔍
‹ ›

Migration

Ace v3.0 -> Ace v3.1

  • Ace v3.1 is not different from Ace v3.0. It's just an improved version with extra example pages.
  • The old Ace layout and default dashboard is brought back. See layouts
  • Other changes can be seen in Changelog

You can still use the default layout and dashboard of Ace v3.0 without any modifications which is now Dashboard 2

Ace v2.x -> Ace v3

  • Ace v3 is not much different from Ace v2 in terms of general struture
  • There is a new default dashboard and layout in which sidebar starts from top of document and navbar is inside content area. See layouts
  • The older default layout of Ace v2 is used in Dashboard 3 and Dashboard 4 pages. See dashboard 3 layout
  • Other changes can be seen in Changelog

In Ace v3, both background and text colors are now darker (for more contrast).
So if some of your elements look darker after upgrading to v3 and you don't want that, you can use a lighter version of the used colors.
For example if you had an element with bgc-blue-m1 and it now looks dark, you can change it to bgc-blue-m2, etc.

.btn-warning has dark text color now. For a similar button with white text, you can use .btn-orange

Ace v1.x -> Ace v2

Ace v2 is based on Bootstrap 4, while Ace v1.4 was based on Bootstrap 3 and therefore there are major changes in Ace as well.

For BS3 to BS4 migration guide please see Migrating to v4

Basic layout

The naming convention and layout is very similar to the previous version of Ace. There are some small differences:

  • navbar has now a navbar-inner child. See Navbar

  • sidebar has now a sidebar-inner child. See Sidebar

  • main-content-inner has been removed

  • footer should be inside .main-content (i.e. after .page-content)

  • body doesn't need a no-skin, skin-1, etc class. Instead you should specify theme classes for sidebar and navbar:

html 
<body>
  ...
  <div class="navbar navbar-purple">
    ...
  </div>
</body>

CSS changes

  • For an overview of required CSS files, see CSS files
  • SASS is now used instead of LESS
  • Many CSS classes have been dropped such as item-list , itemdiv , profile-user-info etc.
    Instead I use basic CSS classes to change an element's properties.
    At first this may seem a little verbose and long but it allows for quick changes and more flexibility, without needing to memorize a lot of different class names.
    So this old version:
html 
<div class="conversation-item">
  <div class="user">
    <img ...>
    <div class="name">alex</div>
  </div>

  <div class="body">message</div>

  <div class="time">9:12 am</div>
</div>

is rewritten with something like this:

html 
<div class="d-flex align-items-center border-1 radius-1 brc-grey-l2">
  <div class="mr-1">
    <img src="" class="border-2 brc-blue radius-round" />
    <div class="text-blue">alex</div>
  </div>

  <div class="text-grey-d2 mx-1">message</div>

  <div class="text-grey-m2 align-self-start">9:12 am</div>
</div>

JS changes

  • For an overview of required JS files see JS files
  • There are no ace-elements.js or ace-extra.js files anymore
  • The naming convention has been changed to camelCase. For example ace_file_input has been renamed to aceFileInput. Property names are also camelCase now
  • Some property names have changed. For example the no_file and no_icon properties in Custom file input have been renamed to placeholderText and placeholderIcon
Changelog Overview
↑