Child pages
  • Styling your Applications

Versions Compared

Key

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

...

Some difference exist regarding styling between solutions developed for NG client and solutions developed for smart or web client.

Styling for

...

Smart or Web

...

Client

  • only CSS stylesheets are supported, Less styling language is not supported,
  • CSS text files are stored in the Styles node of Solutions resources
  • limited selection of available classes 

Creating a Style for Smart or Web Client

To create a new Style for a Smart or Web Client

Right click on the Styles node of the Resources branch of the Solution Explorer

A window will appear from where a new Style can be created

As a stating point a default file will all the classes preloaded will be proposed.

Styling for NG

...

Client

  • unprocessed CSS (3.0) to do all styling of solutions.
  • Less styling language is supported
  • CSS and less text files are stored in the Media node of the active solution
  • All possible CSS properties can be used, like:
    • All types of selectors
    • Pseudo-classes

...

Creating a Style for NG Client

To create a new Style Style for a NG application:

Double click on the StyleSheet field in the Properties panel of the active solution

...

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.

Structure of the Style Sheet

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

...

Notice that the border style and font are not modified in the mytext class. This means if a label were specified to use mytext for its style, it would be bold, 10pt, Verdana because that is what is specified in the parent style definition. The color would be red (not black) because that was overridden by the mytext definition class.

Setting Styles to Form Elements


Any elements on a form with a style applied will take the styling from the style definition entry.  For example, if 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. 

...