This page is for application designers who want to know how to use style settings.

Overview

Layout components have properties for applying styles to affect their format. For example, you can add background colours or borders to components. You can apply styles:

• using a shared style that lots of layout components use. This is global-level styling, and it gives your application a consistent look and feel.
  To change an aspect of styling, you only need to change the style in one place, in the shared style. All layout components that use the style are automatically updated.
  If you change a shared style, remember to test that it looks correct for all components.
• on individual layout components. This is object-level styling. It is useful to use this when you are experimenting with styles or you want to apply a one-off style to layout component.
  To use an object-level style on multiple components, you have to set the style properties for each component.

You can use both global- and object-level styling on the same layout component. PhixFlow applies styles in a specific order, with the values set at the object-level overriding those set globally. This is explained in the following video and in Style Order, below.

Where to Apply Styles

Every layout component has a property tab with the sections:

• Shared Styles - lists any global-level shared styles that apply to the component
• Styles - set common formatting options for the component
• CSS Properties - lists specific styles, defined using a CSS tag and its value. 

See Layout for details.

Creating Shared Styles

1. In the PhixFlow repository, right-click Styles and add a new style.
2. In the Basic Settings section, set the style options you require; see Style. 
3. If you want your shared style to include CSS Properties:
   1. Go to the repository.
   2. Expand your style.
   3. Right-click CSS Properties and click  Add. 
   4. Set the tag and value and save;  see CSS Properties.
   5. When you return to the style property tab, the CSS Properties section is automatically populated. 
4. Save your style. 

Sharing Styles

To use the style in a layout component:

1. Open the layout component to which you want to apply a style.
2. Drag the repository tab so that it is beside the layout component property tab.
3. In the repository, find the style.
4. Drag the style from the repository and drop it into the Shared Styles section of the layout component.
5. PhixFlow adds the style to the list of shared styles that apply to the layout component.

A layout component can have multiple shared styles and CSS properties. PhixFlow applies the formats in the order they appear in the property tab list.