Scalar Media

Media in Scalar are bounded by three elements: a header, border and footer. The header contains the title of the media, the footer contains the "Details" button and the border frames the media.

Background Color for Scalar Media

CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red).  Thus, for example, to change the background color of the header for Scalar media to red using a predefined color, one needs to begin by declaring the selector for the media header (.mediaElementHeader), the property they wish to modify (background-color) and then declare the value red:


To change the background color of the footer for Scalar media to black using a hexadecimal value, one needs to begin by declaring the selector for the media footer (.mediaElementFooter), the property they wish to modify (background-color) and then declare the value #000000 (the hexadecimal code for black):


And to change the background color of the border for Scalar media to bright blue using an rgb value, one needs to begin by declaring the selector for the media container (.mediaContainer), the property they wish to modify (background-color) and then declare the value rgb(0,0,255) (the rgb code for bright blue):

Title for Scalar Media

To change the font size of the title shown for Scalar media in the media header, one needs to start by declaring the selector for the media header (which contains the text for the title) (.mediaElementHeader), the property they wish to modify (font-size) and then declare the value of the font size in pixels:

Changing Elements in Media "Details" View

Details view of media is offered to viewers who click the "Details" button located just underneath Scalar media. The details view contains a sidebar where viewers can choose, via tabs above, to access a description, annotations and metadata on the piece of media displayed.

Font Size for Media Description

To change the font size for text in the description sidebar in media “Details” view, one would start by declaring the selector for the media sidebar in description mode (.mediaElementSidebarDesc), the property they wish to modify (font-size) and then declare the value of the font size in pixels of points.

Line height does not change the height of the text, but rather the amount of vertical space between lines of text. Thus, for example, if your line height and font size are equal, there will be no space between your lines of text. However, if your line height is set 10 pixels higher than your text, there will be exactly 10 pixels of vertical space between your lines of text. CSS accepts several values for the line height of text. The two most commonly used values are pixels and percentage. The latter designates the line height as a percentage of the current font size. To change the line height for text in the description sidebar in media “Details” view, one would start by declaring the selector for the media sidebar in description mode (.mediaElementSidebarDesc), the property they wish to modify (line-height) and then declare the value of the height in pixels or percentage (of the font in use): 

Comment on this page