Xojo Documentation Xojo Documentation

Class (inherits from WebObject)

New in 2010r4

A WebStyle is a collection of properties and values that manage the look of a user interface elements in your web app.

Notes

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.

Understanding 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. Here are the four states.

State	Description	Comment
Normal	The default state of an item.	An unvisited link in its unclicked state or content that isn’t a link.
Hover	The mouse is over the item.	The pointer hovers over the link in position for a click but the user has not yet clicked.
Pressed	The mouse is down on the item.	The properties of a link for a few milliseconds while the pointer is actually clicking it.
Visited	The mouse has been clicked at least once on the item.	A link that has been clicked on. Often a visited link has a different color than a link in its unvisited state.

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

You can think of the Style Editor is an interface for creating and managing a crossed design: States by Properties.

There are four states and each state has the same list of properties.

Since the Hover, Pressed, and Visited states all inherit from the Normal state, 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. Lastly, you assign WebStyle objects to the Style properties of WebControls and/or WebPages in the project.

Understanding Properties

The properties of a Style are not traditional properties. For example, you can't get their values or set their values via code. However, they feel very much like properties when you are editing them in the Style Editor. They are called properties for the sake of simplicity. Perhaps they can be thought of as “pseudo-properties,” but don't expect that you can bypass the functionality of the Style Editor via code.

Property Themes

The properties are organized into the following themes.

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

The properties in each theme are described in the following tables.

Text and Fonts

State	Description
Font Family	Specify a font family in the ListBox.
Font Style	Click an icon that corresponds to the desired style.
Font Size	Enter a size in the desired units: px, pt, percentage, mm, or em.
Text Alignment	Click an icon corresponding to the desired alignment: Left, Centered, Right, or Justified.
Text Color	Choose an RGB or gray color with the sliders or enter a hex value.

Borders

State	Description
Top	Specify the Style, Size, and Color.
Left	Specify the Style, Size, and Color.
Bottom	Specify the Style, Size, and Color.
Right	Specify the Style, Size, and Color.

For each side, you can specify from the following options:

• Style: None, Solid, Dotted, or Dashed
• Size: Specify the size in the desired units: px, pt, percentage, mm, or em.
• Color: Specify the color or grayscale using either the sliders or a hex value.

Shadows

State	Description
Text Shadow	Specify the vertial and horizontal offsets, blur radius, and color.
Drop Shadow	Specify the vertial and horizontal offsets, blur radius, and color.

Padding

State	Description
Top Padding	Specify the amount of padding in a chosen unit: pt, %, mm, em
Left Padding	Specify the amount of padding in a chosen unit: pt, %, mm, em
Bottom Padding	Specify the amount of padding in a chosen unit: pt, %, mm, em
Right Padding	Specify the amount of padding in a chosen unit: pt, %, mm, em

Corner Radii

State	Description
Top Left Corner	Specify the radius in chosen units: pt, %, mm, em.
Bottom Left Corner	Specify the radius in chosen units: pt, %, mm, em.
Bottom Right Corner	Specify the radius in chosen units: pt, %, mm, em.
Top Right Corner	Specify the radius in chosen units: pt, %, mm, em.

Miscellaneous

State	Description
Opacity	Specify a percentage Opacity.
Background	Specify either Solid or Gradient and the color and opacity.

See Also

WebControl, WebPage