Evolutility.org 4.1

Skins (fonts, colors, sizes)

Evolutility skins are composed of a stylesheet with associated pictures. This section explains how it all connects together.



Evolutility can uses stylesheets for the colors, fonts, sizes of its visual elements. Styles can be defined in the HTML or in external stylesheet documents (CSS files).

Fields and groups

.Field, .FieldView, .FieldReadOnly, .FieldComments, .FieldMain

Stylesheet class names used by Evolutility are as follow:

In addition to the former style classes, it is possible to set the class of each specific field or panel by using the "cssclass" attribute in the metadata for any field or panel.

Also, specific class names are used for some of the modes: "FormLogin", "FormSearch", and "FormExport".

To attach a stylesheet to your ASP page, use the "LINK" tag in the header declaration.


"FieldInvalid" is used for fields not passing validation (in conjonction with the "Field" class).

    <title>Evolutility Demo</title>
    <LINK href="evolutility.css" rel="stylesheet" >

Toolbar (using sprites)

To be as lightweight as possible, Evolutility is using a single file for all icons of its UI. This single file is specified in the style sheet. It is essential to the toolbar and other UI elements.

right-to-left justified text

Evolutility can be setup for right-to-left justified languages.

.FieldR2L{ font-family:Ezra SIL; direction:rtl; color:#000000; background-color:#FFFFFF; width:100%; }


Application Icons and pictures

Entities icons are specified in the metadata by the attribute icon of the element data. Other attributes related to pictures are: dbcolumnicon, img, and imglist

The path to the toolbar icons is specified by the property VirtualPathToolbar of the control. 

Many customizable skin templates are available at Open Source Web Design.

Note: Evolutility generated HTML doesn't fully support XHTML transitional or strict yet.