News blog

What is Servoy?

Getting Started

Comparison Servoy/VFP




Code Reference


VFP2Servoy Toolkit



Contact / feedback















How to use Styles

Styles and cascading stylesheets are completely new to most VFP developers as a means to enhance their average windows application. We are pretty used to OOP and inheritance but the use of CSS (Cascading Style Sheets) offers a whole new dimension and very flexible possibilities to seperate look and feel from layout.

Servoy actually supports three ways to change the style (appearance) of a solution:

  • Look And Feel (LAF)
  • Skins
  • Servoy styles

Look And Feel (LAF)

This feature allows your client to change the default Look And Feel of the application comparable to the way you can change the default look and feel of your OS. The client can change this by choosing a look and feel from the preferences menu. You can even create your own look and feel schema. If you want to do this then you will find more information in the User Guide.

Default LAF

Metal LAF

Nimbus LAF


A Skin is basically a zipfile with elements to enhance the graphical user interface (GUI) very similar to the way Look And Feel styles are applied.There are also out-of-the-box third-party styles that you can buy. I saw an impressive presentation by Centigrade at Servoy World 2011 of their interface enhancement products. For a lot of endusers an application is only as good as it looks...

Servoy styles

A Servoy style is an HTML cascading style sheet (CSS) - a textfile containing style definitions. You can share styles between solutions, apply styles to one or more forms or apply styles to one or more form elements.

In the samples a solution has been included to demonstrate styles. To see the effect of styles do the following:

  • Activate the servoy_sample_styles solution
  • Start the smart-client or the web-client
  • Change the style to see the effect

Style svy_Autumn

Style svy_Charcoal

Style svy_Wheat

For those of you who are unfamiliar with cascading style sheets (CSS), see the example below. A cascading style sheet consists of a textfile with an HTML markup-language that describes what style to use on user-interface elements of a certain type.

By default the styles are located in the servoy_localhost_resources folder of the servoy_workspace folder. When you look inside the svy_Autumn.css file you will see blocks of code where each block contains markup code for a specific object such as label, button, form, tabpanel, field, field.border, field.noborder etc.
While these design features are applied by default they can be overridden at the form or element level.

Style sheet svy_Autumn

To create your own servoy style sheet do the following:

  • In the Solution Explorer locate the Styles folder
  • Right-click the Styles folder and select Create new style
  • Make sure the checkbox to add sample content is checked
  • Modify the generated style sheet to suit your needs

Create new style dialog

Check select sample style content

Style sheet editor

If you want to know more about creating cascading style sheets take a look at

External resources:


vfp plugin


ServoyWorld 2012 pics


Official Servoy website


Ken Levy on Servoy


Servoy info


Servoy Forum


Servoy Documentation © 2010-2012 • All rights reserved • Contact: