With the Midnight look, PMP (Performance Management Process) evaluation forms adopt a refreshed style for section titles, fields, labels, icons and spacing. This article explains how graphic customizations (CSS and HTML) interact with the Midnight look inside PMPs, and how to write customizations — both new and existing — that work correctly without being overridden or, conversely, without unintentionally overriding the Midnight style.

Keep the rules described here in mind whenever you configure the look of a Custom domain or change the style of a PMP form.

Scope

The guidance in this article applies only to the Performance section and more specifically to PMP forms: evaluation form, goal compilation and subviews such as Competencies, Development actions, Skills. It does not affect other areas of the application, where the standard graphic rules apply.

Elements restyled by the Midnight look in PMPs:

• Section titles (headings with an icon on the left): colour, font, icon and spacing
• Read-only fields: background and border colours
• Field labels: typography and, where applicable, a check icon on the left
• Spacing of rows, tabs and boxes
• Empty titles: automatically hidden
• Icons (for example the dropdown arrow in workflow menus)

How the Midnight look interacts with customizations

The Midnight graphic rules for PMPs are built to:

• apply only to PMP pages and not to the rest of the application;
• have higher priority than the base graphic.

As a result, a graphic customization takes precedence over the Midnight look only if it is equally targeted and has at least equivalent priority. Customizations written in a "light" form (simple selectors, without forced priority) are overridden by the Midnight look inside PMPs.

This works in both directions: if you need to keep a custom style inside PMPs, follow the rules below; if you want to leave the default Midnight look, make sure that existing customizations do not override it with forced priority.

Where PMP graphic customizations live

Customizations that can affect the appearance of PMPs come from two distinct places:

Custom domain CSS

From the menu Setup → Custom domains by opening the custom domain, on the first tab, you find the style sheet loaded at domain level. It acts globally on the whole back office, including PMP forms. See Customizing the logo in the back office and Configuring a custom domain.

HTML and CSS entered inside PMP views

From the menu Setup → User interface → Views & Forms Configurator you can open each PMP view and, from the property page of every field or title, insert custom HTML (formatted text, descriptive headings, inline styles). These customizations are stored in the view definition and are rendered in the page together with the standard graphic.

With the Midnight look, inline styles applied to section titles are no longer automatically "cleaned up" by the application as they used to be: they are applied as they are. Keep this in mind when you configure or review a section title with an inline style with forced priority, because it will take precedence over the Midnight look.

Rules to follow when customizing the PMP look

They apply both to existing customizations to be adjusted and to new ones:

1. Always limit the customization to PMPs only if it must not affect the rest of the application. In the domain CSS, prefix your selector with body.PMP (for example body.PMP .titoloscheda { ... }).
2. Make the selector specific enough, adding the container classes (for example table.ScMainFormMaschera). The more specific the selector, the more your rule takes precedence over the Midnight look.
3. Add !important to the properties that must prevail (colours, background, padding, margin, font-size, etc.).
4. In the Views & Forms Configurator, for HTML/CSS entered in the properties of a field or title, apply the same principle: use inline styles that are specific enough and !important where needed — or remove them if you prefer to keep the default Midnight style.
5. Always verify on real PMP forms: evaluation, goals, competencies, development actions, both in read and write mode. The Midnight look reacts to multiple states (empty field, with icon, editable, read-only).

Most frequently involved elements

These are the areas of the PMP typically touched by customizations, and therefore to be checked first:

• section titles (headings of forms and subviews);
• read-only fields with custom background, border or icon;
• labels and introductory texts with modified colour, font or alignment;
• descriptive HTML blocks inserted in views (prefaces, instructions, legends).

Summary

• The Midnight look has higher priority than the base graphic or over customizations, exclusively on PMP forms.
• PMP graphic customizations can live in the domain CSS or in the HTML/CSS of fields and titles set from the Views & Forms Configurator.
• To coexist correctly with Midnight, a customization targeted at PMPs must have a specific selector and use !important on the properties that must prevail.
• These rules apply both to customizations that existed before the Midnight release (to be adapted) and to new ones (to be designed following these rules from the start).
• Always check the result on real PMP forms.

See also

• Customizing the logo in the back office
• Configuring a custom domain
• Views & Forms Configurator