Overview

Ace cookie/localStorage feature is inside assets/js/ace-extra.js
If you want these features, it's best to include this file inside document head
Ace's demo setting functions are inside assets/js/ace/ace.settings.js (and later merged into assets/js/ace.js for production site)
In older versions of Ace, you could use an HTML code like following to restore user selected settings:
```
 
```
From Ace v1.3.5 on it's not required.
You just need to assign the element an id attribute and use .ace-save-state class for it:
```
...
```
Using CSS3 animation events, the element's saved properties will be restored when it is inserted into DOM.
This is almost instant in Firefox and IE but in Chrome there is some delay.
You may not notice the delay when restoring navbar or sidebar's fixed state.
But restoring collapsed state of sidebar or main container's "inside container" option becomes noticeable.
In that case we can put the code right after element in inserted into DOM to restore its properties.
```
 
```
This will cause the element's status be restored as soon as it is inserted into DOM.
The try/catch block is used so that if you don't want to use ace-extra.js file and its functions, the browser doesn't raise any errors.

Setting functions

You can use ace.settings.saveState to save an element's property or class name:
```
  
```
```
 ace.settings.saveState('mycheckbox', 'checked');
 ace.settings.saveState('sidebar', 'class', 'sidebar-fixed', true);
```
Available arguements are:
1. Element ID
2. (Optional) Element property to be Saved. Default is class
3. (Optional) Property value.
4. (Optional) Used in conjuction with previous option when property name is class. If true the value will be added to element's class name. If false it will be removed
Later when reloading page, those properties will be restored or you can load it manually by calling:
```
 ace.settings.loadState('mycheckbox');
```
Settings are saved inside localStorage by default.
You can change it described in localStorage section.

Fixed Navbar

For fixed navbar, you should add .navbar-fixed-top class to .navbar element:
```
 
  ...
 
```
You can also use the following javascript code to do this:
```
 ace.settingFunction.navbar_fixed(null, true, true);//first parameter is null or reference to navbar element
 ace.settingFunction.navbar_fixed($('#navbar').get(0), true, true);
```
First parameter is a reference to navbar element. If null #navbar will be used.
Second parameter determines whether navbar should become fixed or not.
Third paramtere determines whether you want to save the changes for later retrieval.
In smaller devices, fixed navbar content may become too large and ends up in more that two rows.
In that case you may need to add extra padding to content area using CSS and media rules or enable auto padding option when building your custom Javascript

Fixed Breadcrumbs

For fixed breadcrumbs, you should add .breadcrumbs-fixed class to .breadcrumbs element:
```
 
  ...
 
```
If you want to do this using Javascript, you can use this code:
```
 ace.settingFunction.breadcrumbs_fixed(null, true, true);//first parameter is null or reference to breadcrumbs element
 ace.settingFunction.breadcrumbs_fixed($('#breadcrumbs').get(0), true, true);
```
First parameter is a reference to breadcrumbs element. If null #breadcrumbs will be used.
Second parameter determines whether breadcrumbs should become fixed or not.
Third paramtere determines whether you want to save the changes for later retrieval.
Currently, fixed breadcrumbs are only available when device with is above 991px which you can change that by modifying @screen-fixed-breadcrumbs variable inside assets/css/less/variables.less files and recompiling ace.less.
The reason for this is that in smaller devices, fixed breadcrumbs and fixed navbar may take up a lot of space!
Anyway, if in smaller devices, your fixed breadcrumbs content is too large and ends up in more that two rows, you may need to add extra padding to content area using CSS and media rules or enable auto padding option when building your custom Javascript

Inside container

For fixed container width, you should add .container class to .navbar-container and .main-container elements:
```
 
   
     ...
   
 
 
 
     ...
 
```
If you want to do this using Javascript, you can use this code:
```
 ace.settingFunction.main_container_fixed(null, true, true);//first parameter is null or reference to container element
 ace.settingFunction.main_container_fixed($('#main-container')[0], true, true);
```
First parameter is a reference to container element. If null #main-container will be used.
Second parameter determines whether navbar should become fixed or not.
Third paramtere determines whether you want to save the changes for later retrieval.

Currently Bootstrap doesn't allow fixed width container on specific widths only.
You can enable auto container option when building a custom Javascript to activate fixed container only when device width is more than 1140px.

$(window).on('resize.auto_container', function() {
    var enable = $(this).width() > 1140;
    try {
       ace.settingFunction.main_container_fixed(enable, false, false);
    } catch(e) {}
}).triggerHandler('resize.auto_container');

Sidebar Settings

For fixed sidebar, you should add .sidebar-fixed class to .sidebar element:
```
 
  ...
 
```
If you want to do this using Javascript, you can use this code:
```
 ace.settingFunction.sidebar_fixed(null, true, true);//first element is null or reference to sidebar element
 ace.settingFunction.sidebar_fixed($('#sidebar').get(0), true, true);
```
First parameter is a reference to sidebar element. If null #sidebar will be used.
Second parameter determines whether sidebar should become fixed or not.
Third paramtere determines whether you want to save the changes for later retrieval.
For minimized sidebar, you should add .menu-min class to .sidebar element:
```
 
  ...
 
```
If you want to do this using Javascript, you can use this code:
```
 $('#sidebar').ace_sidebar('collapse', null, true);
 $('#sidebar').ace_sidebar('expand');
```
First parameter is an optional reference to the toggle button.
Second paramtere determines whether you want to save the changes for later retrieval.
For other sidebar options and settings please see Sidebar options

