WebStyle

From Xojo Documentation
Jump to: navigation, search

Class (inherits from WebObject)

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

Personal tools
Namespaces

Variants
Actions
Main
Content
Starting Out
Dig Deeper
More Help
Toolbox
About