<section>
  <h1 class="blue" data-id="#changes"><i class="ace-icon fa fa-magic grey"></i> Changes and Updates</h1>
  <hr />

  <div class="alert alert-danger">
	<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
	<i class="ace-icon fa fa-exclamation-triangle"></i>
	Make sure you have a copy of your application files before making changes.
  </div>
  
  
  
  
  <div class="hr hr-double hr32"></div>
  <h2 class="blue lighter help-title" data-id="#changes.v7">
	Ace v1.3.1 to v1.3.2 (current version)
  </h2>
  <div class="space-4"></div>

  <div class="help-content">
	  <h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<a href="#custom/content-slider">Content sliders</a> based on Bootstrap modals
			</li>
			<li>
				Navbar dropdowns automatically become modal like on small devices
			</li>
			<li>
				Updated sidebar functions allow for <a href="#basics/sidebar.multiple">multiple sidebars</a>.
				<br />
				Make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> and apply the necessary changes
			</li>
			<li>
				Automatic scrollbars for sidebar submenus when needed
			</li>
			<li>
				Delay before hiding submenus in minimized mode or horizontal mode
			</li>
			<li>
				Automatic scrollbars for fullscreen widgets
			</li>
			<li>
				Horizontal menu now has minimized style as well
			</li>
			<li>
				Image preview for file input element
			</li>
			<li>
				New custom scroller option 'hideOnIdle'
			</li>
			
			<li>
				Ajax content loading can now be applied to any element
			</li>
			
			<li>New <code>data-auto-hide="true"</code> option for sidebar allows automatic hiding of sidebar in mobile view when users clicks/taps outside of sidebar area</li>
			
			<li>
				New <a href="#plugins/misc.rating">star rating</a> plugin
			</li>
			<li>
				New <a href="#plugins/input.duallist">dual listbox</a> plugin
			</li>
			<li>
				New <a href="#plugins/input.multiselect">bootstrap multiselect</a> plugin
			</li>
			<li>
				jQuery mousewheel plugin included but not enabled by default.
				<br />
				You can use <code>assets/js/jquery.mobile.custom.js</code> to enable it.
			</li>

			<li>
				Updated all scripts and plugins to their latest version
			</li>
			<li>
				Several fixes and improvements
			</li>
		</ul>
	</div>
	
	<h3 class="info-title smaller">2. Ace Changes</h3>
	<div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				Gruntfile.js build file added.
				<br />
				Note that you should run <code>npm install</code> and install required node.js packages first if you want to use it.
			</li>
			<li>
				Also node.js modules inside <code>mustache/js</code> and <code>build</code> folders are removed
				and you should run <code>npm install</code> command to install them or <code>npm update</code> to update.
			</li>
			
			
			<li>
				CSS and JS files inside <code>assets</code> folder are not compressed (non-minified) now
				and minified files are inside <code>dist</code> folder
			</li>
		
			<li>
				Ace functions used to be like <em>ace.handle_side_menu()</em>, etc ...
				<br />
				Now they are wrapped in jQuery functions and need to be initialized by calling the functions.
				<br />
				For more info make sure to see <a href="#basics/sidebar.functions">sidebar functions</a> section.
			</li>
			
			<li>
				Sidebar toggle buttons such as collapse/expand button or mobile view menu toggler should have
				<code>data-target="#sidebar_id"</code> attribute
			</li>
			
			<li>
				<code>.main-content-inner</code> is now necessary and should be inserted immediately
				inside <code>.main-content</code> as the first and only direct child:
<pre data-language="html">
<div class="main-content"><div class="main-content-inner">
  ... other elements and content here ...
</div></div>
</pre>
			</li>
			
			<li>
				Ajax content loading can now be applied to any element and has several changes and new functions.
				<br />
				By default <code>.page-content-area</code> element will have ajax enabled if it has
				<code>data-ajax-content="true"</code> attribute.
				<br />
				Also ajax events are triggered for the specific element, which also can still be captured on document level.
				<br />
				Please see <a href="#basics/ajax">ajax section</a> for more info.
			</li>
			
			<li>
				You should now add <code>.ace-main-stylesheet</code> class to your main stylesheet which 
				is "ace.css" in demo pages.
<pre data-language="html">
 <link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" />
 <!--[if lte IE 9]>
  <link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" />
 <![endif]-->
</pre>
			</li>
			
			<li>
				If you've been using functions such as:
				<br />
				<code>ace.settings.sidebar_fixed</code>
				<code>ace.settings.sidebar_collapsed</code>
				<code>ace.settings.navbar_fixed</code>
				<br />
				now there is an extra first argument which is either null
				or reference to element to be changed:
<pre data-language="javascript">
 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);
