The Theme Editor tool provides a simple and easy way to edit CSS files used by Tersus applications.
- theme.css - A spacial rule file containing all the rules created by the user through the Theme Editor.
- Rule - A CSS Rule is made up of a selector and a declaration.
- Selector - Specifies which element(s) will be affected by the declaration.
- Declaration - The part of the rule inside the curly braces in a CSS file contains properties. Each property is composed of a name and a value, separated by a colon. It tells a browser how to draw an element affected by the rule.
Clicking once on an element shows the rules that affect it and its Tersus details in the Editor pane.
The rules are presented in the same order as in the CSS files. Each rule has a color, which indicates edit-ability. Editable rules, colored in blue, are those that come from theme.css file. Non-editable rules are colored in gray.
When there is more than one rule with the same selector and the same property name, only the last occurrence of each property can take affect. Earlier occurrences are overridden are display with a strikethrough font ().
Adding, Deleting and Editing Properties
If you click property of an editable rule, text box appears and let you modify the property's name and value. Changes are applied immediately. Typing a property name displays a list of properties whose names match the typed text. If you double click a non-editable property a corresponding editable property is created (if needed), and will get focus so it's ready to be edited.
The Tab key can be used to move from one property to the next. If the current property is the last in the rule, a new property is added at the end. If the property name and value are both cleared, the property and the row itself are removed.
Choosing an Existing Theme from a Tersus Theme List
The Tersus platform contains several pre-defined themes that you can use as a starting point for your design. If you choose one of these themes, youe existing design is deleted (replaced by the selected theme).
To choose a pre-defined theme, click the 'Choose Theme' button () in the Theme Actions toolbar. A dialog box opens and a list of themes is displayed on screen. Choose your favorite theme, and click the 'OK' button.
Preview of a Application with Your Changes
Theme Editor enables you to edit your application's theme while watching the results immediately in the View pane.
There are two modes for the View pane:
- Edit Mode - (The default mode) Neutralizing the application. Allows you to select an elements and edit their style.
- View Mode - Using the application as it is. This is useful if you need to interact with the application in order to show up display elements that you want to design.
Tersus Details Pane
Located in the bottom of the editor pane, this pane displays the Tersus details of the selected element (if they exits*).
There are four fields in the pane:
- Model Name - The element's Tersus model name. Clicking its value opens the model of a selected element in the Tersus studio.
- Element Name - The Tersus element name.
- Plugin - The tersus plugin being used.
- Path - The path of the element relative to the containing view.
* Tersus details pane is empty, when the selected element doesnot correspond directly to a specific element in the model.
Element Hierarchy Bar
The Element Hierarchy bar displays the element's HTML tag hierarchy starting at the HTML root tag and down to the selected element's tag. The selected element's tag appears in bold font.
When moving the mouse over an element in the hierarchy bar, the element is highlighted and the user can see its box shaded in the Application pane.
By clicking an element, it becomes the selected element, and the editor pane shows its rules and details.
For iPhone application development, two different display views are available :
- Desktop view - The default view
- iPhone view - Presents the application in its iPhone look and feel. Clicking the iPhone button () in top of the page switches the view to horizontal/vertical iPhone look accordingly to the presented icon.
Changing the view by choosing an item from the Views Chooser button on the top left corner of the screen. If you have some unsaved changes, a dialog box is opened and you can select whether to saving the changes, not save (current changes will be lost) or to cancel.
* The option to change views is only available for iPhone application development.