Page History
Servoy supports the use of HTML cascading style sheets (CSS 3.0) for styling the applications. In order to allow a more powerful way to interact with CSS syntax Servoy also support a compiler for the Less files compiler.
| Stoc |
|---|
CSS Overview
CSS is a plain text file that contains the style that is applied to every form of an application and to every component that can be shown in inside it.
| Code Block | ||
|---|---|---|
| ||
.svy-field
{
background-color:#f0f0f0;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #cccccc;
font-family: Verdana, sans-serif;
font-size: 8pt;
color: #333;
text-align: left;
margin: 2px;
font-weight: normal;
}
.svy-form
{
background-color: #ffffff;
border-style: none;
}
.svy-label
{
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 7pt;
color: #666666;
text-align: left;
} |
...
Creating a Style
To create a style in Servoy:
...
new Style
Double click on the StyleSheet field in the Properties panel of the active solution
A window will appear from where a new Style (CSS or Less) can be created, or an existing one selected.
As a stating point a default file will all the classes preloaded will be proposed.
| Tip | ||
|---|---|---|
| ||
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. |
Right click on the Styles node under the Resources node. Select Create new style from the menu
...
. 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.
...
| title | TIP |
|---|
...
- .
Styling NGClient
For styling the ng client see this chapter: Styling in the NGClient
...
Overview
Content Tools
Activity