UserGuide

Web Styles

From Xojo Documentation

To control the appearance of controls, you use Styles. A Style is an object that lets you specify information for a control, Text and Font, Borders, Shadows, Padding, Corner Radii, Opacity and Background. You can provide style information for these states: Normal, Hover, Pressed and Visited. Every control in a web application has a Style property (in the Inspector) that can be set to a Style in your project.

For example, to have a Label whose text displays in bold, you would create a style, called BoldLabelStyle, and add a Font Style property. Set Font Style to Bold.

In your Label on the web page, select BoldLabel as its Style in the Inspector.

Styles allow you to have a more consistent theme and overall look for your web application. If you used StandardLabelStyle on all Labels that you wanted to be bold and red and then later decided you instead want to make them both Italic and blue, you would just change the StandardLabelStyle accordingly. The change is automatically reflected in all the Labels in your project that use StandardLabelStyle without you having to do anything else.

Although Styles are not actual classes, they can be “inherited” by setting the Super of a Style to another Style. A Style with a specified Super gets all its style properties by default. You can change or override them as needed.

Style Editor

Use the Style Editor to create Styles to change the UI appearance. It provides a simple unified interface for specifying all aspects of a control’s appearance. To add a Style to your project, select “Web Style” from the Insert button on the toolbar or the Insert menu. When you click on the Style, you see the Style Editor in its initial blank state. It contains controls for specifying when the style is used (Normal, Hover, Pressed and Visited) and a button to add Style Properties.

Style Properties

The properties of a Style are not properties in the traditional sense. For example, you can’t read their values or set their values via code. However, they feel very much like properties when you are editing them in the Style Editor, so they are called properties for the sake of simplicity.

The properties are organized into the following themes.

  • Text and Fonts
  • Borders
  • Shadows
  • Padding
  • Corner Radii
  • Miscellaneous

Text and Fonts

These text and font properties can be used with any controls that display text.

Property Description
Font Family The font family or specific fonts. Note that specific fonts are not available for all browers, so a different font may be substituted.
Font Style Click the icon that corresponds to bold, italic, underlined, strikeout or overlined.
Font Size The font size in pixels, points, percentage, mm or em.
Text Alignment The alignment as left-justified, centered, right-justified or center-justified.
Text Color The text color and opacity using RGB or Grayscale.

Borders

These properties let you add and change borders for controls.

Property Description
Top Border The top border to display, including type of line, size and its color.
Left Border The left border to display, including type of line, size and its color.
Bottom Border The bottom border to display, including type of line, size and its color.
Right Border The right border to display, including type of line, size and its color.

Shadows

These properties control shadows for text and drop shadows.

Property Description
Text Shadow The vertical and horizontal offsets, blur radius, and color for a text shadow.
Drop Shadow The vertical and horizontal offsets, blur radius, and color for a drop shadow.

Padding

The padding determines the space surrounding controls.

Property Description
Top Padding The amount of padding in a chosen unit: pt, %, mm or em.
Left Padding The amount of padding in a chosen unit: pt, %, mm or em.
Bottom Padding The amount of padding in a chosen unit: pt, %, mm or em.
Right Padding The amount of padding in a chosen unit: pt, %, mm or em.

Corner Radii

When a control has a border, the Corner Radii properties can be used to determine how rounded the corner is.

Property Description
Top Left Corner The size of the radii in a chosen unit: pt, %, mm or em.
Bottom Left Corner The size of the radii in a chosen unit: pt, %, mm or em.
Bottom Right Corner The size of the radii in a chosen unit: pt, %, mm or em.
Top Right Corner The size of the radii in a chosen unit: pt, %, mm or em.

Miscellaneous

Property Description
Opacity A percentage for the opacity of the item (100% = solid).
Background The background color/gradient and opacity.

Link States

At the top of the Styles Editor there are four buttons that correspond to the four states that an object can be in.

Each button reveals a group of style properties that are expressed when the object is in that state.

The Hover, Pressed, and Visited states all inherit from the Normal state. This means you would normally set up the properties for the Normal state and then use the other three states to override or add to those properties.

Usage

Web Button without and with a Style

To use a Web Style that you've created, you assign it to the Style property for the control. Some controls, such as Web List Box, have multiple Style properties that can be used to change the appearance of different parts of the control. For example, if you want to change the standard Button control so that it does not have a border and uses a larger, blue font you can create a Style that increases the font size, specifies its color as blue, changes the background to transparent and sets all the borders to "None" and assign it to the button.

Example Projects

These examples use Web Styles:

  • Examples/Web/Containers/ContainerControlExample

See Also

WebStyle, UserGuide:Web UI, UserGuide:Style Editor, UserGuide:Web Rectangle topics