Skip to main content
MediaBeacon University

Themes

Themes control the look and feel of the MediaBeacon interface. The Theme Manager lets administrators create custom CSS and upload images that can then be applied to workspaces to change their appearance.

Theme_1.png

MediaBeacon's default themes appear in the "Theme Templates" section on the left. The actual CSS code is in the center and the associated images are on the right in the "Media Browser."

To create a new theme, click "Add Theme" in the lower left. New themes can be renamed by double-clicking.

Theme_2.png

To upload images for use in the theme, click "Add Image." Images can also be uploaded by dragging and dropping into the Media Browser.

Theme_3.png

Theme_4.png

Now paste the desired code into the center CSS window. To add an URL reference to one of the uploaded images, simply double-click the image or else drag it into the center window.

Theme_5.png

Click "Preview Theme" to see how the current workspace will look when the theme is applied. In this example, the CSS hides menubars and gives widgets a white, rounded look. Click "Return" to go back to the Theme Manager and save changes.

Theme_6.png

New themes can be applied to entire workspaces by clicking on "Manage Workspace" in the Admin Menu and going to the "Themes" section. Choose the desired theme and click "Done."

Theme_7.png

Theme_8.png

The theme has now been applied to the workspace.

Adding a Custom Banner

A custom banner can be added via CSS in the Theme Manager. After uploading the banner in the Theme Manager, use the starter CSS below to customize its appearance.

.banner-overall {
  background-image:url(the image url);
  background-position:top left;
  background-repeat:no-repeat;
  padding-top:[height of banner]px;
}
  • Was this article helpful?