Style Element (Data)

Context: HL Kit … Kit Reference … Structural File Reference 

The "style" Element

All of the basic visual look and behaviors of portals is encapsulated in a collection of styles. Each distinct category of portal has its own type of style, and you can only associate styles with portals of the corresponding type. Each separate style is specified through the use of a "style" element. The complete list of attributes for this element is below.

id	Id – Specifies the unique id of the style. This id is used in all references to the style.
border	(Optional) Id – Identifies the border to used in conjunction with this style. All portals may have a border drawn around them, and the border is controlled via the style. You can specify the unique id of the border to use or "none" to indicate no border. Default: "none"

The "style" element also possesses child elements that define the specifics of the style. The list of these child elements is below and must appear in the order shown. Click on the link to access the details for each element.

IMPORTANT! With the exception of the "resource" element, exactly one of these child elements may be specified for each style. If multiple are given, a compiler error will be reported. The chosen child element dictates the type of style that is being defined. You may include as many "resource" elements as you wish after the single child element that specifies the style.

style_label	An optional "style_label" element may appear as defined by the given link. This element specifies the details of a style for use with label portals.
style_image	An optional "style_image" element may appear as defined by the given link. This element specifies the details of a style for use with image portals.
style_edit	An optional "style_edit" element may appear as defined by the given link. This element specifies the details of a style for use with edit portals.
style_checkbox	An optional "style_checkbox" element may appear as defined by the given link. This element specifies the details of a style for use with checkbox portals.
style_menu	An optional "style_menu" element may appear as defined by the given link. This element specifies the details of a style for use with menu portals.
style_action	An optional "style_action" element may appear as defined by the given link. This element specifies the details of a style for use with action portals.
style_incrementer	An optional "style_incrementer" element may appear as defined by the given link. This element specifies the details of a style for use with incrementer portals.
style_chooser	An optional "style_chooser" element may appear as defined by the given link. This element specifies the details of a style for use with chooser portals.
style_region	An optional "style_region" element may appear as defined by the given link. This element specifies the details of a style for use with region portals.
style_table	An optional "style_table" element may appear as defined by the given link. This element specifies the details of a style for use with table portals.
style_separator	An optional "style_separator" element may appear as defined by the given link. This element specifies the details of a style for use with separator portals.
style_special	An optional "style_special" element may appear as defined by the given link. This element specifies the details of a style for use with special portals.
style_output	An optional "style_output" element may appear as defined by the given link. This element specifies the details of a style for use with output portals.
resource	Zero or more "resource" elements may appear as defined by the given link. This element specifies new resources that are used in conjunction with the style.

Colors in Styles

Many styles allow you to directly specify a color value in the format "xxxxxx". The format for the color uses standard HTML color syntax, with each character representing a hexadecimal digit. The first two characters define the Red color value, the next two Green, and the last two Blue. For example, the color "ff0080" specifies a Red value of "ff", a Green value of "00", and a Blue value of "80".

For additional details on specifying colors via the HTML syntax, please refer to one of the many websites that provide this information, such as http://www.w3schools.com/Html/html_colors.asp.

Scaling of Images

When encoded text is supported within a category of portal, you will typically be given control over the scaling of images within the corresponding style. When enabled, image scaling is applied to all bitmaps that are inserted into the encoded text that is rendered into the portal. The scaling ratio is based on the difference between the initial font size for the portal and the current font size at which the text is now being rendered. Scaling is valuable for when you want to ensure that the bitmaps remain proportionally sized relative to the font size of the text, which is important when text and bitmaps are interleaved within the encoded text.

The "style_label" Element

The "style_label" element defines the facets of a style for label portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
background	(Optional) Id – Unique id of the bitmap resource to use as the background. If omitted, the text is drawn transparently on the existing background region. Default: Empty.
alignment	(Optional) Set – Specifies how the text should be horizontally aligned within the portal width. Must be one of these values: left – Text is left-aligned. center – Text is centered within the portal. right – Text is right-aligned. Default: "left".
ispattern	(Optional) Boolean – Indicates whether the background bitmap should be centered within the portal dimensions or tiled to fill the entire portal. Default: "yes".
scaleimage	(Optional) Boolean – Indicates whether bitmaps included within encoded text are scaled (see above). Default: "no".

