Child pages
  • Styling with CSS

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

To open an existing style sheet:

  1. Click on Styles under the Resources project in the Solution Explorer and do one of the following:
    1. Select the style desired (shown in the Solution Explorer list view) and click on the Open style button in the Solution Explorer list view toolbar.
    2. Double click the style desired.
    3. Right click on the style desired and select Open style from the menu.
  2. The style will open in the center of the Workspace in an editor view.
Structure of the Style Sheet

A style sheet for Servoy has basic style definitions and style definition classes.

The style definitions for Servoy are as follows:

  • form
  • label
  • button
  • field
  • check
  • radio
  • combobox
  • tabpanel
  • portal

Under any of these style definitions, the developer can create many style definition classes. For example, the label style definition could have the style definition classes label.title, label.small, and label.bold.

Each definition and definition class can have one or many properties associated with it. Properties specified within the style definition are inherited(cascaded) to any style definition class under it. Study the example below

Code Block
 label

{

color: #993300;

border-style: solid;

font: bold 10pt Verdana;

}

label.mytext

{

color: red;

border-style: solid;

vertical-align: middle;

font: bold italic 10pt Verdana;

border-width: 1px 1px 1px 1px;

border-color: #111111 #111111 #111111 #111111;

margin: 2px 2px 2px 2px;

} 

label
{ color: #993300; border-style: solid; font: bold 10pt Verdana;
}
label.mytext
{ color: red; border-style: solid; vertical-align: middle; font: bold italic 10pt Verdana; border-width: 1px 1px 1px 1px; border-color: #111111 #111111 #111111 #111111; margin: 2px 2px 2px 2px;
}

Using Styles in Forms
Setting the style in the form

...