ProcessMaker API Documentation
ProcessMaker Examples

Customize the User Interface

Customize how your ProcessMaker instance displays the logo, color scheme, and font.

Overview

Customize how the user interface (UI) displays in your ProcessMaker instance. The following aspects of the ProcessMaker application may be changed:

  • Default logo: Change the logo that displays in the upper-left of all sidebars when the icon in the left sidebar is clicked. By default the ProcessMaker logo displays.

  • Default icon: Change the icon that displays in the upper-left of all sidebars. By default the ProcessMaker icon displays.

  • Default color scheme: Change any of the colors that comprise a ProcessMaker application color scheme. Below are the default Hex-formatted color settings for each component of a ProcessMaker application color scheme and how each is used in the color scheme:

    • Primary: The Primary color setting affects in the following components of the UI:

      • All left sidebars.

      • The selected top menu option.

      • Breadcrumb links that lead to the displayed page.

      • Icons that display to manage ProcessMaker assets, including but not limited to Edit, Configure, and Delete icons.

      • The Completed icon that represents a Request or Task is completed.

      • Default for the background color, text color, and button color in all Screen controls.

      Default hex color: #3397E1.

    • Secondary: The Secondary color setting affects in the following components of the UI:

      • Color for all primary action buttons in pages and screens, including but not limited to the Save and Cancel buttons.

      • Primary action buttons in Script Editor and Screen Builder.

      • Default color for the Secondary option in the Variant setting for Screen controls.

      Default hex color: #788793.

    • Success: The Success color setting affects in the following components of the UI:

      • The +Request button that persistently displays in ProcessMaker.

      • The In Progress icon that represents a Request is in-progress.

      • The Success color displays in messages that display when an application action is performed successfully.

      • Default color for the Success option in the Variant setting for Screen controls.

      Default hex color: #00BF9C.

    • Info: The Info color setting affects in the following components of the UI:

      • Primary action buttons and text for notifications.

      • Default color for the Info option in the Variant setting for Screen controls.

      Default hex color: #17A2B8.

    • Warning: The Warning color setting affects in the following components of the UI:

      • Default color for the Warning option in the Variant setting for Screen controls.

      Default hex color: #FBBE02.

    • Danger: The Danger color setting affects in the following components of the UI:

      • The Canceled icon that represents a Request is canceled.

      • Default color for the Danger option in the Variant setting for Screen controls.

      Default hex color: #ED4757.

    • Dark: The Dark color setting affects the Dark option in the Variant setting for Screen controls. Default hex color: #000000.

    • Light: The Light color setting affects in the following components of the UI:

      • Background color of the top menu.

      • Color of icons in the left sidebar.

      • Default color for the Light option in the Variant setting for Screen controls.

      Default hex color: #FFFFFF.

  • Default font: Change the default font that displays in your ProcessMaker instance. The following fonts are available in the order they present in the application:

    • Default Font (the default font)

    • Mono Type

    • Arial

    • Arial Black

    • Bookman

    • Comic Sans MS

    • Courier New

    • Garamond

    • Georgia

    • Helvetica

    • Impact

    • Times New Roman

    • Verdana

    • Palatino

    • Trebuchet MS

  • By default the Login Page Footer setting that displays rich text below the log on settings does not contain a value. Use this setting to display information users must be aware of prior to logging on, such as terms and conditions.

Customize the User Interface

Your user account must have the Make this user a Super Admin option selected to customize the ProcessMaker user interface.

See Edit a User Account or ask your Administrator for assistance.

