Styles

Styles define the various elements of the way something will be presented to the user during Xephr® Runtime, such as font, size, color, and border.  Styles are used to define the presentation of all entities and their objects and are assigned to link styles to define the presentation of hyperlinks.  Styles cascade to determine which style is used.  

Styles can also be based off of other styles, inheriting all of the parent style's features, with only a few differences.  This makes styles easier to maintain as you can change a property at the top level parent style, thereby changing all styles that inherit from that style as well.

User defined styles can also be set up.  See User Styles.

See Also

User Styles

Style Cascading for Objects

Using the Color Selector

Creating/Modifying Styles

Finding Where Styles Are Used

Style Cascading for Objects

Styles can be assigned to different levels of objects for an entity.  There are three different sets of styles that are assigned at one or more of these levels: body style, link style, and field style.  Body style determines the presentation of the blocks and entities.  Field style determines the presentation of the fields.  Link style determines the presentation of the hyperlinks.

Fields
Blocks
Entities
Templates
Determining Where the Style is Defined

  

Using the Color Selector

The color selector has 3 tabs that allow you to select the exact color that you want to apply to your foreground,background, or border.

The first tab is the Swatches tab.  This tab displays a selection of colors from which you can select your desired color.  The currently selected color is displayed in the preview pane at the bottom.  

Click on a color to select it.  When the desired color is selected, press the [Ok] button to return the color to the property from which the selector was opened.

Pressing the [Reset] button will reset the selected color to the one that was selected when you opened the selector.

Pressing the [Cancel] button will return you to the Xephr Studio without returning a color.

The second tab is the HSB tab.  This tab displays a pallet in which you can define your desired color.  The currently selected color is displayed in the preview pane at the bottom.

When the desired color has been defined, press the [Ok] button to return the color to the property from which the selector was opened.

Pressing the [Reset] button will reset the selected color to the one that was selected when you opened the selector.

Pressing the [Cancel] button will return you to the Xephr Studio without returning a color.

The HSB color model is the one that most closely resembles the human perception of color. It is made up of Hue, Saturation and Brightness.  The numbers in the H,S, and B fields here define the color displayed in the preview block.  The radio button selected determines the what the color pallet on the left the selector screen is displaying.

The R,G, and B fields display the red, green, and blue color values for this HSB definition.  For more information on RGB colors, see the information on the RGB tab.

Hue
Saturation
Brightness

The third tab is the RGB tab.  This tab displays a set of sliding numeric scales which you can use to define your color using the RGB color model.  The currently defined color is displayed in the preview pane at the bottom.

When the desired color has been defined, press the [Ok] button to return the color to the property from which the selector was opened.

Pressing the [Reset] button will reset the selected color to the one that was selected when you opened the selector.

Pressing the [Cancel] button will return you to the Xephr Studio without returning a color.

The RGB color model is the color model of computers. Computer monitors and digital cameras use these colors to create all the colors seen on the monitor and saved in files. Green gives the color green, but is also used for contrast control. RGB as used on a color display monitor is also an emitted color set, which may view differently than when printed.

Red, green, and blue each have their own sliding scales to define the intensity of the color from 0 to 255.  To get the color black, the values will all be set to 0 and to get the color white, the values will all be set to 255.

Creating/Modifying Styles

  1. In the Explorer Tree, select and the Style Information object.

  2. There are options creating a style at this point.

  1. The style will be generated and displayed in green on the Explorer Tree. The Property Sheet will be displayed for the new style. Style properties will either be displayed in Alphabetical or Logically, depending on the setting of the [Sort Alphabetically/Logically] button.  The following instructions are assuming that the properties are sorted logically.

  2. In the Name property, enter a user-defined name for the style.

  3. In the Description property, enter a user-defined description for the style.

  4. The Inherits From property displays the style from which the properties the new style default.  If this is a top-level style, this property displays (none).  You cannot change this property, but if you wish to change the parent of a style, you can drag and drop the style object to its new parent within the Explorer Tree.

  5. In the BG Image property, if you have an image that you wish to be displayed as the background for this style, enter the path to this image from the Xephr server.

  6. In the Background Inherited property, select true or false to determine whether the background for the style will be inherited from the style's parent style.  This property is only displayed for styles with parent styles.

  7. In the Background property, the selected color for the background for this style is displayed.  The property is displayed when the Background Inherited property is set to false or the style is a top-level style with no parent style.  To change the color, double-click on the color.  See the Using the Color Selector section for information on choosing your color.

  8. In the Foreground Inherited property, select true or false to determine whether the foreground text for the style will be inherited from the style's parent style.  This property is only displayed for styles with parent styles.

  9. In the Foreground property, the selected color for the foreground text for this style is displayed.  The property is displayed when the Foreground Inherited property is set to false or the style is a top-level style with no parent style.  To change the color, double-click on the color.  See the Using the Color Selector section for information on choosing your color.

  10. In the Font Name property, select the name of the font that you wish to apply to the foreground text for this style.  For styles with parent styles, you can set this pop-list to (from parent) to have the font determined by the parent style.

  11. In the Font Size property, select the size of the font that you wish to apply to the foreground text for this style.  The font size is defined in points.  For styles with parent styles, set this pop-list to (from parent) to have the font determined by the parent style.

  12. In the Bold property, select true or false to determine whether the foreground text for this style will be bold.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  13. In the Underlined property, select true or false to determine whether the foreground text for this style will be underlined.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  14. In the Italics property, select true or false to determine whether the foreground text for this style will be displayed in italics.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  15. In the H-Align property, select the horizontal alignment for the foreground text for this style.  Choices are Left Justified, Centered, and Right Justified.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  16. In the V-Align property, select the vertical alignment for the foreground text for this style.  Choices are Top Aligned, Middle Aligned, and Bottom Aligned.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  17. In the Border Type property, select the type of border to be applied to objects assigned this style.  Choices are No Line or Solid Line.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  18. In the Border Color Inherited property, select true or false to determine whether the border for the style will be inherited from the style's parent style.  This property is only displayed for styles with parent styles.

  19. In the Border Color property, the selected color for the border for this style is displayed.  The property is displayed when the Border Color Inherited property is set to false or the style is a top-level style with no parent style.  To change the color, double-click on the color.  See the Using the Color Selector section for information on choosing your color.

  20. In the Border Size property, select the size of the border to be applied to objects assigned this style.  Choices are No Border, Thin, Medium, and Thick.  For styles with parent styles, set this pop-list to (from parent) to have the setting of this property determined by the parent style.

  21. In the Created on property, the date and time on which the style was created is displayed and cannot be changed.

  22. In the Modified on property, the date and time on which the style was last changed is displayed and cannot be changed.

  23. When all changes have been made, press the [Save] button on the main toolbar.

Finding Where Styles Are Used

Styles have an additional selection on the right-click menu called Find Where Used.  This feature allows you to view the entities, blocks, and fields on which a specific style is used.

  1. Expand the Style Information object and expand each style until you can select the style for which you wish to view the objects that use the style.

  2. Right click on the desired style to display the right-click menu.

  3. Left click on the Find Where Used option.

  4. A screen will be displayed, showing the where-used information.

  5. When you are done viewing the where-used information, click on the Ok button at the bottom of the screen.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.