From Xojo Documentation
Supported PlatformsProject Types: Web Platforms: macOS, Windows, Linux
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.
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.
|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.
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.
The properties are organized into the following themes.
- Text and Fonts
- Corner Radii
The properties in each theme are described in the following tables.
Text and Fonts
|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.|
|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.
|Text Shadow||Specify the vertial and horizontal offsets, blur radius, and color.|
|Drop Shadow||Specify the vertial and horizontal offsets, blur radius, and color.|
|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|
|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.|
|Opacity||Specify a percentage Opacity.|
|Background||Specify either Solid or Gradient and the color and opacity.|