Working with custom CSS

Defaults are good, but in most projects you probably want to add custom styling to elements. You want a responsive table, or you might have a specific use case that requires additional CSS.

The Custom CSS file allows you to adjust values of CSS Custom Properties (Variables) and add extra CSS.

Selecting an ID

For the custom CSS you will need the classes and ID’s applied by MA!N. MA!N adds ID’s based on the XML that you use for pages. These can get quite long, and it can be tricky to find the right ID.

You can find the ID in the inspector of your browser (right click with your mouse and select Inspect or ‘Ctrl + Shift + I’/’CMD + Option + I’). It should look like this:

CallbackPanel_Panel_PortefeuilleOverzicht_Panel_PortefeuilleOverzicht_CallbackPanel_Panel_Debiteuren_Panel_Debiteuren_CallbackPanel_Grid_Debiteuren_Grid_Debiteuren_DXMainTable

You can use an element’s ID and class with all CSS functions and selectors. You may need those extra selectors more often than you are used to because you are overriding the default MA!N CSS.

Adding classes

Besides the IDs, you can also apply custom CSS to classes added by MA!N or to custom classes that you add in the XML.

You add a custom class to your XML with the CSS tag. You can add the CSS tag, with one or more classes, in a control. When a control uses the Type tag, you should place it before the CSS tag.

<Control ID='Label SelectedCustomer'>
    <Type>Label</Type>
    <CssClass>pageTitle</CssClass>

See also

• MA!N CSS library with classes that you can use.