UserGuide:Web Styles

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/Styles/StylesExample
Examples/Web/Containers/ContainerControlExample
Examples/Web/Controls/SortableListBox
Examples/Web/Controls/iOS7Controls/iOS7SimulatedControls

UserGuide

Web Styles

From Xojo Documentation

Contents