Child pages
  • Styling your Applications

Versions Compared

Key

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

Servoy supports the use of HTML cascading style sheets (CSS 3.0) for styling the applications. The styles in a CSS apply to a form and the elements on a form.

Stoc

Styling NGClient

For styling the ng client see this chapter: Styling in the NGClient

The NGClient utilizes unprocessed CSS (3.0) to do all styling of solutions.

All possible CSS properties can now be used, like:

  • All types of selectors
  • Pseudo-classes

Solution StyleSheet

The stylesheet can be specified at solution level. It has to be stored in the solution's media node; for usage of images from media library inside the .css/.less please use relative URL's.

In the Solution Explorer Tree you can just create a new file (xxxx.css or yyyy.less) in your media folder of your solution, which can then be assigned to the stylesheet property of the solution node.For a more flexible use of CSS Servoy also implements a compiler for Less files.

Stoc


Overview

Servoy supports the use of HTML cascading style sheets (CSS) for styling applications. These text files are stored in the solution's media node. 

...

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.

Styling NGClient

For styling the ng client see this chapter: Styling in the NGClient

The NGClient utilizes unprocessed CSS (3.0) to do all styling of solutions.

All possible CSS properties can now be used, like:

  • All types of selectors
  • Pseudo-classes

Solution StyleSheet

The stylesheet can be specified at solution level. It has to be stored in the solution's media node; for usage of images from media library inside the .css/.less please use relative URL's.

In the Solution Explorer Tree you can just create a new file (xxxx.css or yyyy.less) in your media folder of your solution, which can then be assigned to the stylesheet property of the solution node.

Working With a Style

To open an existing style sheet:

...