Gecko [ www.jdcpatala.org ]

Name	Size	Permission
boxes.md	10.42 KB	-rw-r--r--
cards.md	16.94 KB	-rw-r--r--
control-sidebar.md	1.79 KB	-rw-r--r--
direct-chat.md	34.52 KB	-rw-r--r--
main-header.md	24.19 KB	-rw-r--r--
main-sidebar.md	3.99 KB	-rw-r--r--
miscellaneous.md	949 B	-rw-r--r--
plugins.md	1.83 KB	-rw-r--r--
ribbons.md	4.29 KB	-rw-r--r--
timeline.md	1.73 KB	-rw-r--r--

Code Editor : plugins.md

---
layout: page
title: Plugins
---
AdminLTE comes with color overrides & extras for the following plugins.

### Bootstrap Slider
You can override the color for bootstrap slider tracks with the following classes:
- `.slider-*`

Example:
```html
<div class="slider-red">
  <input type="text" value="" class="slider form-control" data-slider...>
</div>
```

You can also change the layout of the slider with the following classes:

- `.slider-vertical`
- `.slider-horizontal`

Example:
```html
<div class="slider-red">
  <input type="text" value="" class="slider slider-vertical form-control" data-slider...>
</div>
```

### iCheck Bootstrap
You can override the color of a iCheck checkbox/radio input, add the following class:
- `.icheck-*`

Example:
```html
<div class="icheck-primary">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">
    Checkbox Label
  </label>
</div>
```

### Pace
You can override the color for all pace themes, load your desired theme and add one the following classes to `body`:

- `.pace-*`
  - barber-shop
  - flat-top
  - minimal
- `.pace-big-counter-*`
  - big-counter
- `.pace-bounce-*`
  - bounce
- `pace-center-atom-*`
  - center-atom
- `pace-center-circle-*`
  - center-circle
- `pace-center-radar-*`
  - center-radar
- `pace-center-simple-*`
  - center-simple
- `pace-corner-indicator-*`
  - corner-indicator
- `.pace-flash-*`
  - flash
- `.pace-fill-left-*`
  - fill-left
- `.pace-loading-bar-*`
  - loading-bar
- `.pace-material-*`
  - material
- `.pace-mac-osx-*`
  - mac-osx

Example: `<body class="pace-success">`

### SweetAlert
If you use SweetAlert and load the SweetAlert CSS before AdminLTE's CSS, then the colors of any icon changes to AdminLTE's default colors.

### Toastr
If you use Toastr and load the Toastr CSS before AdminLTE's CSS, then the background colors changes to AdminLTE's default colors.

${this.title}

Code Editor : plugins.md