Following elements can have scroll: text, sel_4state, elem_group.
To use it, specify attribute scrl=”yes” in the element.
Then you can use default scroll or fully configure it for your needs.
The default scroll is:

<scroll>
  <conf  scroll_step="50" scroll_step_time="0.3"/> 

  <bg eltype="elem_group"  x="R+3" y="12"  w="7" y2="B-12" >
    <el eltype="bord"  x="0" y="0"  x2="R" y2="B"  c="0xcccccc" a="100" r="0"  t="0.5" />
  </bg> 

  <sld  eltype="el__2state"  x="R+3" y="12"  w="7" y2="B-12" >
    <el>
      <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x999999" a="100" r="0"  />
    </el>
    <elov>
      <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x333333" a="100" r="0"  />
    </elov>
  </sld> 

  <bar eltype="elem_group"  x="R+3" y="12"  w="7" y2="B-12" >
    <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x3333cc" a="0" r="0"  />
  </bar> 

  <btn_up eltype="el__2state"  x="R+3" y="0"  w="7" h="10" >
    <el>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="B"  x2="R" y2="B"  x3="C" y3="0"    c="0x999999" a="100" />
    </el>
    <elov>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="B"  x2="R" y2="B"  x3="C" y3="0"    c="0x333333" a="100" />
    </elov>
  </btn_up> 

  <btn_down eltype="el__2state" x="R+3" y="B-10" w="7" h="10">
    <el>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="0"  x2="R" y2="0"  x3="C" y3="B"    c="0x999999" a="100" />
    </el>
    <elov>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="0"  x2="R" y2="0"  x3="C" y3="B"    c="0x333333" a="100" />
    </elov>
  </btn_down>
</scroll>

<conf – scroll configuration (optional). By default, scroll_step is 50 (pixels) for sel_4state, elem_group and 3 (lines) for text. scroll_step_time is 0.3 sec by default.

<bg – graphics, background, etc.

<sld – slider. It will be resized to a required height.

<bar – specifies “operational” area for slider movement.

<btn_up – button for scroll up.

<btn_down – button for scroll down.

It is possible to apply a mask to any element.
It can be useful for creating non-rectangular shapes or prevent other elements to run out its borders.

To use:

• in the element definition add an attribute mask=”true”
• add sub xml to the element :

<el eltype="plugin" x="0" y="0" w="100%" h="100%" size="no" datatype="xml" attr="engurl" mask="true" >
  <mask>
    <el eltype="rect" x="0" y="0" w="100%" h="100%" c="0xcccccc" />
  </mask>
</el>

The element formed in the el/mask/ area will define a mask on the rest of the element its applied to.

For example, see source code at
http://ximl.com/sites/ximl_tabs1/conf.xml

It is possible to define custom elements once and use it through the entire site.
It is possible to use custom elements inside another custom element.
It is possible to use styles inside custom elements.

To define: in the configuration file, in /website/config/sys/elems, define custom element called TopNav_el_nrm

<TopNav_el_nrm eltype="elem_group" x="0" y="0" x2="R" y2="B" >
	<el eltype="rect" x="4" y="0" x2="R-4" y2="B" c="0xdddddd" a="100" />
	<el style="TopNav_txt_nrm" x="20" />
</TopNav_el_nrm>

To use:

<el elem="TopNav_el_nrm" />

As with styles, it is possible to overwrite any attribute when using the custom element.

For example, see source code at
http://ximl.com/sites/ximl_tabs1/conf.xml