Item properties
By clicking on Item properties or by right clicking over an item selecting Properties in the context menu, the properties dialog opens. The dialog contains only properties which you can edit for the selected item.
Contents
- 1 Properties
- 1.1 Id
- 1.2 Parent
- 1.3 Do NOT cache item
- 1.4 Visible
- 1.5 Disabled
- 1.6 Read only
- 1.7 Checked
- 1.8 X
- 1.9 Y
- 1.10 Width
- 1.11 Hight
- 1.12 Angle
- 1.13 Span
- 1.14 Max size
- 1.15 Url
- 1.16 Value
- 1.17 Delimiter
- 1.18 Access key
- 1.19 zIndex
- 1.20 Tab pos
- 1.21 Color
- 1.22 Outline color
- 1.23 Rollover text color
- 1.24 Rollover background color
- 1.25 Image
- 1.26 Text
- 1.27 Title
- 2 Gradient
- 3 Effects
- 4 CSS
Properties
Id
This is the ID of the item which you can reference with document.getElementById() or phi.getElementById() in JavaScript.
Note: if you are editing a Master template page we recommend you to prepend a m_ before the name of any item ID to prevent name conflicts with other pages loading the template, because they will run in the same address space.
Parent
If you are using layouts all child items have automatically the ID of the layout as the parent name. For radio buttons and checkboxes this is the name which will be sent as POST data.
Do NOT cache item
For graphical items check this if the item should always be newly created (which can be time consuming), ie. if you change the item in the server environment with JavaScript depending on different states.
Visible
Unchecking makes the item invisible. You may also set this by reading from a database or process.
See also: Text sources.
Disabled
Some input items can be disabled (usually grayed out by the browser).
Read only
If checked, the input item will be a read only item (browser normally gray out read only elements).
Checked
Available for radio buttons and check boxes.
X
The x-position of the item relatively to the left upper corner in pixels.
Y
The y-position of the item relatively to the left upper corner in pixels.
Width
The width of the item in pixels.
Hight
The hight of the item in pixels.
Angle
The starting angle of an ellipse. A 0° angle is starting at the x-axes (3 o'clock position).
Span
The span angle of an ellipse.
Max size
The maximum size (character length) allowed for a text input element.
Url
An Url which is loaded by clicking on the item (ie. rollover buttons and click buttons).
Note: you can also choose javascript: function(); to call a function. Use javascript: phi.href( 'url' ); for external references.
See also: item.url.
Value
Defines the value for a check box or a radio button for the POST request.
Delimiter
Defines the delimiter for some items, ie. tables and check lists.
In Phi default delimiters are colons ':' and newlines '\n'.
Access key
See also: item.accessKey.
zIndex
The z-index of an item. A higher z-index overlaps another item with a lower z-index.
See also: item.style.zIndex.
Tab pos
Defines the position in the tab hierarchy.
Color
Specifies the color for this item.
Outline color
Specifies the outline or background color for this item.
Rollover text color
The text color of a rollover button, if the mouse is over the item.
Rollover background color
The background color for rollover buttons if the mouse is over the item.
Image
The image for this item.
See also: Image sources.
Text
The text for the item. If the text is grayed out an other Text source than static is used.
Title
Defines the title (tooltip) of the item.
Gradient
Here you can define your own gradients for graphical items like ellipses, graphical text and boxes.
Color editor
Move the points in the RGB (red/green/blue) to change the gradient colors. The field below edits transparency.
Custom gradients
Save and load your own designed gradients.
Gradient type
Different gradient types are available: linear, radial and conical.
Spread method
Choose between different spread methods.
Gradient stops
Define new color stops for the gradient between '0' and '1'. '0' means at the outmost left position where '1' is on the right side. A color defined at position stop '0.5' will appear in the middle of the gradient.
You can directly enter the RGB hex color code with the transparency prepended, '#ff' means fully opaque.
Click on Add to add to newly defined gradient stop. Clicking on Clear removes all stops.
Effects
In Phi effects can be applied to every possible item. In XHTML only effects which can be handled by JavaScript will be shown.
Fader
Fade in
Fades the element in. You may specify a duration and a starting timeout.
Fade out
Fades the element out. You may specify a duration and a starting timeout.
Graphical
Blur
Creates a blur effect.
Note: this in Phi mode available only.
Shadow
Creates a shadow effect.
Note: this in Phi mode available only.
Colorize
Creates a colorize effect (the colors are overwritten with a reference color). Using black as reference color creates a gray scaled element.
Note: this in Phi mode available only and for image based items in XHTML.
Surface
Creates a mirrored surface effect.
Note: this in Phi mode and in XHTML available (in XHTML for images only).
Moving
Moves the item to a specified position. You may create nice effects in conjunction with Fader or transparency.
Rotation
Rotate in
Rotates the item in over the specified angle.
Rotate out
Rotates the item in over the specified angle.
Rotation
Rotates the item over the specified angle(s).
CSS
Add your own cascading style sheet for the selected item in this tab.
Note: use the global CSS for setting page wide styles.