</pre>
			</li>

		</ul>
	</div>
	
	
	
	<h3 class="info-title smaller">3. Third Party Changes</h3>
	<div class="info-section">
		<ul class="list-unstyled info-list">
			<li>
				There are some changes for FuelUX plugin which has been updated from v2.x to v3.x.
				<br />
				Please see 
				<a href="#plugins/fuelux">FuelUX</a> for more info.
			</li>
			
			<li>
				<a href="#plugins/date-time.fullcalendar">Fullcalendar</a> plugin doesn't need jQuery UI for dragging and resizing now
				and moment.js is used for date processing and should be included.
				<br />
				It's available at:
				<code>assets/js/date-time/moment.js</code>
				<br />
				Also it seems in its latest update, only events with
				"yyyy-mm-dd" format can be resized (not sure though)
			</li>
			
			<li>
				jQuery UI has had several changes. For example anchors (<code>A</code> tags) are not used in menu items any more.
				<br />
				If you see your jQuery UI code is not working as expected, you should refer its documentation
				to resolve the issue as a result of recent changes.
			</li>
			
			<li>
				If you are using internationalization features of date/time plugins date depend on
				<b>moment.js</b> library, note that <code>lang</code> is deprecated now and
				you should use <code>locale</code> instead.
				<br />
				Please see momentjs docs for more info.
			</li>
			
			<li>
				<code>respond.src.js</code> has been renamed to <code>respond.js</code>
			</li>
			<li>
				<code>jquery.colorbox-min.js</code> has been renamed to <code>jquery.colorbox.min.js</code>
			</li>
			<li>
				jQuery form validation plugin doesn't validate hidden elements by default.
				<br />
				You should use <code>ignore</code> option to perform validation for a hidden element.
				<br />
				See <a href="#plugins/misc.jquery-validate">validation plugin</a> for more info.
			</li>
			
			<!--
			<li>
				Spin.js plugin (the imageless spinner) has now more options and you may
				need to specify <code>left</code> <code>top</code> options if you want to use it.
			</li>
			-->
			
			<li>
				<a href="#plugins/input.select2">Select2</a> has now an optional tag input styling as well.
			</li>
			
			<li>
				<a href="#plugins/input.chosen">Chosen</a> does not support touch devices.
			</li>
		</ul>
	</div>

  </div><!-- /.help-content -->
  
  
  
  <div class="hr hr-double hr32"></div>
  <h2 class="blue lighter help-title" data-id="#changes.v6">
	Ace v1.3.0 to v1.3.1
  </h2>
  <div class="space-4"></div>

  <div class="help-content">
	  <h3 class="info-title smaller">1. New Features / Improvements / Fixes / Updates</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				Added <a href="#basics/ajax">Ajax version</a>
			</li>
			<li>
				Added <a href="#pages/email">Email templates</a>
				and an <a href="../build/email.html">email tool</a> which converts normal Bootstrap syntax to email friendly table layout
			</li>
			<li>
				<a href="#custom/onpage-help">Onpage Help</a> feature is now available for use in your application to provide help and instructions to users.
			</li>
			<li>
				Option to remove sidebar (previously sidebar was almost mandatory)
			</li>
			<li>
				Improved and fixed <a href="../build/css.html">CSS builder</a>
			</li>
			<li>
				<code>.hover</code> submenus and <code>.compact</code> sidebar is now available only on larger devices.
			</li>
			<li>
				Added <a href="#plugins/bootstrap">typeahead.js</a> plugin
			</li>
			<li>
				Updated all scripts to their latest version
			</li>
			<li>
				Fixed several bugs and issues
			</li>
		</ul>
	</div>
	
	
	<h3 class="info-title smaller">2. Ace Changes</h3>
	<div class="info-section">
		<ul class="list-unstyled info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				In this version, <a href="#plugins/bootstrap.typeahead-js">typeahead.js</a>
				plugin has been included.
				<br />
				The older Bootstrap (v2.x) typeahead plugin is still included with the template
				as it's a lightweight alternative used by demo search box and tag input plugin.
				<br />
				However the latter (old plugin) has been renamed to <code>bs_typeahead</code>
				<br />
				For more info please see <a href="#plugins/bootstrap.typeahead">its section</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				In case you modified some of Ace's functions arguments, 
				please note that options used to be passed as separate paramaterers but now are passed
				as a JSON object:
<pre data-language="javascript">
 ace.sidebar_scroll(jQuery, {
   {
     'scroll_to_active': true,
     'include_shortcuts': true,
     'include_toggle': false,
     'smooth_scroll': 200,
     'outside': false
   }
 });
