#bootstrapThemeSwitcher
jQuery plugin for dynamically loading Twitter Bootstrap themes from Bootswatch. This plugin allows for the automatic populating of UL
and SELECT
elements with the names of themes available, can switch a theme, save the selected theme to a cookie and load the selected theme from a cookie.
Support
- Bugs and Feature requests Bugs and Feature requests can be reported using the issues tracker. Please read the issue guidelines before posting.
Features
Dynamically Load Theme Name
The plugin will pull in a list of the latest themes from Bootswatch. This will populate a select
or ul
element with a list of themes to choose.
Switch the Bootstrap Theme
The dynamically loaded themes will automatically switch the theme when chosen.
Saves theme to a cookie
Takes the selected theme information and saves it to a cookie to reload later
Loads a theme from a cookie
Loads a previous saved theme from a cookie
Requirements
Mandatory requirements
- jQuery v1.11+
- jQuery Cookie plugin
License
Released under the MIT license.
Usage
Clear
$(selector).bootstrapThemeSelector('clear');
Empties/removes the loaded ul
or select
element theme names
Destroy
$(selector).bootstrapThemeSelector('destroy');
Removes any reference to the bootstrapThemeSelector, empties the loaded control and removes the events.
LoadThemeFromCookies
$(selector).bootstrapThemeSelector('loadThemeFromCookies');
Checks for the presence of the theme cookie and loads that theme. options
can be passed in to change the default cookies, path, etc.
switchTheme
$(selector).bootstrapThemeSelector('switchTheme', themeName, cssFile);
Loads a theme with the given cssFile
. If the cssFile is undefined
, the default bootstrap theme will be loaded from a CDN. You can use this option to load your own custom theme.
Update
$(selector).bootstrapThemeSelector('update');
Refreshs the theme list for the provided selector
Examples
Setup an UL
or SELECT
with the id of #ThemeSelect
with a list of themes
// Setup the theme selectors
$('#ThemeSelect').bootstrapThemeSwitcher();
Change the theme
// Change the theme
$().bootstrapThemeSwitcher('switchTheme', 'default', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
Load the previously saved theme from the site cookie
// Load the previously selected theme from the cookies
$().bootstrapThemeSwitcher('loadThemeFromCookie');
Plugin Options
Bootstrap Theme Switcher can be set globally by setting the $.bootstrapThemeSwitcher.defaults
object or individually for each call to $.bootstrapThemeSwitcher()
by
passing a plain object to the options arguement. Per-call options over the default options.
cssThemeLink
cssThemeLink: 'bootstrapTheme'
The ID used for the bootstrap theme css file
saveToCookie
saveToCookie: true
If true, a cookie will be saved with the currently selected theme
cookieThemeName
bootstrapTheme.name
The name of the cookie to be used to store the theme name
cookieThemeCss
cookieThemeCss: 'bootstrapTheme.css'
The name of the cookie to be used to store the css file used for the theme
cookieExpiration
expires: 7
The number of days the cookies should expire
cookiePath
cookiePath: '/'
The path the cookie should be stored
defaultCssFile
defaultCssFile: '//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'
The default css file the plugin should use if it can not load the themes from Bootswatch
bootswatchApiUrl
bootswatchApiUrl: 'http://api.bootswatch.com'
The url for the bootswatch api
bootswatchApiVersion
bootswatchApiVersion: '3'
The version of the bootswatch api to use.
localFeed
localFeed: ''
The path to a JSON file that contains the themes you want to use. If this parameter is used, the control will be loaded the themes from here and not go to the bootswatchApiUrl. A sample of the json file can be found at themes.json
excludeBootswatch
excludeBootswatch: ''
Comma seperated list of BootSwatch names (e.g. Slate,Yeti) that should be excluded from the rendered <ul> or <select>