Item properties

From PhiWiki
Jump to: navigation, search

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.



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.


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.


Unchecking makes the item invisible. You may also set this by reading from a database or process.

See also: Text sources.


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).


Available for radio buttons and check boxes.


The x-position of the item relatively to the left upper corner in pixels.


The y-position of the item relatively to the left upper corner in pixels.


The width of the item in pixels.


The hight of the item in pixels.


The starting angle of an ellipse. A 0° angle is starting at the x-axes (3 o'clock position).


The span angle of an ellipse.

Max size

The maximum size (character length) allowed for a text input element.


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.


Defines the value for a check box or a radio button for the POST request.


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.


The z-index of an item. A higher z-index overlaps another item with a lower z-index.

See also:

Tab pos

Defines the position in the tab hierarchy.


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.


The image for this item.

See also: Image sources.


The text for the item. If the text is grayed out an other Text source than static is used.


Defines the title (tooltip) of the item.



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.



In Phi effects can be applied to every possible item. In XHTML only effects which can be handled by JavaScript will be shown.


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.




Creates a blur effect.

Note: this in Phi mode available only.



Creates a shadow effect.

Note: this in Phi mode available only.



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.



Creates a mirrored surface effect.

Note: this in Phi mode and in XHTML available (in XHTML for images only).


Moves the item to a specified position. You may create nice effects in conjunction with Fader or transparency.


Rotate in

Rotates the item in over the specified angle.

Rotate out

Rotates the item in over the specified angle.


Rotates the item over the specified angle(s).


Add your own cascading style sheet for the selected item in this tab.

Note: use the global CSS for setting page wide styles.