Setting Events

When a settings box option or sidebar collapse/expand button is clicked an event is triggered which may be useful in case you use settings box and want to respond to user changes

The event name is settings.ace and has four extra arguments.
The first is event name, the second is the new status (fixed or not), third is the element (navbar, sidebar, etc) and fourth is whether the changes are being saved or not:

$(document).on('settings.ace', function(event, name, status, source, save) {
    //name is one of the following
    //navbar_fixed
    //sidebar_fixed
    //breadcrumbs_fixed
    //main_container_fixed
    //sidebar_collapsed
	
    //status is either true or false
	
    if(name == 'sidebar_fixed' && status == false) {
        //sidebar was unfixed by user, do something
    }
}

There is also a presettings.ace event triggered before making changes and can be used to prevent it or make some changes before proceeding:

$(document).on('presettings.ace', function(event, name, status, source, save) {
    //name is one of the following
    //navbar_fixed
    //sidebar_fixed
    //breadcrumbs_fixed
    //main_container_fixed
    //sidebar_collapsed
	
    //status is either true or false
	
    if(name == 'sidebar_fixed' && status == false) {
        event.preventDefault();
    }
}

Skins

There are currently 4 skins available which changes sidebar and navbar colors, which are:
1. .no-skin
2. .skin-1
3. .skin-2
4. .skin-3 To use .skin-3 you should add .no-skin class as well
To use a skin simply update body element's class name:
```
<body class="skin-2">
...
```
Inside settings box when you select a skin some other parts change as well.
For example shortcut buttons or navbar user dropdown buttons.
For that you should update some class names in your HTML code:
```
 
 
 
 
 
  ...
 
```
Default skin in included and compiled with ace.css but for other skins you should include ace-skins.css
You can also compile main css ace.css using another skin.
Please refer to Ace Skins section for more info.
If you want to save a selected skin and retrieve it when user navigates to a different page or refreshes page, there are several approaches for that depending on your application.
One way is to save selected skin inside a cookie and apply changes in your server side code when user requests a page:
```
 $('#ace-settings-skin').on('change', function() {
   ace.settings.set('skin', this.value); 
 })
```
And in your server side code:
```
$skin = $_COOKIE['ace_skin'];
echo '<body class="'.$skin.'">';
//...
//...
echo '<li class="'.some_modification_based_on_selected_skin($skin).'">';
```
Of course it's the simplest way and things would be different depending on your application

RTL

RTL (right to left) direction is used for Arabic, Hebrew and Persian languages
It's best to make RTL changes directly inside your HTML rather than using Javascript dynamically at runtime.
You should make the following changes for RTL:
1. Include assets/css/ace-rtl.css
2. Add .rtl class to body element
3. Switch classes that have -right or -left
  For example:
  .pull-right & .pull-left
  or
  .no-padding-left & .no-padding-right
  or
  .arrowed & .arrowed-right
Also please note that RTL horizontal scrolling is inconsistent between browsers.
So it's better to change scrollbars to LTR and make the content RTL again.
You can use .make-ltr and .make-rtl classes:
```
 $('#my-content').addClass('make-ltr')
 .find('.scroll-content').wrapInner('<div class="make-rtl" />');
```
Some plugins support RTL and you should specify the options when initiating plugins:
1. For Chosen plugin add .chosen-rtl to the element
2. For jqGrid plugin specify direction:'rtl' option
3. For jQuery UI datepicker specify isRTL:true option
4. For FullCalendar plugin set isRTL:true option
Sometimes when using RTL option of settings box for multiple times, you elements are misplaced in some browsers.
This is probably because browsers don't redraw elements.
It won't be a problem in your application, because you should enable RTL inside your server side response and not dynamically inside browser.

Cookies & Storage

Cookie and localStorage functionality has been added to save/load variables and settings which is defined inside ace-extra.js
You can open ace-extra.js and change ace.config values.

//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.
And ace.data is initiated by default:

/**
ace.data = new ace.data_storage();//use localStorage if available otherwise use cookies
ace.data = new ace.data_storage(1);//use localStorage
ace.data = new ace.data_storage(2);//use cookies
*/

//save/load values with namespace (for example 'settings')
//ace.data.set(namespace, key, value);
ace.data.set('settings', 'sidebar-collapsed', 1);
var collapsed = ace.data.get('settings', 'sidebar-collapsed');
ace.data.remove('settings', 'sidebar-collapsed');

//save/load values without namespace
ace.data.set('username', 'alex');
var username = ace.data.get('username');
ace.data.remove('username');

When saving objects or arrays, you should use a parameter which specifies this:
```
var widget_list = {};//an object
ace.data.set('demo', 'widget-order', widget_list, null, true);
ace.data.get('demo', 'widget-order', true);
```
The true value indicates that the value being saved/restored is an object.

Settings Box

Settings container (.ace-settings-container) should be the first child of .page-content
It contains .ace-settings-btn and .ace-settings-box which consists of several .ace-settings-item elements:


  
    
       
    

    
      
        
            
             Fixed Navbar
        
      


      
		...
      

    

  
  .
  .
  .

Settings