CSS Themes

Applying A Theme

You can apply one of the standard built-in AppSynergy CSS themes to your application or create an entirely custom CSS theme. In either case there are steps you must take to apply the theme to your application to make it look its best.

To apply a new theme to your application begin by selecting the desired theme via File > App Settings... > CSS Theme. Once you have done this you may also need to modify some settings in your application to allow the theme to take effect:

• Set all widgets to Theme Default. Theme styling of color and fonts can be overridden on a widget-by-widget basis via the toolbar. Newly created widgets are set to "Theme Default" as of v96, but applications built prior to v96 (June 2020) default to other settings. To make a theme fully apply to older applications, you must choose Theme Default for all its colors and fonts. To make the conversion process easier, there is a new command Format > Apply Theme Defaults that will set theme defaults on the selected object and all of its child objects (i.e. Apply Theme Defaults to a Tabs object would apply it to all tabs and all objects under each tab in a single step).
• Use Box objects for headers. The Box object on the palette is primarily used to group header items. Simply drag off a Box object and drop it above a Record or Report widget, then place buttons, text, etc inside the box to automatically apply theme styling. Box objects can also be used within Record objects to form a header above child records. To group multiple existing objects into a box (for example, to redesign an application) you can select multiple button and text objects (via Ctrl-Click) then choose Edit > Group into Box.
• Set Style to Modern for Tabs and Menus. Consider changing Tab and Menu object styles to Modern via the toolbar's Style drop down (note that Modern is now the default for newly created menus and tabs).

Custom Themes

The easiest way to create a custom theme is to copy and paste a standard AppSynergy theme and modify it as desired.

Any widget attribute set to Theme Default in your application will now adopt the characteristics of the theme currently in effect for the application. CSS Themes are account-wide in scope, so the same CSS theme can be applied to multiple applications.

• See File > CSS Themes... to create a custom CSS theme.
• See File > App Settings... to apply a custom CSS theme to your application.
• See Format > CSS Style... to apply a custom CSS class to a widget. Custom CSS classes allow you to create object sub-types with consistent characteristics. For example, you might create a custom CSS class called FieldLabel that is a certain color and font size, then apply that custom CSS class to all your field labels.

Inheritance and Custom CSS Classes

CSS classes follow the same inheritance hierarchy as the underlying widget class hierarchy (see the API documentation for details). For example, the inheritance hierarchy for a NumberFieldWidget is [AbstractWidget > FieldWidget > TextFieldWidget > NumberFieldWidget] whereas the inheritance hierarchy for a TextWidget (i.e. a piece of text, not a field) is simply [AbstractWidget > TextWidget]. This allows you to customize at a parent level and reformat all children, or create special variations for children.

ParaSQL uses multiple CSS selectors separated with spaces. For example, if you inspect a text widget you would see its CSS class defined as "AbstractWidget TextWidget". If you specify a custom CSS class for a widget it will be added (with a space) to the list of classes. The order of the classes specified on the widget do not matter, but the order of the CSS classes in your custom theme do.

We suggest that if you create a custom CSS class you do so as follows (note this example is for a TextWidget):

Then if you used Format > CSS Style... and specified MyCustomClass for a group of text objects their underlying CSS class definition would look something like this: "AbstractWidget MyCustomClass TextWidget" (with CSS specificity rules determining which settings prevail).

Note that in most cases you can achieve the customization you want just by customizing the built-in classes (as in the following examples) and setting the widget settings to Theme Default. Custom CSS Classes should be reserved for only those use cases where you need multiple variants within the same application (e.g. a TextWidget used for a field label vs. a TextWidget used for a heading above a record, or square vs. round buttons if your application uses both).

TIP: When running your app with Chrome, you can right-click on an element and choose Inspect. This will show you that element's class definition and its class hierarchy so that you can more easily understand how to customize it.

Default CSS Definitions

The following link contains all of the AppSynergy / ParaSQL CSS definitions. PLEASE DO NOT simply copy and paste all of the CSS into your theme and then modify just a few pieces as this is highly unmaintainable and will likely cause conflicts with future AppSynergy releases.