Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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. 

...

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:

Image RemovedImage Added

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.

...

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:

 Image Modified

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.