Child pages
  • Styling with CSS

Versions Compared

Key

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

...

  1. Do one of the following
    1. Select File>New>New File > New > New Project from the menu in Servoy Developer. A window will appear; select the Servoy node and select New Style, click Next.
    2. Select the New Button button in the top toolbar. A window will appear; select the Servoy node and select New Style, click Next.
    3. Right click on the Styles node under the Resources node. Select Create new style from the menu. A window will appear.
    4. With the Styles node selected, right click on any existing style and select Create new style from the menu. A window will appear.
    5. With the Styles node selected, select the Create new style button in the Solution Explorer list view toolbar. A window will appear.
  2. Enter the name of the new style. Click Next.
  3. Select to add sample content. Click Finish.
  4. The new css file will appear in an editor view in the center of the Workbench.
Tip
titleTIP

It is normally easier to work with an existing style. Most of the sample solutions have a style associated with them and these style are imported when the solution is imported into Servoy Developer. You can also create a new style and copy/paste different entries from one style to another.

Working

...

With a Style

To open an existing style sheet:

...

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: #ffffff;
	border-style: solid;
	font: bold 10pt Verdana;
}

label.mytext {
	color: red;
	vertical-align: middle;
	border-width: 1px 1px 1px 1px;
	border-color: #111111 #111111 #111111 #111111;
	margin: 2px 2px 2px 2px;
} 

...

In order to use a style sheet, the style sheet must be applied to a form.  Solutions Solutions do not have a style sheet applied, only forms.  Styles Styles for the elements on a form are dependent on the style sheet applied to the form.

Setting the

...

Style in the

...

Form

A style can be applied to a form in one of two ways.

...

Tip
titleTIP

If you are creating forms, the style sheet selected for the first form will be automatically selected in the New Form Wizard for subsequent forms.  If If you happen to not enter a style sheet in the wizard, but would like to apply a style sheet to many forms, just multiple select the forms in the Solution Explorer and edit the Properties view.  This This will change the property on all the forms you have selected.

Setting

...

Styles to

...

Form Elements

Any elements on a form with a style applied AND have a style definition entered for the element type will take the styling from the style definition entry.  For example, if I am using the style test, and there is a label entry in the test style sheet, then ANY label placed on the form will take the label style from the style sheet. 

...