Add Custom CSS to a Screen

Add Custom CSS to a ProcessMaker Screen
Use the Custom CSS mode to add custom CSS styles to a Screen. ProcessMaker supports standard Cascading Style Sheet language (CSS) syntax.
ProcessMaker Permissions
Your user account or group membership must have the following permissions to add custom CSS to a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Visibility Rules Override Custom CSS
If a Screen control affected by a visibility rule is hidden by default from custom CSS, the visibility rule overrides the custom CSS design. For example, if custom CSS is designed to hide a Screen control by default when that control's visibility rule dictates that it be visible, the visibility rule overrides the custom CSS to display that control. As a best practice, use visibility rules instead of custom CSS to hide a control by default.
Need to Learn CSS?
Start with W3School's free CSS tutorial.
Follow these steps to add custom CSS to a Screen:
1.​Open the Screen in which to add custom CSS. The Screen is in Design mode.
2.Click the Custom CSS button
. The Custom CSS screen displays.  
​
​
3.Enter your custom CSS syntax.
4.Optionally, reference the CSS Selector Name setting value for specific Screen controls to indicate that CSS styling applies to those controls. Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. The reference is case sensitive in the CSS syntax. See Apply CSS to Specific Screen Controls. Example: [selector='Submit Form'].
5.Address any syntax errors or changes as necessary, then click Save.
6.Click the Preview button to view your CSS syntax for your Screen in Preview mode. Custom CSS does not display in Design mode.
7.Click the Design button to return to Design mode, and then repeat Steps 2 through 6 as necessary.
Customize CSS Styling Using Wildcards
Use standard Cascading Style Sheet language (CSS) syntax as well as wildcards to customize CSS styles for ProcessMaker Screen controls.
Apply CSS to Specific ProcessMaker Screen Controls
Use the following syntax to apply CSS styling to a specific control in this Screen by referencing its CSS Selector Name setting value. Use single quotes (') around the control reference. The reference is case sensitive in the CSS syntax. As a best practice, use the same CSS Selector Name setting value on different controls of the same type to apply the same custom CSS style to all those controls.
[selector='CSS Selector Name Setting that is case sensitive']
Example for a Screen control with the CSS Selector Name setting value of Submit Form:
/ * Style a control by referencing its CSS Selector Name setting value * /
[selector='Submit Form'] {
    color: blueviolet;
}
Apply CSS to All Pages in a ProcessMaker Screen
Use div.page to apply CSS styling to all pages in a Screen.
Example:
/* Setting CSS for all pages on a Screen */
div.page{
    background-color: lightblue;
}
Apply CSS to Make Form-Type Screens Read Only
A common use case is to make existing Form-type Screen controls read-only by using the Read Only setting for controls that have this setting. Instead, accomplish this with the Input CSS class.
input[type=text] {
    pointer-events: none;
    background-color: lightgrey;
}
Also use a Nested Screen control in combination of a Multicolumn/Table control to reference all inputs inside of the Multicolumn/Table control, which is multi in the example below.
[selector='multi'] input {
    pointer-events: none;
    background-color: lightgrey;
}
Related Topics
What is Screen Builder?
Screen Types
Screen Builder Modes
Validate Your Screen
Edit Your Screen
Add, Delete or Rename a Page
Preview a Screen and Its JSON Data Model
Manage Calculated Properties
Manage Watchers
Undo and Redo Changes in Your Screen
Save Your Screen
Screen Design Best and Worst Practices

Delete a Calculated Property from a Screen

Manage Watchers

Last modified 4mo ago

Export as PDF

Copy link

Edit on GitHub

Outline

Add Custom CSS to a ProcessMaker Screen

Customize CSS Styling Using Wildcards

Apply CSS to Specific ProcessMaker Screen Controls

Apply CSS to All Pages in a ProcessMaker Screen

Apply CSS to Make Form-Type Screens Read Only