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

Overview

When applying styles, it is possible to set a value globally, using a shared style, or specifically on the object. PhixFlow applies the CSS in a Layout components have properties for adding styles that 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.
  If you 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 to apply a one-off style to layout component.
  If you want 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 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 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
• Styles
• CSS Properties.

• - lists any global-level shared styles that apply to the component
• Styles - apply common formatting settings to the component
• CSS Properties - specify advanced formatting, for Styles section, set up a CSS tag and its value.

You can apply:

• object level styles which only apply to the selected component. These styles override any shared styles. However, if you use the styles on multiple components, then decide to change the style, you have to update each item to make the change.
• global level styles are set in one place and shared by multiple components. Use global styles when you want your application to have a consistent look and feel. When you make a change to a shared style, all components that use it are automatically updated. If you make a change to a shared style, remember to test that it looks correct for all components.

To share a CSS property, simply open the shared style and drag the CSS Property to it.

•  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 styles:
   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. 

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. Drag your style into the Shared Styles section of the layout component.