2019-09-09 12:19:35 +00:00
|
|
|
---
|
|
|
|
|
layout: page
|
|
|
|
|
title: Plugins
|
|
|
|
|
---
|
|
|
|
|
AdminLTE comes with color overrides & extras for the following plugins.
|
|
|
|
|
|
|
|
|
|
### Bootstrap Slider
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
You can override the color for bootstrap slider tracks with the following classes:
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
- `.slider-*`
|
|
|
|
|
|
|
|
|
|
Example:
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
```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:
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
```html
|
|
|
|
|
<div class="slider-red">
|
|
|
|
|
<input type="text" value="" class="slider slider-vertical form-control" data-slider...>
|
|
|
|
|
</div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### iCheck Bootstrap
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
You can override the color of a iCheck checkbox/radio input, add the following class:
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
- `.icheck-*`
|
|
|
|
|
|
|
|
|
|
Example:
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
```html
|
|
|
|
|
<div class="icheck-primary">
|
|
|
|
|
<input type="checkbox" id="checkbox1">
|
|
|
|
|
<label for="checkbox1">
|
|
|
|
|
Checkbox Label
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Pace
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
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
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
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
|
2020-06-02 13:57:24 +00:00
|
|
|
|
2019-09-09 12:19:35 +00:00
|
|
|
If you use Toastr and load the Toastr CSS before AdminLTE's CSS, then the background colors changes to AdminLTE's default colors.
|