The "style_image" Element

The "style_image" element defines the facets of a style for image portals. Since image portals simply contain the image and nothing else, there are no special attributes for this element.

The "style_edit" Element

The "style_edit" element defines the facets of a style for edit portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
backcolor	(Optional) Text – Color value to be used as the background in the format "xxxxxx" (see above). If omitted, the "backcolorid" attribute must be specified. Default: Empty.
backcolorid	(Optional) Id – Unique id of the color resource to be used as the background. If omitted, the "backcolor" attribute must be specified. Default: Empty.
placeholdercolorid	(Optional) Id – Unique id of the color resource to be used for the placeholder text. If omitted, the system "Disabled" color will be used.
alignment	(Optional) Set – Specifies how the text should be horizontally aligned within the portal width. Must be one of these values: left – Text is left-aligned. center – Text is centered within the portal. right – Text is right-aligned. Default: "left".
autoselect	(Optional) Set – Indicates whether to automatically select the entire text contents of the portal when it gains the focus. Must be one of the following: yes – Contents are always automatically selected when focus is gained. no – Contents are never selected when focus is gained. default – Default handling is performed. If the edit portal contains a numeric field, the contents are automatically selected, but no selection is performed for text-based fields. Default: "default".
itemborder	(Optional) Id – Unique id of the border resource to draw around each individual edit cell for an "edit_date" portal. If "none", no border is drawn. Default: "none". NOTE! An "edit_date" portal can be assigned either an item border or a border around the entire portal, but never both.
septext	(Optional) Text – Specifies the text to be drawn between each individual edit cell for an "edit_date" portal. Default: "/".
sepfont	(Optional) Id – Unique id of the font resource to be used for drawing the separator text between individual cells for an "edit_date" portal. If empty, the resource specified by the "font" attribute is assumed. Default: Empty.
sepcolor	(Optional) Text – Color value to be used for drawing the separator text in the format "xxxxxx" (see above). If omitted, the "sepcolorid" attribute must be specified. Default: Empty.
sepcolorid	(Optional) Id – Unique id of the color resource to be used for drawing the separator text. If omitted, the "sepcolor" attribute must be specified. Default: Empty.

The "style_checkbox" Element

The "style_checkbox" element defines the facets of a style for checkbox portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
scaleimage	(Optional) Boolean – Indicates whether bitmaps included within encoded text are scaled (see above). Default: "no".
check	(Optional) Id – Unique id of the bitmap resource used to indicate the box is checked. If omitted, a default bitmap it used. Default: Empty.
checkoff	(Optional) Id – Unique id of the bitmap resource used to indicate the box is checked when the portal is disabled. If omitted, a default bitmap it used. Default: Empty.
uncheck	(Optional) Id – Unique id of the bitmap resource used to indicate the box is not checked. If omitted, a default bitmap it used. Default: Empty.
uncheckoff	(Optional) Id – Unique id of the bitmap resource used to indicate the box is not checked when the portal is disabled. If omitted, a default bitmap it used. Default: Empty.

The "style_menu" Element

