• Layout type
• Control flow direction
• Class map
• Resolve abstract CSS class names
• Style name
• Customize style colors and fonts
• Color palette
• Use compact theme
• Edit style in Style Builder
• Font Size
• Local sub-theme definitions - Javascript
• Local sub-theme definitions - CSS
• Control Behavior Overrides
• Label width
• Center component on page
• Use drag scrolling
• Page title
• Font scaling option
• Style sub-theme and CSS 'tweaks'

Class map

Description

Specify how the abstract CSS class names used in this component map to physical CSS class names in your style sheets.

The 'Class map' property is useful for tweaking certain aspects of existing styles. The overall style of a component can be set in the Style name property. The style that is selected in 'Style name' contains a certain number of 'physical' CSS classes that map to 'abstract' CSS classes that are defined in each of the controls in your component. When you run a component, Alpha Anywhere automatically maps the selected physical CSS classes on to the abstract, or placeholder, classes. You can override any of these automatic class assignments by re-assigning an abstract CSS class to a new physical CSS class that you have defined yourself. Uncheck the Resolve abstract CSS class names property and run the component in a browser to view the abstract class placeholders as they appear without styling. The process of setting abstract CSS class names is explained in this two part video on 'Abstract CSS Class Names'. You can also follow the guide below.

• Watch Video - Part 1
• Watch Video - Part 2

Viewing Abstract Classes in a Browser

Before a new physical class can be assigned to an abstract class, it is necessary to first know the name of that abstract class. One way to do this is to open a component's abstract classes in a browser and then inspect the html of different elements inside that component.

1. In the UX Builder on the UX Controls page define a UX component by adding multiple types of controls to the controls tree..

   

2. Open the UX Properties page and click the [...] button next to the 'Style name' property in the UX Properties section.

   

3. From the Location menu select 'System'. Select one of the options from the list of available styles. Click OK.

   

4. Open the component in Firefox.

   

5. You should see the component displayed with the styling you specified. Right click and select 'Inspect Element' from the browser menu.

   

6. Click on the HTML viewing option and view an element in your component, you should see the physical CSS class assignments to each element. Here, for example, the label for a dropdown box.

   

7. Go back to Alpha Anywhere's Design tab and return to the UX Properties page. Uncheck the 'Resolve abstract CSS class names' checkbox.

   

8. Run the component again in Firefox, you should only see the rough styling of the underlying abstract CSS class.

   

9. Right click and select 'Inspect Element' again from the browser menu. Click on the HTML tab and view the class assignment for a given element. You should see the abstract class for that element in square brackets; like this one 'class=[class.dialogFieldLabel]'.

   

Assigning New Physical Classes to an Abstract Class.

Having identified an abstract class in the component to override, we can now assign that class a new 'physical' CSS class definition and re-enable all of the other existing default class definitions as well.

1. Open the UX Properties page and check the 'Resolve abstract CSS class names' property in the UX Properties section.

   

2. Click the [...] button next to the 'Class map' property, also in the UX Properties section.

   

3. Click the 'Insert an abstract CSS Class Name' button and select the name of the abstract CSS class that you want to modify in the UX component you are editing.

   

4. Put an equals sign and add the name of a physical class that you will define. The result should look something like the following. Click OK to close the Class Map Overrides dialog.

   [class.dialogFieldLabel]=newFieldLabel

   

Defining a new Physical Class

1. In the UX Properties page go to the CSS/SVG properties section. Click the [...] button next to the 'Local CSS definitions' property.

   

2. Open the 'Code' pane of the 'CSS Editor'.

   

3. Add the name of the new physical CSS class you want to define to the editor. Make sure to prefix the class name with a period '.' in order to denote that this is a CSS class. Place the CSS styling definition inside curly brackets after the classname. Click OK.

   

4. Run the component in Live Preview. If the abstract class that was modified is used in the component, the new physical CSS class definition should be visible.