</pre>
			</li>
		</ul>
   </div>
	

	
	<h3 class="info-title smaller">3. Third Party Changes</h3>
	<div class="info-section">
		<ul class="list-unstyled info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				dataTables plugin has been updated to latest version 1.10.0 and there
				may be a few changes you need to make because of some API changes.
				<br />
				If your current tables are somehow messed up after script update, you may need
				to consult plugin's documentation for more info.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				Markdown editor now accepts more options and to use FontAwesome fonts
				you need to specify <code>data-iconlibrary="fa"</code> attribute.
			</li>
		</ul>
   </div>
	

  </div><!-- /.help-content -->
  
  
  
  
  
  <div class="hr hr-double hr32"></div>
  <h2 class="blue lighter help-title" data-id="#changes.v5">
	Ace v1.2.0 to v1.3.0
  </h2>
  <div class="space-4"></div>

  <div class="help-content">
	  <h3 class="info-title smaller">1. New Features / Improvements / Fixes</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				<a href="#custom/scrollbar" class="help-more">Custom scrollbar plugin</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Automatic scrollbars for fixed sidebar
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				<a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				3 Different mobile menu styles.
				<a href="#basics/sidebar.mobile" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				New mobile navbar user buttons style.
				<a href="#basics/navbar.mobile" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				New submenu style displayed on mouse hover.
				<a href="#basics/sidebar.hover" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				<a href="#basics/sidebar.compact" class="help-more">Compact sidebar style</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Alternative active menu item style.
				<a href="#basics/sidebar.highlight" class="help-more">More info</a>
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				<a href="#files/css.skins" class="help-more">LESS skin files</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				In-browser CSS & JS file builder to make your own minimal files
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Enhanced widget box functions and events.
				<a href="#custom/widget-box" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				On-page help which lets you pick any element and see how it works
			</li>
	
			<li>
				<i class="ace-icon fa fa-check"></i> 
				<code>nativeUI</code> option for custom editable addons.
				<a href="#custom/inline-editable" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Date addon for inline editable plugin.
				<a href="#custom/inline-editable.date" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Added Bootstrap datetime picker plugin.
				<a href="#plugins/date-time.datetimepicker" class="help-more">More info</a>
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				Tabbed user dropdowns inside navbar.
				<a href="#basics/navbar.tabbed" class="help-more">More info</a>
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				New classes for navbar user dropdowns:
				<code>.dropdown-content</code> &
				<code>.dropdown-footer</code>
				which allows addings scrollbars to <code>.dropdown-content</code>.
				<br />
				<a href="#basics/navbar.dropdown-content" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				New white button styles.
				<a href="#elements.button.white" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				ASP.net friendly checkboxes and radio buttons.
				<br />
				You need to build your own custom CSS via the builder and choose 
				<a href="#custom/checkbox.notes" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Add data attribute <code>data-position='auto'</code> to dropdown elements
				so they become a <b>dropup</b> when appropriate.
				<a href="#elements.dropdown.options" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				New <code>.ace-icon</code>(changeable) & <code>.menu-icon</code>
				classes which help with switching between different font icon libraries.
				<a href="#changes.fontawesome" class="help-more">More info</a>
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				File input <b>whitelist</b> & <b>blacklist</b> options and other fixes & enchancements.
				<a href="#custom/file-input" class="help-more">More info</a>
			</li>

			<li>
				<i class="ace-icon fa fa-check"></i> 
				Custom color picker enhancements.
				<a href="#custom/colorpicker" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				Light and blurred background for login page.
				<br />
				<a href="#pages/login" class="help-more">More info</a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i> 
				Some browser fixes. Now compatible with almost all desktop and mobile browsers.
			</li>

		</ul>
	</div>
	
	<h3 class="info-title  smaller">2. Changes to Ace</h3>
	  <div class="info-section">
	  <ul class="list-unstyled info-list">
		<li>
			<i class="ace-icon fa fa-check"></i> 
			You should now add <code>.ace-icon</code> class name to (almost) all icons 
			but you can rename or remove it.
			<br />
			For more info and the reason for this,
			see <a href="#changes.fontawesome" class="help-more">Updating Fontawesome</a> section.
		</li>

		<li>
			<i class="ace-icon fa fa-check"></i> 
			Sidebar icons now have a <code>.menu-icon</code> class name.
			<a class="help-more" href="#basics/sidebar.layout.item">More info</a>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			Default mobile view sidebar should have <code>.responsive</code> class name now.
			<br />
			<a href="#basics/sidebar.mobile" class="help-more">More info</a>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			Default mobile menu toggle button has been moved to <code>.navbar</code>
			but you can still use old style toggle button:
			<div class="space-4"></div>
			<div>
				<span class="thumbnail inline">
					<img src="images/old-toggle.png" />
				</span>
				<span class="middle inline">
					<i class="fa fa-long-arrow-left blue"></i>
					<i class="fa fa-long-arrow-right blue"></i>
				</span>
				<span class="thumbnail inline  no-margin-bottom">
					<img src="images/new-toggle.png" />
				</span>
			</div>
			<br />
			If you want to use old style toggle button, note that the <code>.menu-text</code> element inside it has been renamed to <code>.toggler-text</code>
			<br />
			For more info plese see <a href="#basics/sidebar.mobile.toggle" class="help-more">Toggle Buttons</a> section or use the on-page help of demo files.
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			Navbar has a few markup changes. Please see <a href="#basics/navbar" class="help-more">Navbar section</a>.
		</li>

		<li>
			<i class="ace-icon fa fa-check"></i> 
			For default skin, you should add <code>.no-skin</code> class name to body element now.
			<br />
			For more info see <a href="#settings.skins" class="help-more">Skins</a> section.
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i>
			<code>label</code> and <code>.lbl</code> elements had <code>vertical-align:middle</code>
			CSS rule which is removed now.
			<br />
			You should add <code>.middle</code> class to those elements that are out of place now.
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			<code>.sidebar-collapse</code> element is now <code>.sidebar-toggle .sidebar-collapse</code>.
			<br />
			This is because, there is now <code>.sidebar-toggle .sidebar-expand</code> for 2nd mobile menu style.
			<br />
			<a href="#basics/sidebar.layout.minimize" class="help-more">More info</a>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			If you are using settings box it should now be put right after
			<code>.page-content</code> element's opening tag.
			<br />
			It also has a slightly different HTML markup.
			<a href="#settings.box" class="help-more">More info</a>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			No need for <code>.main-container-inner</code> element any more.
			<br />
			<a href="#basics/layout" class="help-more">More info</a>
		</li>
		
		<li>
			Treeview element had two special icons <code>.icon-plus</code> and <code>.icon-minus</code>
			which have been renamed to <code>.tree-plus</code> and <code>.tree-minus</code>
			<br />
			<a href="#plugins/fuleux.treeview" class="help-more">More info</a>
		</li>
		
		<li>
			Widget box title should now have <code>.widget-title</code> class and also widget color options
			are now applied to the box, not header.
			<br />
			For example <code>.widget-header.header-color-blue</code> becomes
			<code>.widget-box.widget-color-blue</code>
			<br />
			<a href="#custom/widget-box" class="help-more">More info</a>
		</li>
		
		<li>
			Login page links such as "forgot password", etc should now have a
			<code>data-target</code> attribute.
			<br />
			<a href="#pages/login" class="help-more">More info</a>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			<b>ace-ie.css</b> or <b>ace-ie.min.css</b>
			was included only for <i>IE 8</i> and below. Now it should be included for <i>IE 9</i> as well, thus:
			<div class="space-4"></div>