The "style_menu" element defines the facets of a style for menu portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
backcolor	(Optional) Text – Color value to be used as the background in the format "xxxxxx" (see above). If omitted, the "backcolorid" attribute must be specified. Default: Empty.
backcolorid	(Optional) Id – Unique id of the color resource to be used as the background. If omitted, the "backcolor" attribute must be specified. Default: Empty.
selecttext	(Optional) Text – Color value to be used for drawing text of the selected item when the menu is "dropped" in the format "xxxxxx" (see above). If omitted, the "selecttextid" attribute must be specified. Default: Empty.
selecttextid	(Optional) Id – Unique id of the color resource to be used for drawing text of the selected item when the menu is "dropped". If omitted, the "textcolor" attribute must be specified. Default: Empty.
selectback	(Optional) Text – Color value to be used as the background of the selected item when the menu is "dropped" in the format "xxxxxx" (see above). If omitted, the "selectbackid" attribute must be specified. Default: Empty.
selectbackid	(Optional) Id – Unique id of the color resource to be used as the background of the selected item when the menu is "dropped". If omitted, the "backcolor" attribute must be specified. Default: Empty.
activetext	(Optional) Text – Color value to be used for drawing text of the selected item in the format "xxxxxx" (see above). This color is only used within the "non-dropped" region of the menu and allows the color highlighting of invalid menu items without impacting the behavior of the "dropped" menu. If omitted, the "selectbackid" attribute may be specified. If neither color is specified, the "selecttext" color is used. Default: Empty.
activetextid	(Optional) Id – Unique id of the color resource to be used as the background of the selected item. See the "activetext" attribute above for further details. If omitted, the "activetext" attribute may be specified. Default: Empty.
droplist	(Optional) Id – Unique id of the bitmap to be used for the drop arrow on the right when the menu is enabled. If omitted, the system default bitmap is used. Default: Empty.
droplistoff	(Optional) Id – Unique id of the bitmap to be used for the drop arrow on the right when the menu is disabled. If omitted, the system default bitmap is used. Default: Empty.
scaleimage	(Optional) Boolean – Indicates whether bitmaps included within encoded text are scaled (see above). Default: "no".

The "style_action" Element

The "style_action" element defines the facets of a style for action portals (typically used as clickable buttons). The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
up	Id – Unique id of the bitmap resource to be used as the "up" state of the action portal.
down	Id – Unique id of the bitmap resource to be used as the "down" state of the action portal.
off	Id – Unique id of the bitmap resource to be used as the "up" state of the action portal when the portal is disabled.
xoffset	(Optional) Integer – Specifies the offset adjustment of any text along the horizontal X axis. The text is centered along the axis and can be shifted left or right via this attribute, with positive values shifting to the right and negative values shifting left. Default: "0".
yoffset	(Optional) Integer – Specifies the offset adjustment of any text along the vertical Y axis. The text is centered along the axis and can be shifted up or down via this attribute, with positive values shifting downward and negative values shifting upward. Default: "0".

The "style_incrementer" Element

The "style_incrementer" element defines the facets of a style for incrementer portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
(Optional) background	Id – Unique id of the bitmap resource to be used as the background. If empty, the portal has no background and is drawn transparently. Default: Empty. NOTE! If a background bitmap is specified, the incrementer size is dictated by the dimensions of the bitmap. If not specified, then the dimensions must be specified via the "fullwidth" and "fullheight" attributes.
fullwidth	(Optional) Integer – Specifies the fixed width to utilize for all incrementers assigned this style. If "0", a background must be specified to dictate the dimensions. Default: "0".
fullheight	(Optional) Integer – Specifies the fixed height to utilize for all incrementers assigned this style. If "0", a background must be specified to dictate the dimensions. Default: "0".
textleft	Integer – Specifies the left edge of the region in which text is drawn within the incrementer.
texttop	Integer – Specifies the top edge of the region in which text is drawn within the incrementer.
textwidth	Integer – Specifies the width of the region in which text is drawn within the incrementer.
textheight	Integer – Specifies the height of the region in which text is drawn within the incrementer.
plusup	Id – Unique id of the bitmap resource to be used for the "+" button in its "up" state.
plusdown	Id – Unique id of the bitmap resource to be used for the "+" button in its "down" state.
plusoff	Id – Unique id of the bitmap resource to be used for the "+" button in its "up" state when the incrementer is disabled.
plusx	Integer – Specifies the offset along the horizontal X axis where the "+" button is positioned within the overall incrementer portal.
plusy	Integer – Specifies the offset along the vertical Y axis where the "+" button is positioned within the overall incrementer portal.
minusup	Id – Unique id of the bitmap resource to be used for the "-" button in its "up" state.
minusdown	Id – Unique id of the bitmap resource to be used for the "-" button in its "down" state.
minusoff	Id – Unique id of the bitmap resource to be used for the "-" button in its "up" state when the incrementer is disabled.
minusx	Integer – Specifies the offset along the horizontal X axis where the "-" button is positioned within the overall incrementer portal.
minusy	Integer – Specifies the offset along the vertical Y axis where the "-" button is positioned within the overall incrementer portal.
editable	(Optional) Boolean – Indicates whether the incrementer value can be directly user-edited by clicking within the value region. Disabling this can be useful when the value does not correspond to what is displayed, such as when selecting a die type (e.g. d6, d8, d10). Default: "yes".
scaleimage	(Optional) Boolean – Indicates whether bitmaps included within encoded text are scaled (see above). Default: "no".

