Panel Design - Stylers


The following table reports the list of currently available stylers (to make the description clearer, for each styler one or more examples are reported. These examples can be tried in the online simulator. Some examples make use of the text object. Text can be added to the panel using the syntax: T:some text;)

NOTE: for a complete overview of the panel design rules, you can see the page design principles.

Styler Mnemonic Type Description
% Size Spot Define size and scale of either the container or the container-like objects

The syntax is %x,py,a,b where x and y are the percentages of the horizontal and vertical size, respectively. a and b are optional parameters that represent the scale factor, for x and y respectively. Negative scale factors can be used to obtain a mirror effect on the corresponding axis. p is an optional flag that precedes y.

The only valid option for p: y
and used to scale the size with respect to the container height instead of the container width. 

The last styler parameters can be omitted, so all the following stylers are valid:

%x,y
%x
%,y
%,,a,b
%,,,b

Examples

Create a container with size 80% x 40%:

{%80,40}

Create a container with size 80% x 40% with y-mirrored content:

{%80,40,,-1}

Create a container that cover the whole display area:

{%100,y100}
* Object Size Block Define the size of the object that contains the styler, or of all the objects and sub-container.

The syntax is *x where x is the size factor, multiplied by 10, to be applied to the object size. The initial objects' size is automatically scaled with respect to the display width.

Please note that, x = 10 will not change the object size; x = 20 will double the object size with respect the the current size, and so on...
Please note also that the scale factor is a block styler and it is thus applied on the current object or all the object of the container and sub-containers.

A particular function is obtained if x is . (dot). In this case the object size is reset to the default value proportional to the parent container size. This function is useful when objects with size proportional to the container are required.

Due to the block nature of this styler, it is possible to scale the object size of all the panel's object simply prefixing the panel definition with the * styler.

Example

Create a container with two texts of double size

*20{T:A;_T:B;}
! Background
color
Spot Define the background colour to be used in the container or for drawing the related object.

The basic syntax is !abc where a,b and c are 3 hexadecimal digits representing the R G B components of the colour. This syntax corresponds to the classic short HTML representation of colours (3 digits). It is also possible to create colour gradients specifying two colours with the following extended syntax: !abc,def where def represents the second colour

Examples

Create a container of size 80% x40% with background color gradient from white to blue

{%80,40!FFF,00F}

Create a container with background color blue, with a single cell of background color red containing the text "OK";

{!00F|!F00T:OK;}
# Color Block Define the colour to be used in the container, in all objects of the container and in all sub-containers.

The syntax is #abc where a,b and c are 3 hexadecimal digits representing the R G B components of the colour. This syntax corresponds to the classic short HTML representation of colours (3 digits). 

Example

Create a container with colour red and text OK

