Themes Demos

The foobar comes with 5 built-in button themes. To change the theme all your need to do is set 1 option:

display.theme.bar

triangle-arrow | long-arrow | small-white-arrow | x-close | x-white


$foobar({
  "display": {
    "theme": {
      "bar": "triangle-arrow"
    }
  }
});

triangle-arrow

$foobar({
  "display": {
    "theme": {
      "bar": "long-arrow"
    }
  }
});

long-arrow

$foobar({
  "display": {
    "theme": {
      "bar": "small-white-arrow"
    }
  }
});

small-white-arrow

$foobar({
  "display": {
    "theme": {
      "bar": "x-close"
    }
  }
});

x-close

$foobar({
  "display": {
    "theme": {
      "bar": "x-white"
    }
  }
});

x-white

You can also set the theme to a custom theme. All you need is follow these steps:

  1. create a single png sprite image that has all the states of the buttons
  2. add some custom CSS to your page (BEFORE jquery.foobar.2.0.css)
  3. set display.theme.bar option to your new theme's css class name

display.theme.navigation

triangle-arrow | long-arrow | small-white-arrow | x-close | x-white

This option was added to allow seperate theming of the navigation buttons. By default they will inherit the style of the bar theme but you can specify that the navigation buttons use a different theme, so you can mix and match the themes as you like.


$foobar({
  "display": {
    "theme": {
      "bar": "long-arrow",
      "navigation": "x-white"
    }
  }
});
navigation