Versions Compared

Old Version 4

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version 5

changes.mady.by.user Fiona Sargeant

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

A style is a container for Style Elements (CSS Styles)a set of CSS properties. A style can be assigned to objects (i.e. Layout) or used , such as a layout component. You can also use it to provide default formatting (i.e. selected grid rows), for example on selected grid rows. 

Tip

The properties tab for a Layout also has a Style Settings section where you can select options to format the border, background, font etc. PhixFlow combines any style settings and CSS properties.


Insert excerpt
_standard_settings
_standard_settings
nopaneltrue

For each style, the following settings are configuredset:

Basic Settings

Parent DetailsStatus
FieldDescription
Container

The Container (Application or Package) containing this Style. Container is a drop down field listing all Containers for this instance which the user has permission to view.

Basic Settings
NameName of the style.

Style Elements

A list of of the style elements. For each style element, the following settings are configured:
NameName of the style element.
ValueThe style value.

Style Elements

A list of of the style elements. Click on an item on the list to open its CSS properties.

CSS Property

For each CSS property, set:

FieldDescription
CSS TagThe HTML tag for the CSS property.
ValueEnter the HTML for the tag.
State

Choose one of:

  • Focus
  • Mouse Down
  • Move Over
  • Read Only
ExpressionTick to indicate the value is an expression.
OrderThe order in which the style element will be applied.
Description
DescriptionDescription of this styleCycle Size

Optionally enter a number to indicate the recurrence of this CSS formatting. For example to use this CSS for: 

  • alternate children, enter 2
  • every 5th child enter 5.
OffsetOptionally specify where you want the cycle to start after the first child. For example, to apply the formatting to the second item, instead of the first, enter 2.

Using Cycle Size and Offset

Use Cycle Size and Offset to specify different formatting for children of the layout. The two fields together work as an ax + b expression, where:

  • a is the cycle size,
  • x is the current cycle
  • b is the offset. 

For example, to apply the CSS formatting:

  • to the 5th child only, leave the Cycle Size empty and set the Offset to 5.
  • alternate children, starting with the second, (2, 4, 6...) set the Cycle Size  to 2 and the Offset to 2.
  • not format the first 10 items, but then format every 3rd child (i.e. 11,14,17...), set the Cycle Size  to 3 and the Offset to 11.