How to use Style Sheets

Style Sheets are a brand-new way of centrally styling your repository controls using a simple & intuitive user interface. This feature is designed to drastically reduce the time taken to create web based solutions, improve customer brand consistency and enable the rapid adjustment (switching) of colour palettes in repositories.

To access Style Sheets in a repository, first go to the ‘Styles’ section in MooD Libraries and there you will see a new tab option for ‘Style Sheets’. New Style Sheets can be created by clicking ‘New’. It is possible to have multiple Style Sheets used within a repository at the same time.

If you are using Style Sheets in a new repository the Default Style Sheet will be used for new controls automatically. If you have upgraded an existing repository and wish existing controls to use Style Sheets functionality, please see the ‘Bulk Apply’ section of this help guide to learn how to apply Style Sheets across the repository.

Default Style Sheets

A Default Style Sheet is already present in the software in both new and upgraded repositories. This default stylesheet will be used as the styling basis for all new controls used in the solution.

This Style Sheet cannot be deleted, moved or renamed, although the styling options can be copied from another stylesheet and applied to the repository default by right clicking a Style Sheet and clicking ‘Copy To’. Alternatively, you can directly edit the default Style Sheet by right clicking and selecting ‘Edit’.

When you are logged in as an Administrator and delete a Style Sheet, all panels associated with that Style Sheet will revert to the Default Style Sheet.

Style Sheet Editor

Either double click or right click and select ‘Edit’ on your chosen Style Sheet to make the Style Sheet editor popup in a new window. There are two tabs for styling options: The first Overview tab allows you to change setting and styles common in many panels, such as Font, Focus and Background Colour. This will allow you to adjust the majority of styling options used within a repository.

The second tab, Panels, provides a more detailed selection of styling options, giving options to change the distinct settings that only exist for specific controls and are not considered common options.

The recommended pathway for styling is to first use the simplified ‘Overview’ tab to adjust all palette and font settings used commonly across 80% of control options before configuring the individual distinct per control options in the ‘Panels’ tab. 

Interactive Preview

Another useful addition to the Stylesheet Editor is the Interactive Preview window. When customising control styling options, the preview will automatically update to show what your changes will look like once they have been applied across the repository. You can also adjust the background colour of the Interactive Preview window to reflect whatever background colour your solution is using.

Bulk Apply

There is also the option to ‘Bulk Apply’ Style Sheets from the Default Style Sheet. This function forces all existing user controls in a solution to use the selected Default Style Sheet settings, overwriting all existing styling settings.

This option can be found in the Styles Sheets tab. By right-clicking the Default Style Sheet you wish to Bulk Apply, a ‘Bulk Apply’ option will be present. By clicking Bulk Apply a dialog window will popup providing further details on exactly what will change if the operation is executed. Click the details tick box to see the content that will be changed. It is recommended to backup repositories before completing this action in case any rollback is desired.

Manually Applying Style Sheets

When on a model, there is an ability to apply a Style Sheet directly to an individual control. Simply select the control in question, click on the drop-down box highlighted below and select the Style Sheet you wish to apply.

This allows you to use multiple Style Sheets in parallel, for example, you may wish to create and apply a deep red Style Sheet to element creation or deletion controls in order to make them distinct from other, less impactful controls.

Style Sheets in Deployment Packs

Style Sheets can also be included in Deployment Packs. Once you have created a new Deployment Pack simply click the ‘Add…’ bottom to search for the Style Sheet(s) you wish to include as part of the Deployment Pack. This allows you to create a central Style Sheet in a single repository before then deploying this same Style Sheet(s) across multiple repositories using Deployment Packs.

For any further questions or inquiries, please contact support at support@moodinternational.com