<pre class="light-green">
&lt;!--[if lte IE <span class="light-red bolder">9</span>&gt;
&lt;link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-ie.min.css</span></span>" /&gt;
&lt;![endif]--&gt;
</pre>
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i> 
			When building CSS files using the in-browser builder tool, you may be notified that output CSS file is large for IE9 and below.
			<br />
			In that case, make sure to include the extra CSS file <code>ace-part2.css</code> using the provided instructions.
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i>
			Version number has been removed from jQuery file name for easier updates.
			Therefore:
			<br />
			<code>jquery.2.1.9.min.js</code> becomes <code>jquery.min.js</code>
			 <br />
			<code>jquery-1.x.min.js</code> becomes <code>jquery1x.min.js</code> (which is used for IE9 and below)
			 <br />
			 Same applies to jQuery UI:
			 <br />
			<code>jquery-ui.min.js</code>
			 <br />
			<code>jquery-ui.custom.min.js</code>
			 <br />
			<code>jquery-ui.min.css</code>
			 <br />
			<code>jquery-ui.custom.min.css</code>
		</li>

		<li>
			<i class="ace-icon fa fa-check"></i> 
			If you have used custom mobile view spacing element that add some space only in specific device widths,
			the naming has changed a bit.
			<br />
			For example <code>.vspace-xs-16</code> has been changed to <code>.vspace-16-xs</code>.
			<br />
			This helps reduce number of CSS selectors.	
		</li>
		
		<li>
			<i class="ace-icon fa fa-check"></i>
			If you've used Mustache templates, some files and data have been renamed:
			<ol>
				<li><code>sidenav_navList</code> <i class="fa fa-double-angle-right"></i> <code>sidebar_items</code></li>
				<li><code>topbar*</code> <i class="fa fa-double-angle-right"></i> <code>navbar*</code></li>
				<li><code>sidenav*</code> <i class="fa fa-double-angle-right"></i> <code>sidebar*</code></li>
			</ol>
		</li>
	   </ul>
	   </div><!-- /.info-section -->
		   
		
		<h3 class="info-title smaller">3. Changes to Bootstrap</h3>
		 <div class="info-section">
			<ul class="list-unstyled info-list">
				<li>
					<i class="ace-icon fa fa-warning red"></i> 
					The included Bootstrap CSS file has been modified and is slightly different from original Bootstrap files.
					<br />
					You can still use original Bootstrap files but you should re-compile Ace LESS files with new variables.
					<br />
					See <a  class="help-more" href="#files/css">CSS/LESS files</a> for more info on this.
				</li>
				
				<li>
					<i class="ace-icon fa fa-check"></i> 
					There is not much to about Bootstrap when updating from <b>v3.0</b> to <b>v3.1</b>
					<br />
					You can read more about it here:<br />
					<span class="text-info">http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/</span>
					or
					<span class="text-info">https://github.com/twbs/bootstrap/issues/11734</span>
				</li>
				
				<li>
					<i class="ace-icon fa fa-check"></i> 
					With dropdown menus, use <code>.dropdown-menu-right</code> instead of <code>.pull-right</code>.
					This includes <u class="dotted">navbar's user info dropdowns</u>.
				</li>
			</ul>
	   </div>


		<h3 class="info-title smaller">4. Third Party Changes</h3>
		<div class="info-section">
			<ul class="list-unstyled info-list">
				<li>
					<i class="ace-icon fa fa-check"></i>
					If you are using Colorbox(slideshow) plugin, the latest version requires
					<code>rel</code> parameter to work properly, for example <code>rel: 'colorbox'</code>.
					<a class="help-more" href="#plugins/misc.colorbox">More info</a>
				</li>

				<li>
					<i class="ace-icon fa fa-check"></i>
					Latest inline editable plugin doesn't come with datepicker option.
					<br />
					I added a custom addon for it.
					<a class="help-more" href="#custom/inline-editable.date"><b>More info</b></a>
				</li>
				
				<li>
					<i class="ace-icon fa fa-check"></i>
					Easy pie chart plugin's file has been renamed to <code>easypiechart.js</code>.
					It was <code>easy-pie-chart.js</code>.
					<br />
					Also Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
					<br />
					<span class="text-info">https://github.com/rendro/easy-pie-chart/issues/81</span>
					<br />
					You can use an older version of the plugin <code>jquery.easy-pie-chart-older.js</code>
					and the problem does not exist.
				</li>
				
				<li>
					I have also changed/customized a few things with some plugins including:
					<ol>
						<li><code>nextIcon</code> and <code>prevIcon</code> options for daterangepicker plugin</li>
						<li>Added <code>function.bind</code> for IE in html5shiv (used by easypiechart)</li>
						<li>Added bootboxes to markdown editor</li>
						
						<li>And modified/customized a few things with FuelUX plugins</li>
					</ol>
				</li>
			</ul>
	   </div>
	   

  </div><!-- /.help-content -->


  <div class="hr hr-double hr32"></div>
  <h2 class="blue lighter" data-id="#changes.v4">
	Ace v1.1.3 to v1.2.0
  </h2>
  <div class="space-4"></div>
 
  <div class="help-content">
	<h3 class="info-title smaller">1. Updating to Bootstrap 3</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				 The major change is upgrading your application to Bootstrap 3.
				 <br />
				 So you may want to take a look at the following guide for migrating to BS3:
				 <br />
				 <a href="http://bootply.com/bootstrap-3-migration-guide">http://bootply.com/bootstrap-3-migration-guide</a>
				 <br />
				 or Bootstrap's documentation:
				 <br />
				 <a href="http://getbootstrap.com/getting-started">http://getbootstrap.com/getting-started</a>
			</li>
			<li>
				Here are a few quick tips:
				<div class="space-4"></div>
				<ul class="list-unstyled info-list">
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use <code>.row</code> instead of <code>.row-fluid</code>
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use
						<code>.col-xs-*</code>
						<code>.col-sm-*</code>
						<code>.col-md-*</code>
						<code>.col-lg-*</code>
						instead of
						<code>.span*</code>
						
						<div class="space-2"></div>
						<div class="alert alert-danger">
							<i class="ace-icon fa fa-warning"></i>
							With Bootstrap 2.x it was alright to randomly have <code>.row-fluid</code> elements
							without <code>.span*</code> children.
							<br />
							But with Bootstrap 3, you should remove those unused <code>.row</code> (<small>previously</small> <code>.row-fluid</code>)
							elements that don't need/contain <code>.col-*-*</code> (<small>previously</small> <code>.span*</code>)
							inside them and use <code>.clearfix</code> class if it has floating children or use no class at all.
						</div>
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use <code>.btn-xs</code> <code>.btn-sm</code> <code>.btn-lg</code> instead of 
							<code>.btn-mini</code> <code>.btn-small</code> <code>.btn-large</code>
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use <code>.well-sm</code> <code>.well-lg</code> instead of 
							<code>.well-small</code> <code>.well-large</code>
						
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use <code>.input-group</code> instead of 
							<code>.input-append</code> and <code>.input-prepend</code>
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Update Bootstrap's modal dialog HTML code:
						<br />
						Now it needs <code>.modal-dialog</code> <code>.modal-content</code> classes
						and the <code>.modal</code> doesn't need <code>.hide</code> class.
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Bootstrap event names have been namespaced, so for example instead of
						<code>$('#myModal').on('shown' , ...)</code> we now have <code>$('#myModal').on('shown.bs.modal' , ...)</code>
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						No need for <b>bootstrap-responsive.css</b> or <b>ace-responsive.css</b> now.
						<br />
						They have been integrated with main CSS files.
					</li>

					<li>
						<i class="ace-icon fa fa-check"></i>
						No need for
						<code>&lt;span class="divider"&gt;&lt;i class="arrow-icon"&gt;&lt;/i&gt;&lt;/span&gt;</code>
						as breadcrumbs divider.
					</li>

					<li>
						<i class="ace-icon fa fa-check"></i>
						Images were responsive by default, i.e. they were limited to their container's size.
						Now you should use <code>.img-responsive</code> class.
					</li>
					
					<li>
						<i class="ace-icon fa fa-check"></i>
						Use <code>.dropdown-header</code> instead of <code>.nav-header</code>.
						This applies to user dropdown menus inside navbar.
					</li>
					
					<li>
						<i class="ace-icon fa fa-hand-o-right blue"></i>
						Default typeahead plugin in Bootstrap 2 has been remove in BS3. <br />
						I've included that in Ace's Javascript file.<br />
						It is used in search box and also <b>Tag Input</b> plugin.
						<br />
						If you don't need it, you can build a custom Javascript without it.
					</li>
					
					<li>
						<div class="alert alert-danger">
							<i class="ace-icon fa fa-warning"></i>
						  Bootstrap 3 is now setting the CSS rule <code>box-sizing:border-box</code> on all HTML elements.
						  <br />
						  It means that if you had custom elements with specific dimensions, paddings and borders that relied on default browser value of
						  <code>box-sizing:contet-box</code>
						  you may now want to recalculate those values.
						  <br />
						  Also many third party plugins rely on the default browser value <b>content-box</b>.
						  <br />
						  Some of them are reset in <code>assets/css/less/bs3-reset.less</code>
						  <br />
						  See this for more info:
						  <span class="text-primary">http://getbootstrap.com/getting-started/#third-box-sizing</span>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div><!-- /.info-section -->
	
	
     <h3 class="info-title smaller">2. Changes to Ace</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				Navbar structure and classes are now slightly different. Please see:
				<code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/navbar.mustache</code>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				Document structure and classes are now slightly different.
				Please see <code data-open-file="html" class="open-file">mustache/app/views/layouts/default.mustache</code>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				Use <code>data-icon-show</code> <code>data-icon-hide</code> attributes inside <code>.accordion-toggle</code> elements
				to specify icons used when toggling panels.
				<br />
				<a class="help-more" href="#elements.accordion.icon"><b>More info</b></a>
			</li>
			
			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				Some changes should be made to form elements inside <code>.form-horizontal</code>.
				<br />
				An example could be like this:
<pre data-language="html">
&lt;div class="form-group"&gt;
  &lt;label for="id-username" class="col-sm-3 control-label no-padding-right"&gt;
    Text Field
  &lt;/label&gt;
  &lt;div class="col-sm-9"&gt;
    &lt;input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="id-username"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
			</li>
			
			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				The wizard steps container doesn't need <code>.hide</code> class
			</li>
			
			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				Gallery tags should be wrapped inside <code>.label-holder</code>
			</li>
			
			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				Use <code>.dropdown-only-icon</code>
				instead of
				<code>.dropdown-icon-only</code>
			</li>
			
			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				Use <code>.vspace-*-xs</code>
				<code>.vspace-*-sm</code>
				<code>.vspace-*-md</code>
				<code>.vspace-*-lg</code>
					instead of <code>.vspace-*</code>
				for spacing that is visible only on specific sizes.
			</li>

			<li>
				<i class="ace-icon fa fa-hand-o-right blue"></i>
				RTL styles has now been separated into <b>ace-rtl.css</b> file.
				<br />
				You can add or remove it as needed.
			</li>

		</ul>
	</div><!-- /.info-section -->
  </div><!-- /.help-content -->


   <div class="hr hr-double hr32"></div>
   <h2 class="blue lighter" data-id="#changes.v3">
	Ace v1.1.2 to v1.1.3
   </h2>
    <div class="space-4"></div>

    <div class="help-content">
	  <h3 class="info-title smaller">Changes to Ace</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				You should now add <code>.ace</code> class name to checkbox and radio buttons to style them.
				<br />
				Previously, browser checkboxes and radio buttons were hidden by default
				and you needed to insert an <code>.lbl</code> element after them to be displayed correctly.
			   <br />
			   This caused some issues with environments or libraries that created checkboxes
			   automatically or differently
			   and wasn't easy to put <code>.lbl</code> after them.
			   <br />
			   So now, default checkboxes are shown without change
			   and you can style them by adding <code>.ace</code> class
			   to checkboxes and inserting an <code>.lbl</code> element after them.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				To have sidebar fixed by default you now should add
				<code>.sidebar-fixed</code> class to <code>.sidebar</code> element
				and to fix breadcrumbs you should add <code>.breadcrumbs-fixed</code>
				class to <code>.breadcrumbs</code> element.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				You should now use <code>assets/js/ace-extra.js</code> inside <code>head</code> element
				to dynamically enable/save/retrieve some user settings using Javascript, such as
				fixing navbar/sidebar/breadcrumbs and sidebar collapse/expand.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				The <code>#sidebar-collapse</code> element's icon has two attributes <code>data-icon1</code> and 
				<code>data-icon2</code> which determine the button's icon in expanded/collapsed state.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				<code>#ace-settings-header</code> has been changed to <code>#ace-settings-navbar</code>
				(i.e. the checkbox element inside settings box that fixes/unfixes navbar)
			</li>
		</ul>
	</div><!-- /.info-section -->
	


	  <h3 class="info-title  smaller">Third Party Changes</h3>
	  <div class="info-section">
		<ul class="list-unstyled  info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				Chosen plugin now uses <b>chosen-</b> prefix rather than <b>chzn-</b> for its classes.
				<br />
				If you have defined custom CSS rules or used <b>chzn-*</b> selectors inside your scripts, you may need to modify them accordingly.
			</li>
		</ul>
	  </div><!-- /.info-section -->

  </div><!-- /.help-content -->

    
  
  <div class="hr hr-double hr32"></div>
   <h2 class="blue lighter" data-id="#changes.v2">
	Ace v1.1.2
   </h2>
    <div class="space-4"></div>
    <div class="help-content">
		<h3 class="info-title smaller">Changes to Ace</h3>
		<div class="info-section">
		 <ul class="list-unstyled info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				CSS "ID"s have been replaced with classes.
				  <p>
				  So for example in CSS files where we had:
				  <br />
				  <code>
				  #main-content {
				   ...
				  }
				  </code>
				  </p>
				  <p>
				  It has been changed to:
				   <br />
				  <code>
				  .main-content {
				   ...
				  }
				  </code>
				  <p>
				  The element in HTML code still keeps the ID attribute, so previous Javascript code should work as expected.
				  </p>
