In This Chapter

Solution StyleSheet

Stored in media folder, use images from media library using relative URL's

Converting Existing StyleSheets

Font Size Conversion

For the existing Servoy Clients, all font-size values specified in CSS are converted to a different value before being used.

var fontSize = '10px'
 
function convertSize(fontSize) {
	var units = fontSize.match(/(^\d.)(\w.$)/)
	if (units.length === 2 && units[1] === 'px') {
		if (units[0] === 9) {
			return '11px'
		}
		return (units[0] * (4 / 3)) + 'px'
	} else if (units.length === 1 || (units.length === 2 && units[1] === 'pt')) {
		if (units[0] === 9) {
			return '7pt'
		}
		return (units[0] * (3 / 4)) + 'pt'
	}
	return fontSize
}

CSS Selectors Conversion

StyleSheets for the Servoy Smart and Web Client could make use of Servoy specific type selectors. In the NGClient, where the stylesheets are interpreted by the browser, these Servoy specific type selectors are not available. Below a conversion table from the Servoy specific type selectors to their NGClient equivalent.

Smart/Web Client Type Selector	NGClient Selector
body	[ng-style="bodyStyle"]
button	button[svy-model]
check
combobox
even	.ngRow.even
field
footer	[ng-style="footerStyle"]
form	[svy-formstyle]
header	[ng-style="headerStyle"]
label
listbox	select[svy-model][size]
odd	.ngRow.odd
portal
radio
selected	.ngRow.selected
grid_header
spinner
tabpanel
title_header	[ng-style="titleheaderStyle"]
title_footer	N/A

Also NGClient will output special classes for default components that can be used from solution css to easily style all components of same time. The name of the class is svy-componentName (so svy-label, svy-button, svy-calendar, svy-textfield...). If you set another value for styleClass property this default value will not be present anymore and must be specified among styleClass values (as this should be already present in solution css, otherwise has no effect).

Multiple classnames

Browser Specific CSS Syntax

Child pages

Styling in the NGClient