Overview

The components on a screen have properties for

applying styles

which affect their

look and feel. For example,

you can add a background

colour or set how a button reacts when the mouse passes over it. Styles can be applied using a shared style

which is reusable and provides a consistent look and feel

across your application, or it can be applied to a single component if you want to apply a one-off style

.

You can combine both shared styles and object-level styling on the same

component.

PhixFlow applies styles in a specific order, with the values set at the object-level overriding those set

in a shared style. 

Style Order 

Anchor
order order

PhixFlow applies styles using the principle of cascading style sheets (CSS). A component can have styles from one, some or all of the following settings:

1. Shared Styles - global

2. CSS Properties - object

3. Style Settings - object
4. Conditional Formatting - global
5. Position Settings - object

PhixFlow applies styles in order, starting with 1, and ending with 5.

If a different style is applied to the same aspect of a component, the later settings override the earlier settings:

You can configure a shared style to have a condition that must be true for the style to be applied using a formatting rule; see Applying Formatting Rules and Formatting Rule properties. For example, you can hide an "Update" button until the user had made a change to the data.

Formatting rules require an expression for the condition logic, which must be true for the style to be applied; see Expressions and PhixScripts.

Summary of the order in which styles are applied

Image Added

Where

Styles are Applied

Every

component has a

Style Properties tab with the sections:

• Styles Settings - a set common formatting options for the component. 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 a component. 
• Shared Styles (Recommended) -

• a global-level shared

• style that can be applied to multiple components to give your application a consistent look and feel. To change an aspect of styling, you only need to change the style in one place, the shared style. All components that use the style are automatically updated when the style is updated. It is recommended that all styles be applied using a shared style where possible.
• Formatting Rules - apply a shared style when the conditions of a rule are satisfied. Formatting Rules are applied at the object-level.
• CSS Properties - a set of specific styles, defined using a CSS tags and their associated values. This is object-level styling.
• Position Setting - fixes where a component should appear and what size it should be. This is applied at the object-level.

Image Added

Creating Shared Styles

1. In the PhixFlow repository,

1. navigate to Styles and click 

   Insert excerpt
   _new _new nopanel true

   .

2. In the Basic Settings section, set the style options you require; see Style. 

1. Save your style. 

Apply a Shared Style

To use the style in a component:

1. Open the properties of the component you wish to apply the style to.
2. Click on the

   Insert excerpt
   _

1. property_tabs

1. _property_tabs name style nopanel true

   .

2. Scroll down to the Shared Style section.
3. Click

   Insert excerpt
   _style_list _style_list nopanel true

   .
4. Drag a style from the repository and drop it into the Shared Styles section of the

1. properties.

1. PhixFlow adds the style to the list of shared styles that apply to the component.