Style node

The Style node gives the list of CSS files
Helped by the Style API that read CSS files you can change the appearance of your application (skins, preferences...). Style node and CSS files are not available for tiny widgets.
By convention, there is one CSS file per style. And it is stored into the style directory: "MyProject/styles/MyStyle/mystyle.css".
In the app.properties file at root of your project, the line style defines which style to use. For example we should set style=MyStyle.
To access the CSS file, your main scene does reference a VRML node Style with the path to the CSS file (relative to MyProject/styles/MyStyle). For example we should write Style { url "mystyle.css" }.

A default CSS file is already included in the SDK to handle default values that you can override in your own CSS file. This file is named "default.css" and should always be included as the first CSS file in the Style node.

The order of the CSS files in the url is important: the first CSS file is the most general. The next CSS files can override values defined by a previous CSS file.

Warning:
if your are developing a widget (not a standalone Memo application), your should not include "default.css" as it is already handled by the Mobile Widgets application.

Note:
Before using CSS, read chapter about CSS support in MeMo.

MFString url [] :
A list of CSS files to configure the appearance of the application. If the list contains more than one CSS file, all CSS data will be searched into the CSS file most to the right and then, if not found, try the CSS file one step left until the first file of the url (that should be default.css for Mobile Widgets application).

When the developer specializes a Prototype in another Prototype (for example : Alert.wrl specialize Slider.wrl), the CSS file should look like the following :

• Alert {} // CSS Node for Alert prototype
• Alert-title {} // Subset of Alert prototype
• Alert-message {} // Another subset of Alert prototype
• Alert-Slider {} // customization of Slider prototype by Alert prototype

The CSS Node for Alert should show that it specializes the Slider prototype : Node Name = "Alert-Slider" and have the same elements that the Slider CSS Node.
The difference is made between Specialization (named : "Node-Spe", with first letter of specialization in upper case) and Subsets (named "Node-subset", with first letter in lower case).

MyProject/src/main.wrl:

In standard MemoSDK, you can use a light mode that is standard MemoSDK without background images for title/softkeyx etc). Don't confuse with ultra light mode that is not based on the standard MemoSDK but on a ultra light version of MemoSDK.
To switch to light mode, use the CSS node Common and set the light boolean to true. light attribute is global to one application (per style).
Example (into CSS file) :

This example shows how to include two CSS files: "default.css" and "myStyle.css".
The "myStyle.css" will override values from the "default.css" style.