Starting with Profound UI Version 6, Fix Pack 0.2, Visual Designer offers a CSS Selector Dialog for the 'css class' property that will allow you to browse through various CSS classes that are available to use for widgets. This dialog gives you the ability to: view the rules that a specific CSS class contains, view the class in the CSS file where it is located by opening the file in the Visual Designer, search for specific classes and/or CSS rules and see a preview of the CSS class on your widget before selecting it.

You can open the CSS Selector Dialog by clicking on the browse button located on the 'css property':

This button will open the following dialog window:

Previewing and Selecting A CSS Class

The CSS Selector Dialog gives you the ability to preview different CSS classes on your widget before actually selecting a class. The dialog automatically shows you the chosen CSS class on your widget whenever you choose an option from the list. Below is an example of how this works.

In this example, we've added a 'grid' widget to the screen from the Blueprint widget set. If we wanted to see what this grid would look like using the Office Copy widget set CSS classes, we can simply click on the grid widget and open up the CSS Selector Dialog to choose our desired class:

You can see here that after we choose the 'office-copy-grid' CSS class, the grid now shows in the Office Copy style. The top of the dialog window will specify which CSS class you've chosen to preview and the section at the bottom of the dialog will show you the rules that belong to this particular class. This section also tells you that these rules are located in the profoundui.css file.

If you click on the file path here:

The Visual Designer will bring up a copy of the CSS file and highlight the CSS class name in the file for you:

*It's important to note that you should not make any direct modifications to the profoundui.css file that is shipped with Profound UI. You can, however, copy CSS classes from this file and put them in a separate CSS file that you can use to make any desired changes.

*It's also important to note that simply previewing a CSS class from the CSS Selector Dialog will not apply that class to your widget. If you want to apply a CSS class to your widget, you will want to make sure that you select the class from the list and then choose the 'Select' button located in the bottom right-hand corner of the dialog.

Searching for CSS Classes and Rules

The CSS Selector Dialog provides multiple options to help you find the CSS style that you're wanting to use for your widget. By default, the search functionality allows you to search for a particular CSS class name that you're wanting to preview or apply to your widget. For example, if you wanted to search for the 'office-copy-grid' CSS class, you would simply type this into the search textbox and the dialog will show a list you every CSS class that includes this text:

Additionally, the CSS Selector Dialog also allows you to search for CSS classes that include a specific CSS rule. For example, if you wanted to see a list of all of the CSS classes that include the 'clear' CSS rule, you would type 'clear' into the search textbox and then check the 'Search Rules' checkbox:

When you have this option checked, the dialog will show you a list of classes that either have this text in the class name or classes that are currently using this rule (in this example, the classes either use the 'clear' rule or have 'clear' somewhere in the class name).

The dialog also offers a way to sort the CSS class in ascending or descending order. This is done by simply pressing the 'Sort' button located on the dialog:

By default, the CSS class list will be sorted in ascending order. However, you can change the sort order at any time by pressing the button highlighted above.