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

Overview

Layout components have properties for adding styles that affect their format. For example, 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.
  If you To change your mind about 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 make a change to 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.
  If you want to To use an object-level styles on multiple components, you have to remember to set the style properties for each component.
  If you want to To change the style, you must change it on 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.

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 - apply  set common formatting settings to options for the component
• CSS Properties - specify advanced formatting, for Styles section, set up a CSS tag and its value. To share a CSS property, simply open the shared style and drag the CSS Property to it. 

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 advanced stylesCSS Properties:
   1. Go to the repository.
   2. Expand your style.
   3. Right-click CSS Properties and click 

      Insert excerpt
      _add _add nopanel true

      . 
   4. Set the tag and value and save;  see CSS Properties
   5. When you return to the style property tabe, 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 your style 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.