Cascading Style Sheets and the HTML5 theme

A collection of cascading style sheets are used with the HMTL5 theme. Be sure that you modify the correct style sheet.

The default template for the HTML5 theme, $FGLASDIR/tpl/SetHtml5/main.xhtml, includes these stylesheet links:

...
<link
	href='{resourceuri("css_normalize.css", "SetHtml5")}'
	rel='stylesheet'
	type='text/css'
/>

<link
	href='{resourceuri("css_main.css", "SetHtml5")}'
	rel='stylesheet'
	type='text/css'
/>

<link
	href='{resourceuri("css_layout.css", "SetHtml5")}'
	rel='stylesheet'
	type='text/css'
/>

<link
	href='{resourceuri("css_theme.css", "SetHtml5")}'
	rel='stylesheet'
	type='text/css'
/>

<link
	href='{resourceuri("css_customisation.css", "SetHtml5")}'
	rel='stylesheet'
	type='text/css'
/>
...

When you resolve the references, these files are located in $FGLASDIR/tpl/SetHtml5/.

The purpose of these files:

css_layout.css - Contains HTML5 client layout rules. Do NOT modify this file.
css_normalize.css - Normalizes browser rendering. Do NOT modify this file.
css_theme.css - Provides the HTML5 look (mainly colors, borders and fonts). Do NOT modify this file.
css_main.css - Provides styles not handled by the other CSS files. Do NOT modify this file.
css_customization.css - Where you provide your customization details. This is the only file you should modify.

You override the HTML5 theme styles by adding your customization to css_customization.css. To identify which styles you can override, examine the entries in css_theme.css. The css styles have a suffix of "-style".

For example, if you want to change the background color of your form, you would first locate the appropriate style entry in css_theme.css:

.document-style {
  
  font-size: small;
  color: #333333;
  
  background-color: white;
}

You would then override the style by creating an entry in css_customization.css:

.document-style {
  background-color: whitesmoke;
}

Only list the style attributes you wish to override.