... other elements and content here ...
.input-lg
class
.input-sm
or .input-lg
class for text input element
.label-white
class
container
option to add content sliders inside another element (for example inside a modal box)
.toolbox-vertical
class for vertical toolbox inside a widget box
loadAddr
and some other options such as loading_overlay
data-*
attributes.
assets/js/dataTables
folder
assets/fonts
directory
.btn-lg
is now a bit smaller and .btn-xlg
is a slightly larger version
.btn-xs
is now a bit larger and .btn-mini
is a slightly smaller version
loading_icon
now defaults to fa fa-spin fa-spinner fa-2x orange
.
data-auto-hide="true"
option for sidebar allows automatic hiding of sidebar in mobile view when users clicks/taps outside of sidebar areaassets/js/jquery.mobile.custom.js
to enable it.
npm install
and install required node.js packages first if you want to use it.
mustache/js
and build
folders are removed
and you should run npm install
command to install them or npm update
to update.
assets
folder are not compressed (non-minified) now
and minified files are inside dist
folder
data-target="#sidebar_id"
attribute
.main-content-inner
is now necessary and should be inserted immediately
inside .main-content
as the first and only direct child:
... other elements and content here ...
.page-content-area
element will have ajax enabled if it has
data-ajax-content="true"
attribute.
.ace-main-stylesheet
class to your main stylesheet which
is "ace.css" in demo pages.
ace.settings.sidebar_fixed
ace.settings.sidebar_collapsed
ace.settings.navbar_fixed
ace.settings.sidebar_fixed(null, true|false, true|false);//first element is null or reference to sidebar element //or ace.settings.sidebar_fixed(document.getElementById('sidebar'), true|false, true|false);
assets/js/date-time/moment.js
A
tags) are not used in menu items any more.
lang
is deprecated now and
you should use locale
instead.
respond.src.js
has been renamed to respond.js
jquery.colorbox-min.js
has been renamed to jquery.colorbox.min.js
ignore
option to perform validation for a hidden element.
.hover
submenus and .compact
sidebar is now available only on larger devices.
bs_typeahead
ace.sidebar_scroll(jQuery, { { 'scroll_to_active': true, 'include_shortcuts': true, 'include_toggle': false, 'smooth_scroll': 200, 'outside': false } });
data-iconlibrary="fa"
attribute.
nativeUI
option for custom editable addons.
More info
.dropdown-content
&
.dropdown-footer
which allows addings scrollbars to .dropdown-content
.
data-position='auto'
to dropdown elements
so they become a dropup when appropriate.
More info
.ace-icon
(changeable) & .menu-icon
classes which help with switching between different font icon libraries.
More info
.ace-icon
class name to (almost) all icons
but you can rename or remove it.
.menu-icon
class name.
More info
.responsive
class name now.
.navbar
but you can still use old style toggle button:
.menu-text
element inside it has been renamed to .toggler-text
.no-skin
class name to body element now.
label
and .lbl
elements had vertical-align:middle
CSS rule which is removed now.
.middle
class to those elements that are out of place now.
.sidebar-collapse
element is now .sidebar-toggle .sidebar-collapse
.
.sidebar-toggle .sidebar-expand
for 2nd mobile menu style.
.page-content
element's opening tag.
.main-container-inner
element any more.
.icon-plus
and .icon-minus
which have been renamed to .tree-plus
and .tree-minus
.widget-title
class and also widget color options
are now applied to the box, not header.
.widget-header.header-color-blue
becomes
.widget-box.widget-color-blue
data-target
attribute.
<!--[if lte IE 9> <link rel="stylesheet" href="path/to/assets/ace-ie.min.css" /> <![endif]-->
ace-part2.css
using the provided instructions.
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)
jquery-ui.min.js
jquery-ui.custom.min.js
jquery-ui.min.css
jquery-ui.custom.min.css
.vspace-xs-16
has been changed to .vspace-16-xs
.
sidenav_navList
sidebar_items
topbar*
navbar*
sidenav*
sidebar*
.dropdown-menu-right
instead of .pull-right
.
This includes navbar's user info dropdowns.
rel
parameter to work properly, for example rel: 'colorbox'
.
More info
easypiechart.js
.
It was easy-pie-chart.js
.
jquery.easy-pie-chart-older.js
and the problem does not exist.
nextIcon
and prevIcon
options for daterangepicker pluginfunction.bind
for IE in html5shiv (used by easypiechart).row
instead of .row-fluid
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
instead of
.span*
.row-fluid
elements
without .span*
children.
.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.
.btn-xs
.btn-sm
.btn-lg
instead of
.btn-mini
.btn-small
.btn-large
.well-sm
.well-lg
instead of
.well-small
.well-large
.input-group
instead of
.input-append
and .input-prepend
.modal-dialog
.modal-content
classes
and the .modal
doesn't need .hide
class.
$('#myModal').on('shown' , ...)
we now have $('#myModal').on('shown.bs.modal' , ...)
<span class="divider"><i class="arrow-icon"></i></span>
as breadcrumbs divider.
.img-responsive
class.
.dropdown-header
instead of .nav-header
.
This applies to user dropdown menus inside navbar.
box-sizing:border-box
on all HTML elements.
box-sizing:contet-box
you may now want to recalculate those values.
assets/css/less/bs3-reset.less
mustache/app/views/layouts/partials/_shared/navbar.mustache
mustache/app/views/layouts/default.mustache
data-icon-show
data-icon-hide
attributes inside .accordion-toggle
elements
to specify icons used when toggling panels.
.form-horizontal
.
<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>
.hide
class
.label-holder
.dropdown-only-icon
instead of
.dropdown-icon-only
.vspace-*-xs
.vspace-*-sm
.vspace-*-md
.vspace-*-lg
instead of .vspace-*
for spacing that is visible only on specific sizes.
.ace
class name to checkbox and radio buttons to style them.
.lbl
element after them to be displayed correctly.
.lbl
after them.
.ace
class
to checkboxes and inserting an .lbl
element after them.
.sidebar-fixed
class to .sidebar
element
and to fix breadcrumbs you should add .breadcrumbs-fixed
class to .breadcrumbs
element.
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.
#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)
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
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>
#menu-toggler
element.
.toggler-text
class name to its SPAN
child:
<a href="#" class="menu-toggler" id="menu-toggler"> <span class="toggler-text"></span> </li>
.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>
.home-icon
to the first breadcrumbs icon (the one indicating homepage).
.ace-icon
class to be used on all icons except for those that don't any special styling.
.menu-icon
should be used for sidebar icons.
.ace-icon
by modifying
@icon
variable inside assets/css/less/variables.less
and re-compiling LESS files.
assets/js/ace.js
dist/js/ace.min.js
assets/js/ace/ace.js
,
and
assets/js/ace-extra.js
,
dist/js/ace-extra.min.js
ace.vars['icon']
and ace.vars['.icon']
to new values.
build/icon.js
and use it with Node.js like this:
node icon.js --path=".../html/myfile.html"
or
node icon.js --path=".../mydir/"
node icon.js --path="path/to/file-or-folder"
node icon.js --path="path/to/file-or-folder" --ext="html|php|js"
.ace-icon
you should modify
var ace_icon
variable inside the script.