To create a new mobile theme, press on the "Create" menu and choose "Theme...". This will bring up a dialog where you pick an existing theme to clone, and provide a name for the cloned theme.

Maqetta's base themes (the themes that are available for cloning) are the same mobile themes that ship standard with Dojo 1.8:

• android - A CSS theme that styles Dojo Mobile widgets to look like and behave like Android native controls.
• blackberry - A CSS theme that styles Dojo Mobile widgets to look like and behave like Blackberry native controls.
• iphone - A CSS theme that styles Dojo Mobile widgets to look like and behave like iPhone native controls.
• ipad - A CSS theme that styles Dojo Mobile widgets to look like and behave like iPad native controls.
  
  
• custom - A generic CSS theme designed to allow straightforward transformation into a company-specific, cross-platform mobile CSS theme.

After clicking on the Create button on the Create Theme dialog, Maqetta will clone the theme you specified, and open up the Maqetta mobile theme editor on your new CSS theme. (The image below shows how the mobile theme editor will look after cloning the custom theme.)

To edit an existing mobile theme, press on the "Open" menu and choose "Theme Editor...". This will bring up a dialog where you pick an existing theme to edit.

After clicking on the Open button on the Open Theme dialog, Maqetta will open up the Maqetta theme editor on your CSS theme.

You can click on Save to save the currently open theme.

Undo and redo commands

The various Properties palettes (Layout, Padding, Margins, Background, etc) are where you can change styling for particular widget types. The various sections are:

• Layout - Various CSS properties in the general area of layout. Includes CSS properties regarding size (e.g., 'width' and 'height') and location (e.g., 'left' and 'top'). Also includes CSS properties such as 'position', 'display', 'float', 'overflow' and 'opacity'.
• Padding - CSS padding properties, including the 'padding' shortcut and the specific properties 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left'.
• Margin - CSS margin properties, including the 'margin' shortcut and the specific properties 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left'.
• Background - CSS background properties. The "..." buttons can be used to bring up the Background dialog, which allows picking background image and defining gradients.
• Border - CSS border properties.
• Fonts/Text - CSS properties having to do with text styling.
• SVG - CSS properties that only apply to SVG content. These properties typically are used only for widgets from the Drawing Tools section of the Palette.

With the theme editor, you can apply different CSS style rules for different interactive states (Normal vs Disabled vs Selected etc). The States palette allows you to change the current interactive states.

The top sections of the mobile theme editor allow you to adjust styling on a global basis (i.e., styling changes that apply to multiple widgets). There are three global styling sections:

• Page background and fonts
• Heading background
• Button background

The bottom part of the mobile theme editor allows widget-specific changes to CSS themes. The mobile theme editor organizes widgets using a TabContainer with the following three panes:

• Headings and TabBars
• Rects & Lists
• Controls

Some widgets offer CSS styling control on different parts ("sub-widgets") of the given widget. The image below shows the sub-widget selection control for the ListItem widget. (The sub-widget selection control is on the right side of the image.)