Child pages
  • Styling your Applications

Versions Compared

Key

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

...

Code Block
titleCSS file sample
.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;
}

The CSS files text file is stored in the solution's media node. 

...

  1. Click on Styles under the Resources project in the Solution Explorer and do one of the following:
    1. Select the style desired (shown in the Solution Explorer list view) and click on the Open style button in the Solution Explorer list view toolbar.
    2. Double click the style desired.
    3. Right click on the style desired and select Open style from the menu.
  2. The style will open in the center of the Workspace in an editor view.

...

Less Overview

Less (stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS that that helps you write .css that is more dynamic. It supports variables and other helpful concepts. In Servoy Developer the .less file will compile  into an actual .css automatically. For a detailed documentation about Less language see the Official Documentation for Less.

...

  • For detailed documentation on Less language features, see Features


    Code Block
    titleLess sample
    // import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties 
    @import 'custom_servoy_theme_properties.less';
    
    // Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less 


Structure of the Style Sheet

...