<pre data-language="html">
&lt;div class="main-container" id="main-container"&gt;
   ...
&lt;/div&gt;

...

&lt;a class="menu-toggler" id="menu-toggler"&gt;
   &lt;span class="toggler-text"&gt;&lt;/span&gt;
&lt;/a&gt;
				</pre>
					Basically you just need to add a class with the same ID value to HTML elements.
				The specific changes are:
				  <ul>
					<li><code>#user_info</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-info</code> (Topright user menu)</li>
					<li><code>#user_menu</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.user-menu</code></li>
					
					<li class="hr hr-8 dotted"></li>

					<li><code>#menu-toggler</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.menu-toggler</code></li>
					<li><code>#sidebar</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar</code></li>
					<li><code>#sidebar-shortcuts</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts</code></li>
					<li><code>#sidebar-shortcuts-large</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-large</code></li>
					<li><code>#sidebar-shortcuts-mini</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-shortcuts-mini</code></li>
					<li><code>#sidebar-collapse</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.sidebar-collapse</code></li>
					
					<li class="hr hr-8 dotted"></li>
					
					<li><code>#main-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-container</code></li>
					<li><code>#main-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.main-content</code></li>
					<li><code>#page-content</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.page-content</code></li>
					
					<li class="hr hr-8 dotted"></li>
					
					<li><code>#breadcrumbs</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.breadcrumbs</code></li>
					<li><code>#nav-search</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search</code></li>
					<li><code>#nav-search-input</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-input</code></li>
					<li><code>#nav-search-icon</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.nav-search-icon</code></li>

					<li class="hr hr-8 dotted"></li>

					<li><code>#ace-settings-container</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-container</code></li>
					<li><code>#ace-settings-btn</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-btn</code></li>
					<li><code>#ace-settings-box</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.ace-settings-box</code></li>
					<li><code>#btn-scroll-up</code> <i class="ace-icon fa fa-hand-o-right"></i> <code>.btn-scroll-up</code></li>
				   </ul>  
			</li>
			
			<li>
			   <i class="ace-icon fa fa-check"></i>
			   The text on first level links of side navigation which was <code>SPAN</code> element, should now have <code>.menu-text</code> class:
