You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 5
Next »
Table of Contents
Overview
Servoy supports the use of HTML cascading style sheets (CSS) for styling applications. These text files are stored in the resource project. A resource project can have many CSS files, and more than one CSS can used in a solution.
The styles in a CSS apply to a form and the elements on a form. Although the solution can utilize multiple style sheets, only one style sheet at a time can be used on a form.
Benefits of using CSS in Servoy include:
- Adds to the consistency of the user interface; form elements across the application can use the same styles.
- Gives the developer to make style changes over many/all forms by changing a single value in the CSS.
- Style sheets can be used over multiple applications, adding consistency to the all the company's applications.
- Adds consistency to an application in team development, making it easier for development teams to use the same styling on all forms.
- Style sheets can be changed programmatically, allowing a developer to change styles to different users' taste or to have periodic style changes in their applications. See overrideStyle function for more details.
Creating a Style
To create a style in Servoy:
- Do one of the following
- Select File>New>New Project from the menu in Servoy Developer. A window will appear; select the Servoy node and select New Style, click Next.
- Select the New Button in the top toolbar. A window will appear; select the Servoy node and select New Style, click Next.
- Right click on the Styles node under the Resources node. Select Create new style from the menu. A window will appear.
- With the Styles node selected, right click on any existing style and select Create new style from the menu. A window will appear.
- With the Styles node selected, select the Create new style button in the Solution Explorer list view toolbar. A window will appear.
- Enter the name of the new style. Click Next.
- Select to add sample content. Click Finish.
- The new css file will appear in an editor view in the center of the Workbench.
Working with a Style
To open an existing style sheet:
Structure of the Style Sheet