Solution CSS picker

Overview

Solution CSS picker

The Solution CSS picker is a dialog used to assign a stylesheet to the active solution. It manages which LESS file (or other stylesheets) the solution will use for its UI. You can access it by selecting the styleSheet property in the Properties view of the selected solution node in the Solution Explorer.

This picker helps maintain a clean and manageable style layer by allowing you to easily:

• Select an existing stylesheet from the media library.

• Create a new stylesheet.

• Add LESS theme support to an existing stylesheet.

Sections

Solution CSS picker sections

Filter Field

• Located at the top of the picker dialog.

• Allows you to type part of the stylesheet name to filter the list below.

Stylesheet List

• Displays all available stylesheets in the media library.

• Selecting -none- will remove the assigned stylesheet from the solution.

Buttons

• Create New Stylesheet: Opens the Create New Stylesheet wizard, a separate dialog to create a brand new LESS stylesheet file.

• Add Less Theme Support: Appears only if the selected .less file does not already have LESS theme support. Opens the Setup a Servoy Less Theme wizard, a dialog to initialize theme support on the selected stylesheet.

• OK: Applies the selected stylesheet to the solution.

• Cancel: Closes the picker without applying changes.

Using the Solution CSS picker Wizard

Here are the steps for using the Solution CSS picker:

1. Open the CSS Picker

   • In the Solution Explorer, select your solution name

   • In the Properties view, find the styleSheet property and double click its value to open the picker.

2. Filter Stylesheets (Optional)

   • Use the filter input at the top to quickly narrow down the list of stylesheets by typing part of the filename.

3. Select a Stylesheet

   • Click on a stylesheet from the list to highlight it.

   • If you select -none-, the solution will no longer use a stylesheet.

4. Create a New Stylesheet

   • Click Create New Stylesheet to open a dialog where you can specify the name and location of a new LESS file in the media library.

5. Add LESS Theme Support

   • If you select a .less file that does not yet support LESS themes, click Add Less Theme Support to initialize theme capabilities in that file.

6. Apply or Cancel

   • Click OK to assign the selected stylesheet to the solution.

   • Click Cancel to exit without making changes.