Please note that widget box title should now have .widget-title class.
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
Widget box consists of header and body.
```
 
   
   
 
```

You can use following classes for a different widget box color:
1. .widget-color-blue
2. .widget-color-blue2
3. .widget-color-blue3
4. .widget-color-green
5. .widget-color-green2
6. .widget-color-green3
7. .widget-color-red
8. .widget-color-red2
9. .widget-color-red3
10. .widget-color-yellow
11. .widget-color-purple
12. .widget-color-pink
13. .widget-color-dark
14. .widget-color-grey
```
 
  ...
 
```
Add .transparent for transparent widget box:
```
 
  ...
 
```
Add .light-border for light widget body border:
```
 
  ...
 
```
Add .collapsed for widget box to be collapsed by default:
```
 
  ...
 
```

Header consists of title and toolbar(optional action buttons):
```
 
   title!
   
 
```
Widget Header
1. .widget-header-small makes .widget-header smaller
2. .widget-header-large makes .widget-header larger
3. .widget-header-flat disables gradient background on .widget-header
Widget toolbar consists of buttons with custom icons and elements.
```
 
   
   
   
   
   
 
```
Current action buttons that trigger an event and perform an action are:
1. settings
2. reload
3. fullscreen
4. collapse
5. close
Please refer to widget events section for more info.
For data-action="collapse" button, you can change collapsed/expanded icons by specifying icon's data-icon-show & data-icon-hide attributes:
```
  
    
  
```
Also, if you specify any icon with -up or -down in its name, it will be automatically flipped.
You can also add .collapsed class to .widget-box to become collapsed by default.
You can have multiple toolbars in widget header:
```
 

 
 
```
.no-border class on a .widget-toolbar hides its border.

To have a dropdown menu inside widget toolbar, you should wrap the action button and menu inside a .widget-menu element:

 

    

    
      
      
         Option#1
         Option#2

To have tabs in widgets, you should put the ul.nav-tabs element inside .widget-toolbar and .tab-content should be inside widget body's .widget-main:

 
   Tabbed
   
      
         Home
         Profile
         Info

Widget box consists of header and body.
```
 
   
   
 
```
.widget-body consists of .widget-main and optional toolboxes .widget-toolbox
```
   ... 

   ... 

   ... 
```
.widget-main and .widget-toolbox can have the following padding classes:
- .no-padding
- .padding-2
- .padding-4
- ...
- .padding-30
- .padding-32
For example when putting a table inside widget box you may want to use .no-padding
```
  
  
    
      
      
	  
      
      
    
	
  
```

.widget-toolbox can be before or after .widget-main


 
  ...
 



 ...

Add .toolbox-vertical to .widget-toolbox for vertical toolbox

The following functions are available for widgets:

close
toggle
hide
show
reload
fullscreen

 
  ....

 $('#my-widget').widget_box('toggle');
 $('#my-widget').widget_box('show');
 $('#my-widget').widget_box('close');
 $('#my-widget').widget_box('reload');

The following events are triggered when using widgets:
Before Events:
1. show.ace.widget triggered before a widget box is shown
2. hide.ace.widget triggered before a widget box is hidden
3. close.ace.widget triggered before a widget box is closed
4. reload.ace.widget triggered before a widget box is reloaded
5. fullscreen.ace.widget triggered before a widget box is fullscreen
6. setting.ace.widget triggered before a widget box is fullscreen
After Events:
1. shown.ace.widget triggered after a widget box is shown
2. hidden.ace.widget triggered after a widget box is hidden
3. closed.ace.widget triggered after a widget box is closed
4. reloaded.ace.widget triggered after a widget box is reloaded
5. fullscreened.ace.widget triggered after a widget box is fullscreened

With "before events" you can cancel an action.
For example when you are waiting for remote content to arrive, you can cancel "close" events:

 $('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
    if(waitingForContent) {
       event.preventDefault();//action will be cancelled, widget box won't close
    }
 });

With "after events" you can do some action after its finished:

 $('#my-widget').on('shown.ace.widget', function(event) {
    //$(this).doSomething();
 });

reload.ace.widget can be used to load remote content.
When data is ready, you can trigger reloaded.ace.widget:

 $('#my-widget').on('reload.ace.widget', function(ev) {
   $.ajax({url: 'remote-data.php'}).done(function(content) {
     //use content
     //when ready ...
     $('#my-widget').trigger('reloaded.ace.widget');
   });
 });

setting.ace.widget event does not have an "after" event.
You can use it to be notified when "settings" button is clicked and show a dialog:
```
 $('#my-widget').on('setting.ace.widget', function(ev) {
   //launch a modal (settings box) or other appropriate action
 });
```

Using jQuery UI, you can add drag & drop functionality to widget boxes or any other set of elements:

 $('.widget-container-col').sortable({
    connectWith: '.widget-container-col',
    items: '> .widget-box',
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    start: function(event, ui){
        //when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height
        //we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it
        ui.item.parent().css({'min-height': ui.item.height()})
    },
    update: function(event, ui) {
        //the previously set "min-height" is not needed anymore
        //now the parent (.widget-container-col) should take the height of its child (.wiget-box)
        ui.item.parent({'min-height':''})
    }
 });

Widget Box

1. Widget Box

2. Widget Box Options

3. Widget Header

title!

Widget Header

Tabbed

4. Widget Body

5. Functions & Events

7. Widget Drag & Drop