{#F00T:OK;}
t Top Block Vertically align objects or sub-containers at the top of the container.

The syntax is 

Example

Create a container of size 50% x 50%, border, vertical align top and text OK

{-%50,50tT:OK;}
b Bottom
Block Vertically align objects or sub-containers at the bottom of the container.

The syntax is b

Example

Create a container of size 50% x 50%, border, vertical align top and text OK

{-%50,50bT:OK;}
m Middle Block Vertically align objects or sub-containers in the middle of the container.

The syntax is

Example

Create a container of size 50% x 50%, border, middle align and text OK

{-%50,50mT:OK;}
< Left Block Horizontally align objects or sub-containers at the left side of the container.

The syntax is

Example

Create a container of size 50% x 50%, border, left align and text OK

{%50,50<-T:OK;}
^ Center Block Horizontally align objects or sub-containers in the center of the container.

The syntax is

Example

Create a container of size 50% x 50%, border, center align and text OK

{%50,50-^T:OK;}
> Right Block Horizontally align objects or sub-containers at the right side of the container.

The syntax is

Example

Create a container of size 50% x 50%, right align and text OK

{%50,50->T:OK;}
w Window (overflow) Block Prevent the appearance of the scroll bars in the case the panel size exceeds the display area. This styler is normally used to style the desktop (panel first container). Please refer to the Desktop object to know more about it. 

The syntax is (the use of stylers in the Desktop object is Dstylers;)

Example

create a blue table of 50% x 1000% preventing the appearance of scroll bars

Dw;{%50,1000!00F}
- Border Spot Define the border to be used for the current container or object.

The syntax is -xxxxN where xxxx are one or more style options and N is the border width (in pixels scaled with respect to the display width).

The current supported style options are: d (dotted), h (dashed), s (solid), b (double), g (groove), c (collapse), e (separate). The default style is solid.

In addition to these standard flags, two special flags j and k can be used to enable and disable, respectively, the border of all the elements during the development of the layout. Knowing exactly the size of the different containers and object may be of great help during the panel design.

A special meaning is assigned to N = 0: border and margins are cleared so that the object or container can use 100% of the available area

Examples

1. Create a container with size 50% x 50% and dashed border line of width 5 scaled pixels

{%50,50-h5}

2. Create a flag with text taking advantage of the zero border -0

{{-0%10,6|!0F0|!FFF|!F00}|T:Made in Italy;}
f Font Block Define the font to be used in the current container or object and in all the sub-containers.

The syntax is fxxx where xxxx are one or more style options.

The current supported style options are: b (bold), i (italic), a (arial), (courier), n (disable font).   


Example

Create a container with bold-italic-arial font and the text OK

{fbiT:OK;}
r Radius Spot Define the radius for drawing objects in the current container or object. Currently, this styler takes effect only on the border.

The syntax is rN where N is the radius in scaled pixels


Example

Create a container 50% x 50% with solid border with radius 50 eq. pixels

{%50,50-1r50}
p Padding Spot Define the distance between border (container boundaries) and content for drawing objects in the current container or object. 

The syntax is pN where N is the distance in scaled pixels


Example

Create a container with border, the text OK and padding 20 eq pixels

{p20-T:OK;}
d Displacement Spot Displace the current container or object with respect to its expected position

The syntax is dx,y where x and y are respectively the horizontal and vertical displacements scaled with respect to the horizontal display size.

Example

Create two containers, white and blue, of size 50% x 50% overlapping them almost completely

{%50,50!FFF}{d10,-40%50,50!00F}
o Opacity Spot Define the opacity of the container or object. 

The syntax is oN where N is the opacity in percentage. Opacity of 100 means full opacity (not transparent). Opacity of 0 means full transparent.


Example

Create two containers, white and blue, of size 50% x 50% overlapping them almost completely and making the blue one transparent (opacity 70%)

{%50,50!FFF}{o70d10,-40%50,50!00F}
a Angle (rotation) Spot Define the rotation of the container or object. 

The syntax is aN,x,y where N is the rotation angle in degrees (clockwise), x and y represent respectively the horizontal and vertical position of the rotation centre in percentage of the object size (e.g. to rotate an object by 90 degrees around its right top corner: a90,100,0)


X and Y are optional and if not specified their values will be assigned to 50 (i.e. the object is rotated around its centre) 


Example

Create two nested centered containers of size 50% x 50%, white and blue with the nested one rotated by 45 degrees (around its centre)

{%50,50!FFF^{a45%50,50!00F}}
g Background image Spot Define the image to be used for the container background or object

The syntax is gxxxN where xxxx are styler otions and N is the number of the picture to be used. Please refer to the list of pictures.

The available options are: n (do not repeat the image if the area to cover is larger than the picture. If this happens the image will be enlarged to cover the whole area)

Example

Create a containers of size 50% x 50% and cover the background with the image number 1

{%50,50g1}
v Vertical Spot Change an object orientation so that it will appear vertical, instead of horizontal. This styler takes effect only on some objects. Please refer to the object section to know if this styler works on the object you need.

The syntax is v

Please note that, to make containers or objects vertical it is always possibile to use the angle styler (a) that rotates elements.

Example

Create a vertical slider (min=0, max=100, step=1, value=50)

R1v:0:100:1:50;
h Shadow Spot Display either the container's shadow or the object's shadow.

The syntax is hxN,CCC,M where x is one char option, N represents the position of the shadow in pixels, CCC the shadow 12-bit color represented with 3 hexadecimal digits, M the blur distance.  

The available shadow options are: t

The t options applies the shadow to the text instead of the container.

Example

Create a square blue container with faint defined white shadow:

{%50,50!00Fh5,FFF,30}
n Line height Spot Define the text line height.

The syntax is nN where N represents the line-height with respect the font-size. N = 10 corresponds to a line height equals to the font-size.

Example

Create a box with the text "Hello World" over 2 lines whose height is 2 times the font height

{-%1n20T:Hello World;}
k Display Spot Define the display type for the current container or object. Currently this styler set the display type to block. This styler can be used for instance to make text objects as block.

The syntax is

Example

Create a block of text with size 80% blue background, rotated by 15 degrees

Tka15,0%80!00F:Hello World!;
@ At
(Absolute position)
Spot Manually set the position of either the container or the object on the display.

The syntax is @x,py where x and y are the horizontal and vertical position to be assigned to the container or object, and p is one char option. Please note that, by default, both the coordinates are scaled with respect to the display width and are given in percentage.

The available option are: y

The y option asks to scale the vertical position with respect to the display height instead of the display width. 

Example

Display a X at the display centre

{@50,y50T:X;} Please note the y option before the height coordinate.
z z-index Spot Set the z-index of either the container or the object. Elements with higher z-index will appear in front of elements with lower z-index. This styler is useful when some elements overlaps as a consequence of the displacement styler (d) of absolute positioning styler (@). By default, each element has z-index of 0. Positive and negative indexes can be used. The maximum allowed value is 999.

Example

Overlap two boxes at the centre of the display, making the red one in front of the blue one.

{z1@40,y40%20,20!F00}{@50,y50%20,20!00F}
s Styler Class Load Spot Recall a previously stored styler class. This styler permits to load a styler class, which has to be previously saved, and to apply it to multiple containers or objects. Styler class can be saved using the virtual S object. Please refer to the object table to know more about this virtual object.

The syntax is: sn where n is the number of saved styler class to be loaded.

Example

Define a styler class with blue background, rounded solid border, yellow color, white box shadow, padding, big fonts, and apply it to 3 text boxes.

S1*20r20-!00F#FF0p15h3,FFF,5;/Ts1:1;Ts1:2;Ts1:3;
~ Global ID assignment Spot This styler assigns a decimal number, called Global ID, to objects or containers. The global ID permits to identify a panel element (object/container) during the run time.

The syntax is: ~n where n is the global ID number, which can be any decimal value (integer).

Example

Define a container with size 50% x 50%, background color white and assign to it the Global ID number 31

{~31%50,50!FFF}