In MediaBeacon 7.x, the ability to attach CSS Themes to widgets was upgraded to the more-flexible ability to add a CSS class to any given widget. This guide will show how to implement this efficient method of interface customization. While there are a number of differences in element structure between 6.x and 7.x, this guide will focus on condensing widget themes for use in a single main Theme.
Below is an example of the CSS in a 6.x Widget-level Theme. When applied to a widget, this Theme would keep the widget at least 500 pixels wide, make the content area blue and apply a background image from the Theme's Media Browser
To properly target a widget with unique CSS Theming, first create a new class to identify the widget, so it can be targeted, In this case, "minblue". Apply it to the CSS Class field in the Widget View Preferences, then save the widget's configuration.
Step 2: Copy CSS & Media Assets
Once the widget(s) have been classed, append the old Widget Theme CSS into the Theme of the workspace that the target widget resides upon. If any images are referenced in the Widget Theme's Media Browser, these must be added to the Main Theme's Media Browser,
Step 3: Update CSS with Widget Class
To make the older CSS pertain only to the new widget begin by determining if any classes are resident upon a widget's root element. All widgets in MediaBeacon have the class "BaseWidget-root" on the root element, and also a unique widget root class, such as "DirectoryTree-root". When "minblue" is applied to the widget, the widget's root element looks like this: