To create a new desktop 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 offers two desktop base themes (the themes that are available for cloning):

• claro - A visual rich CSS theme for Dojo's Dijit widget set.
• sketch - A CSS theme that provides pseudo hand-drawn styling for various Dijit widgets.

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

To edit an existing desktop 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 desktop theme editor allow you to adjust styling on a global basis (i.e., styling changes that apply to multiple widgets). There are two global styling sections:

• Generic text
• Global background and border

This part of the desktop theme editor allows widget-specific changes to CSS themes for various primitive widgets.

This part of the desktop theme editor allows widget-specific changes to CSS themes for various container widgets.

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 Dialog widget. (The sub-widget selection control is on the right side of the image.)