KB294388744: MediaBeacon - Converting 6.x Themes to 7.x

Description

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.

Procedure

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

/*Minimum-Width Blue Widget Theme */
.BaseWidget-root { 
min-width: 500px; 
}
.BaseWidget-content {
background-color: #ABCDEF;
background-image:url(images/back1.png);
}

Step 1: CSS Class on A Widget

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:

<div class="minblue BaseWidget-root DirectoryTree-root">...</div>

So, in CSS, to target the root class (a multiclass selector), ensure that "minblue" is concatenated with the base class selector, no space between the selectors.:

.minblue.BaseWidget-root {}

In the case of elements that are nested in the root element, the class is not treated as a multi class selector:

<div class="minblue BaseWidget-root DirectoryTree-root">
     <div class="BaseWidget-content">...</div>
...<.div>

This is selected by the following; note the space between the selectors:

.minblue .BaseWidget-content {}

Here is the final CSS that would be appended to the Main Theme, from the above example.

/*Minimum-Width Blue Widget Class (append to Main Theme) */
.minblue.BaseWidget-root { 
min-width: 500px; 
}
.minblue .BaseWidget-content {
background-color: #ABCDEF;
background-image:url(images/back1.png);
}