The "style_chooser" Element

The "style_chooser" element defines the facets of a style for chooser portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
backcolor	(Optional) Text – Color value to be used as the background in the format "xxxxxx" (see above). If omitted, the "backcolorid" attribute must be specified. Default: Empty.
backcolorid	(Optional) Id – Unique id of the color resource to be used as the background. If omitted, the "backcolor" attribute must be specified. Default: Empty.
scaleimage	(Optional) Boolean – Indicates whether bitmaps included within encoded text are scaled (see above). Default: "no".

The "style_region" Element

The "style_region" element defines the facets of a style for region portals. The complete list of attributes for this element is below.

(Optional) background

Id – Unique id of the bitmap resource to be used as the background for the region. If empty, the portal has no background and is drawn transparently. Default: Empty.

The "style_table" Element

The "style_table" element defines the facets of a style for table portals. The complete list of attributes for this element is below.

(Optional) background	Id – Unique id of the bitmap resource to be used as the background for the table. If empty, the portal has no background and is drawn transparently. Default: Empty.
itemborder	(Optional) Id – Unique id of the bitmap resource to be used as a border around each individual item inside the table. If empty, no border is drawn. Default: Empty.
showgridhorz	(Optional) Boolean – Indicates whether horizontal grid lines should be drawn between each item within the table. Default: "no".
showgridvert	(Optional) Boolean – Indicates whether vertical grid lines should be drawn between each item within the table. Default: "no".
gridwidth	(Optional) Integer – Thickness of the grid lines drawn between items within the table (in pixels). The thickness of both horizontal and vertical grid lines is always the same. Default: "1".
gridcolor	(Optional) Text – Color value to be used for drawing grid lines in the format "xxxxxx" (see above). Default: "888888".
gridcolorid	(Optional) Id – Unique id of the color resource to be used for drawing grid lines. If specified, the default value for the "gridcolor" attribute is ignored. Default: Empty.

The "style_separator" Element

The "style_separator" element defines the facets of a style for separator portals. The complete list of attributes for this element is below.

isvertical	(Optional) Boolean – Indicates whether the separator is oriented vertically or horizontally. Default: "no".
start	Id – Unique id of the bitmap resource to be used at the left/top end of the separator.
end	Id – Unique id of the bitmap resource to be used at the right/bottom end of the separator.
center	Id – Unique id of the bitmap resource to be used in the middle of the separator. This bitmap is tiled as necessary to fill the entire span of the separator.

The "style_special" Element

The "style_special" element defines the facets of a style for special portals. Due to its nature, there are no attributes for this element.

The "style_output" Element

The "style_output" element defines the facets of a style for output portals. The complete list of attributes for this element is below.

