On the Design Wizard page, in the Selector list, you can choose one of the categories or sub-categories of style properties, and set the related properties. You can select only one category at a time. When you choose a category, the edit controls are enabled. The available controls depend on your selection.
Some properties have a Browse button that opens a selection dialog, such a font or policy list, where you can choose values. Note that references to policies, if entered manually, must be enclosed in the mcs-component-url('URI') function, e.g. mcs-component-url('/images/logo.mimg').
Some controls allow you to set a numeric value and a unit of measure. The units allowed include pixel, em, pica, point, cm, mm, %.
All categories contain the value 'inherit' as an option. 'Inherit' means that the value of this property will be inherited automatically for the containing XDIME element.
All the properties in a category have a checkbox that you can use to set or unset the CSS !important value for the property. You can use !important to override default browser or user settings on a device.
Not all browsers comply with this CSS feature. The MCS device repository contains settings to rectify this problem where it is known.
On the Design CSS page you can define one of the categories or sub-categories of style properties, and set the related properties using CSS.
You can use the mcs-transcodable-url('URI') function to allow rewriting of image URLs for MAP. The url('URI') function can be used to define a device dependent mime type as the value of a property. The mcs-component-url('URI') function allows you to specify an MCS policy as the value of a property.
Lengths refer to horizontal or vertical measurements. The format of a length value represented by <length> in the option column is a number immediately followed by a unit value. Length units may be one of the following: mm, cm, in, px, pc, em, ex, pt. The format of a percentage value represented by <percentage> in the option column is a number immediately followed by '%'.
Some CSS properties can be set with 'shorthand' values. For example, although you can set the border width properties of a table individually, it is also possible to set all four width values with the single shorthand statement, border-width: 1px;. In these cases the Design Wizard uses a single category, and displays an All control where you can set the value, as well as the individual properties.
Other controls combine pairs of properties, for example horizontal and vertical positions. If you set one value in a pair to 'Inherit' MCS sets the other value to 'Inherit' as well.
Another combination is where you need to set a numeric value and the unit of measurement, for example, an amount for spacing and the unit as '50 pixels'. In these cases the Design Wizard displays two drop-downs.
Not all devices support multiple classes on elements, so if you apply more than one class to a given element in a theme, you may get unexpected results.
MCS supports cascading of stylesheets across multiple themes, i.e. a single XDIME page can link to multiple themes and the standard CSS cascade mechanism will be applied across all of them. You can use !important to override default browser or user settings on a device, and 'Inherit' to automatically inherit the value of a property from the parent XDIME element. The order and priority of style rules are significant. For example, let's consider a case where an XDIME page uses two different theme policies: theme1.mthm and theme2.mthm. The page contains an anchor element with the id attribute set to 'special'.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
<head>
<title>styles</title>
<link rel="mcs:theme" href="/xdime-2/theme1.mthm"/>
<link rel="mcs:theme" href="/xdime-2/theme2.mthm"/>
</head>
<body>
<div>
<p>
<a id="special" href="http://www.antennasoftware.com" title="Antenna Software">click me!</a>
</p>
</div>
</body>
</html>Let's assume theme1.mthm specifies the following style rule:
#special {
color: red;
background-color: blue !important;
font-family: monospace !important;
}The theme2.mthm policy defines a global rule for anchor elements.
a {
color: green;
background-color: yellow;
font-family: serif !important;
}As a consequence, the following styles will be applied to the anchor element.
a {
/* color from theme2.mthm overrides theme1.mthm */
color: green;
/* background-color from theme1.mthm as !important cannot be overridden */
background-color: blue;
/* font-family from theme2.mthm as !important overrides everything */
font-family: serif;
}