Follow these steps to customize the user interface (UI) in your ProcessMaker instance:

  1. Log on to ProcessMaker.

  2. Click the Admin option from the top menu. The Users page displays.

  3. Click the Customize UI icon. The Customize UI page displays.

  4. The logo and icon in the UI work together: the logo represents the complete name, tagline and any other trademarked assets for the brand; the icon represents the stand-alone icon for the brand. The logo displays when the icon is clicked; the icon displays again when the logo is clicked.

    Follow these guidelines to change the default logo and icon, if necessary:

    1. From the Custom Logo field, click the Upload File button, and then locate the image to display as the brand's logo. Use a transparent PNG image at 150 by 40 pixels for best results.

    2. From the Custom Icon field, click the Upload File button, and then locate the image to display as the brand's icon. Use a transparent PNG image at 40 by 40 pixels for best results.

  5. Follow these guidelines to change any of the colors that comprise a color scheme (as described in the Overview section), if necessary:

    1. Click the hex color value for the color that you want to change. The color picker palette displays.

    2. Do one of the following:

      • In the Hex field, enter the hex color value for your selected color, and then press Enter.

      • Enter the RGBA (red, green, blue and alpha) color values for your selected color.

      • Click one of the color swatches (or the transparency swatch) to select your color.

      • Click inside the color palette to select your color.

  6. From the Custom Font drop-down menu, optionally select one of the fonts described in the Overview section to display all text in ProcessMaker.

  7. In the Login Page Footer setting, optionally enter rich text that displays below the log on settings displaying information users must be aware of prior to logging on, such as terms and conditions.

    Follow these guidelines to use the WYSIWYG rich text editor to stylize your text:

    • Source Code: Click on the Source Code iconto display the Source Code screen, and then enter HTML syntax that displays the content to display below the log on settings.

    • Undo changes: Click on theicon to undo the last action.

    • Redo changes: Click on theicon to redo the last undone action.

    • Insert/Edit links: Click on theicon to convert the selected text into a hyperlink. Follow these steps to create a hyperlink:

      1. Select the required text from the Rich Text control.

      2. Click on theicon. The Insert/Edit Link screen displays.

      3. In the URL setting, enter the destination URL.

      4. In the Text to display setting, edit or enter the text displayed in the log on page footer text.

      5. In the Title setting, enter the text to display when a user hovers over the displayed text.

      6. From Open link in… drop-down menu, select one of these options:

        • New window: Select this option to open the destination page in a new browser window.

        • Current window: Select this option to open the destination page in the current browser window.

      7. Click Save.

    • Format text: Follow these guidelines to format text:

      • Headings: From the Formats menu, select Headings and then select a heading size.

      • Bold: Do one of the following:

        • From the editor toolbar, select theicon.

        • From the Formats menu, select Inline and then Bold.

      • Italics: Do one of the following:

        • From the editor toolbar, select theicon.

        • From the Formats menu, select Inline and then Italic.

      • Change text color: Use the Text Color drop-down to change text color. Click on theicon. The color palette displays. Do one of the following:

        • Select one of the color swatches from the color palette. The selected text changes to that color.

        • Click theicon to select a custom color from the Color Picker.

        • Click theicon to reset the text to its default color.

      • Align text: Follow these guidelines to align text:

        • Left align: Do one of the following:

          • From the editor toolbar, use theicon to left-align text.

          • From the Formats menu, select Align and then Left.

        • Center align: Do one of the following:

          • From the editor toolbar, use theicon to center-align text.

          • From the Formats menu, select Align and then Center.

        • Right align: Do one of the following:

          • From the editor toolbar, use theicon to right-align text.

          • From the Formats menu, select Align and then Right.

        • Justify: Do one of the following:

          • From the editor toolbar, use theicon to justify text.

          • From the Formats menu, select Align and then Justify.

      • Insert a bullet list: Use theicon to format text as a bulleted list.

      • Insert a numbered list: Use theicon to format text as a numbered list.

      • Indent text: Click on theicon to increase text indenting.

      • Outdent text: Click on theicon to decrease text indenting.

  8. Click Save. ProcessMaker regenerates the UI.

  9. Clear the current web browser session (Ctrl+F5 for most web browsers). Your web browser window refreshes to display your changes to the ProcessMaker UI.

Related Topics