font	Id – Unique id of the font resource to be used for the style.
textcolor	(Optional) Text – Color value to be used for drawing text in the format "xxxxxx" (see above). If omitted, the "textcolorid" attribute must be specified. Default: Empty.
textcolorid	(Optional) Id – Unique id of the color resource to be used for drawing text. If omitted, the "textcolor" attribute must be specified. Default: Empty.
backcolor	(Optional) Text – Color value to be used as the background in the format "xxxxxx" (see above). If omitted, the "backcolorid" attribute must be specified. Default: Empty.
backcolorid	(Optional) Id – Unique id of the color resource to be used as the background. If omitted, the "backcolor" attribute must be specified. Default: Empty.
alignment	(Optional) Set – Specifies how the text should be horizontally aligned within the portal width (for labels). Must be one of these values: left – Text is left-aligned. center – Text is centered within the portal. right – Text is right-aligned. Default: "left".
(Optional) background	Id – Unique id of the bitmap resource to be used as the background for tables. If empty, the portal has no background and is drawn transparently. Default: Empty.
itemborder	(Optional) Id – Unique id of the bitmap resource to be used as a border around each individual item inside a table. If empty, no border is drawn. Default: Empty.
showgridhorz	(Optional) Boolean – Indicates whether horizontal grid lines should be drawn between each item within a table. Default: "no".
showgridvert	(Optional) Boolean – Indicates whether vertical grid lines should be drawn between each item within a table. Default: "no".
gridwidth	(Optional) Integer – Thickness of the grid lines drawn between items within a table (in pixels). The thickness of both horizontal and vertical grid lines is always the same. Default: "1".
gridcolor	(Optional) Text – Color value to be used for drawing grid lines in the format "xxxxxx" (see above). Default: "888888".
gridcolorid	(Optional) Id – Unique id of the color resource to be used for drawing grid lines. If specified, the default value for the "gridcolor" attribute is ignored. Default: Empty.

Example

The following example demonstrates what various "style" elements might look like. All default values are assumed for optional attributes.

<style id="label">
  <style_label textcolor="f0f0f0" font="fntnormal" alignment="center"/>
  </style>

<style id="edit" border="sunken">
  <style_edit textcolor="d2d2d2" backcolor="000000" font="fntedit" alignment="center"/>
  </style>

<style id="increment">
  <style_incrementer textcolor="f0f0f0" font="fntincrsim"
      textleft="13" texttop="0" textwidth="24" textheight="20"
      fullwidth="50" fullheight="20"
      plusup="incplusup" plusdown="incplusdn" plusoff="incplusof"
      plusx="39" plusy="0"
      minusup="incminusup" minusdown="incminusdn" minusoff="incminusof"
      minusx="0" minusy="0">
      </style_incrementer>
  </style>

<style id="action">
  <style_action textcolor="000088" font="fntactbig"
      up="actbigup" down="actbigdn" off="actbigof">
    </style_action>
  <resource id="actbigup" isbuiltin="yes">
    <bitmap bitmap="button_big_up.bmp"/>
    </resource>
  <resource id="actbigdn" isbuiltin="yes">
    <bitmap bitmap="button_big_down.bmp"/>
    </resource>
  <resource id="actbigof" isbuiltin="yes">
    <bitmap bitmap="button_big_off.bmp"/>
    </resource>
  </style>

<style id="table" border="brdsystem">
  <style_table itemborder="sunken" showgridhorz="yes" gridcolor="808080"/>
  </style>

<style id="checkbox">
  <style_checkbox textcolor="f0f0f0" font="fntcheck"/>
  </style>

<style id="image" border="brdsystem">
  <style_image/>
  </style>

<style id="menu" border="sunken">
  <style_menu font="fntmenu" textcolor="84c8f7" backcolor="2a2c47"
      selecttext="1414f7" selectback="f0f0f0"/>
  </style>

<style id="separator">
  <style_separator isvertical="no"
      start="sephorzsta" center="sephorzmid" end="sephorzend"/>
  <resource id="sephorzsta" isbuiltin="yes">
    <bitmap bitmap="sep_horz_start.bmp"/>
    </resource>
  <resource id="sephorzmid" isbuiltin="yes">
    <bitmap bitmap="sep_horz_middle.bmp"/>
    </resource>
  <resource id="sephorzend" isbuiltin="yes">
    <bitmap bitmap="sep_horz_end.bmp"/>
    </resource>
  </style>

<style id="region" border="brdsystem">
  <style_region/>
  </style>