Theme Prefixing

Theme Prefixing

The flex framework adds a few basic css classes to every widget on your page by default. There are three primary classes that can be used to target your widgets with css.
  • flex-widget This class is assigned to the container element of every widget.
  • flex-widget-widgetname This class is assigned to the container, and varies depending on the widget name.
  • fw-theme-default This class is assigned to the container, and varies depending on the "theme" setting.

As mentioned, every widget that you add to your page includes a theme class which is controlled by the theme setting used when creating the widget. By default, if you do not specify a "theme" setting, the framework will use the default css prefix of fw-theme-default on the widget container.


Default Theming Example:
<div data-bbflex="widget:playbar"></div>
Will produce a widget with a container which looks like the following:
<div class="flex-widget flex-widget-playbar fw-theme-default"></div>

Custom Theming Example:
<div data-bbflex="widget:playbar,theme:customized"></div>
Will produce a widget with a container which looks like the following:
<div class="flex-widget flex-widget-playbar fw-theme-customized"></div>
And you can target elements in this widget specifically:
.flex-widget-playbar.fw-theme-customized {
  /* style rules to apply to the widget container itself */
}
.flex-widget-playbar.fw-theme-customized div.element {
  /* style rules to apply to div's with the "element" class */
}