Customizing the tool Copy link to clipboard

Changing model appearance using cascading style sheets (CSS) Copy link to clipboard

itemis Model Viewer controls the visual appearance of model elements by way of cascading style sheets (CSS). The tool has a built-in CSS style sheet called Standard. However, you can provide your own styling rules in the form of CSS files. Figure "Customizing model representation using cascading style sheets" is showing an example.

Customizing model representation using cascading style sheets

Providing your own CSS file Copy link to clipboard

In order to provide and use your own CSS rules, proceed as follows:

• In the installation folder of itemis Model Viewer, create a subfolder named styles.
• Place your CSS file, e.g., I_did_it_my_way.css, into the styles subfolder.
• In itemis Model Viewer’s main menu, select Window → Preferences.
• In the Preferences dialog’s navigation on the left, select itemis Model Viewer.
• The Style drop-down menu displays the Standard style plus the names of the CSS files in the styles directory. Select the one you want to use, see figure "Selecting a CSS file".
• Click on the OK button to activate the new styling and to close the Preferences dialog.

Selecting a CSS file

Available CSS classes Copy link to clipboard

The sample style sheet above already showed some CSS classes you can use as selectors for your styles. Here’s an exhaustive list of the supported CSS classes:

As itemis Model Viewer uses JavaFX for rendering model elements, you can obtain further information on CSS styling from the JavaFX reference documentation.