<pre data-language="html">
&lt;li&gt;
  &lt;a href="index.html"&gt;
    &lt;i class="ace-icon fa fa-tachometer"&gt;&lt;/i&gt;
    &lt;span class="menu-text"&gt;Dashboard&lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;</pre>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
			   Similar things applies to <code>#menu-toggler</code> element.
			   <br />
			   You should add <code>.toggler-text</code> class name to its <code>SPAN</code> child:
<pre data-language="html">
&lt;a href="#" class="menu-toggler" id="menu-toggler"&gt;
   &lt;span class="toggler-text"&gt;&lt;/span&gt;
&lt;/li&gt;</pre>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
			  The default size of icons inside buttons have been removed.
			  <br />
			  You may specify icon sizes using <code>.bigger-110</code> ... <code>.bigger-300</code> as described later.
<pre data-language="html">
&lt;a href="#" class="btn btn-app btn-primary"&gt;
   &lt;i class="ace-icon fa fa-envelope bigger-200"&gt;&lt;/i&gt;
   Email
&lt;/li&gt;</pre>
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
			  Add <code>.home-icon</code> to the first breadcrumbs icon (the one indicating homepage).
			</li>
			
		</ul>
	  </div><!-- /.info-section -->
  </div><!-- /.help-content -->



  <div class="hr hr-double hr32"></div>
  <h2 class="blue lighter">FontAwesome & Icons</h2>
 <div class="space-4"></div>
 
  <div class="help-content">
	<h3 class="info-title smaller" data-id="#changes.fontawesome">Updating Fontawesome 3.x to 4.x</h3>
	<div class="info-section">
		<ul class="list-unstyled info-list">
			<li>
				<i class="ace-icon fa fa-check"></i>
				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.
				<div class="space-6"></div>
				I have added <code>.ace-icon</code> class to be used on all icons except for those that don't any special styling.
				<br />
				Also <code>.menu-icon</code> should be used for sidebar icons.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				You can choose a different name other than <code>.ace-icon</code> by modifying 
				<code>@icon</code> variable inside <code>assets/css/less/variables.less</code>
				and re-compiling LESS files.
				<br />
				Also inside:
				<br />
				<code>assets/js/ace.js</code>
				<br />
				or <code>dist/js/ace.min.js</code>
				<br />
				or
				<code>assets/js/ace/ace.js</code>,
				<div class="space-4"></div>
				and
				<div class="space-4"></div>
				<code>assets/js/ace-extra.js</code>,
				<br />
				or
				<code>dist/js/ace-extra.min.js</code>
				<br />
				
				you should change <code>ace.vars['icon']</code> and <code>ace.vars['.icon']</code>
				to new values.
			</li>
			
			<li>
				<i class="ace-icon fa fa-check"></i>
				I have included a Javascript file which helps you to update all your files to use new icon names.
				<br />
				You can find it here
				<code>build/icon.js</code>
				and use it with Node.js like this:
				<code>node icon.js --path=".../html/myfile.html"</code>
				or
				<code>node icon.js --path=".../mydir/"</code>
				<br />
				Options include:
				<ol>
					<li>
						<b>path</b>: Path to the folder or file you want to update.
					</li>
					<li>
						<b>ext</b>: if specified only this extensions will be updated.
					</li>
				</ol>
				Example:
				<br />
				<code>node icon.js --path="path/to/file-or-folder"</code>
				<br />
				<code>node icon.js --path="path/to/file-or-folder" --ext="html|php|js"</code>
			</li>
			
			<li>
				<div class="alert alert-danger">
					If you want to use the <b>icon.js</b> script to update icon names,
					make sure you have a copy of your files first.
					<br />
					Also if you want to use another name other than <code>.ace-icon</code> you should modify
					<code>var ace_icon</code> variable inside the script.
				</div>
			</li>
		</ul>
	</div><!-- /.info-section -->
  </div><!-- /.help-content -->


  
</section>