3.0 - Skins

After choosing a skin from the list and clicking on the Export option, the skin will be exported in a file with a .tar extension.

Removing Skins

To remove a skin, simply delete the skin's directory found in shared/skins/skin-name. For example, to remove the Green skin in Linux/UNIX:

To remove a skin using the ProcessMaker interface, click on the Delete button.

Note: The classic and neoclassic skins can not be deleted, since they are default skins in ProcessMaker.

Modifying Skins

To modify a ProcessMaker skin, edit the skin's HTML and CSS files found in the shared/skins/skin-name directory. Custom image files can also be added to the shared/skins/skin-name/images directory.

HTML Skin Files

The HTML files control the layout and content of a skin. The principal file to edit is layout.html, which is the general layout of the principal ProcessMaker interface.

Variables to be inserted in the HTML code are enclosed inside of {} (curly braces), such as {$rolename} and {$workspace}. PHP code is enclosed inside of {php}...{/php} tags. To conditionally insert HTML code, either use print statements in PHP code or encode HTML inside of PHP code blocks.

For example, the following code in an HTML file prints out "ADMIN privileges" if the logged in user is the admin user:

Any text outside {php}...{/php} tags is considered HTML and will be displayed in the web browser. The same message can be inserted into the HTML code in this manner:

CSS Skin Files

Cascading Style Sheets (CSS) define the appearance of elements in ProcessMaker. The CSS files for the default neoclassic skin are located in the following directories:

Linux:

Windows:

Bitnami:

However, it is not recommended to directly edit these CSS files, because upgrading ProcessMaker will overwrite these files and any changes will be lost. Instead, create a custom skin using the ProcessMaker interface and edit its CSS files.

A new skin created with the ProcessMaker interface will include the following CSS files by default:

• css/form.css: Defines styles used by form elements in ProcessMaker.
• css/loginStyle.css: Defines the styles used on the Login screen.
• css/pmos-xtheme-gray.css: Defines the custom ProcessMaker styles for elements using the ExtJS library. Note that these styles are used in most of the ProcessMaker interface, but are are not used by Dynaforms.
• css/rtl.css: Defines styles for right-to-left languages, such as Arabic and Hebrew.
• css/sprite.css: Sets the sprites for all other web browsers.
• css/sprite_ie7.css: Sets the sprites (i.e., images that change depending on the state of element) for Internet Explorer 7.
• css/style.css: Defines the fonts used by ProcessMaker and sets the colors, spacing and other properties of basic elements in the ProcessMaker interface.
• css/xtheme-gray.css: Defines the standard gray theme used by the ExtJS library, which is used by most of the ProcessMaker interface (case lists in Home, configuration options in Admin, etc.), but is not used by Dynaforms.

Edit these files with a plain text editor to modify the appearance of the skin. After changing the CSS file of a skin, clear the web browser's cache and then reload ProcessMaker by pressing CTRL+F5 or CTRL+SHIFT+r to see the updated CSS file.

Note: To use other CSS files for the skin, the files must be included with the config.xml file.

Modifiable ProcessMaker Sections

In ProcessMaker 3, the following sections can be modified using skins:

Header (Logo, Main Menu Options)

• The logo
• The font attributes (color and size)
• The background color
• Customized CSS

Home Tab (Execution)

• The font attributes (color and size)
• The background color
• Customized CSS

Designer Tab

• The font attributes (color and size)
• The background color
• Customized CSS

Dashboard/KPI Tab

• The font attributes (color and size)
• The background color
• Customized CSS

Admin Tab

• The font attributes (color and size)
• The background color
• Customized CSS

Forms

• The font attributes (color and size)
• The background color
• The color of the buttons
• Customized CSS

Process Designer

• The font attributes (color and size)
• The background color
• The color of the buttons
• Icon focus background
• Customized CSS

Form Designer

• The font attributes (color and size)
• The background color
• The color of the buttons
• Icon focus background
• Customized CSS

Login

• The font attributes (color and size)
• The background color
• The background image
• The color of the buttons
• The position of the buttons
• Customized CSS

Common ProcessMaker Classes

• ProcessMaker header:
  • logout: Class for holding information about the logged in user, workspace, date and a Logout link in the upper right hand corner of the ProcessMaker header.
  • title: Class for an empty cell immediately below the cell that holds the user information and Logout link.
• ProcessMaker menu:
  • mainMenuBG: Class for the row that holds the ProcessMaker main menu.
  • mainMenu: Class for an option in the main menu that is not selected.
  • SelectedMenu: Class for an option in the main menu that is selected.

Format of the config.xml File

The shared/skins/skin-name/config.xml file defines the properties of a skin and includes the CSS files in the skin. The <information>...</information> section of the config.xml file defines the properties of the skin:

Note: To comment out code in an XML file, place it inside <!-- ... --> tags.

The <cssFiles>...</cssFiles> section of the config.xml file defines which CSS files are included for each skin. By default, following files are included in the different skins:

The files included in the <skin>...</skin> section are the CSS files used by the custom skin. The other skins have specific purposes:

• blank is a skin that does not display the ProcessMaker header and menu bar. It is usually used when embedding ProcessMaker inside an iframe in a web page and only wanting to display the contents of the Home menu.
• raw is a skin used for debugging that doesn't include any styles.
• submenu is a skin used by submenus, which is a deprecated feature from version 1.X.
• tracker is a feature used by the case tracker for external users who want to follow the progress of their cases.
• extjs is a JavaScript library, which is used in most parts of the ProcessMaker interface except Dynaforms. Change its CSS files to alter the appearance of ProcessMaker.

Files are included in a skin using the <cssFile>...</cssFile> tag:

Where:

• filename is the name of a CSS file located in the css directory.
• browsers can be ALL to include all browsers, except those listed in disabledBrowsers, or the name of a specific browser, such as ie7.

To include any other files in the different skins, use the <cssFile>...</cssFile> tag. Most of the styles used by Dynaforms are defined in the file:

Linux:

Windows:

Bitnami:

To include this CSS file in a custom skin, copy it to the location:

Linux:

Windows:

Bitnami:

Then, edit it with a plain text editor.

PMDynaform.css defines styles for different screen widths, so Dynaforms can be used on mobile phones, tablets and desktop PCs. When changing the properties of a style, make sure to change the style in all the different screen widths. For example, to change the font-size property in the form-control style, change it in the following sections:

• (max-width: 300px) for devices like small screened smartphones.
• (max-width: 550px) and (min-width: 300px) for devices like smartphones and phablets.
• (max-width: 980px) and (min-width: 550px) for devices like phablets and tablets.
• (max-width: 1600px) and (min-width: 980px) for large tablets, most laptops and low resolution monitors.
• (min-width: 1680px) for high resolution laptop screens and most monitors.

For example, to change the font-size property for laptops and monitors:

When done editing the PMDynaform.css file, edit the config.xml file to include the CSS file of the skin. For example:

Customizing Forms in ProcessMaker 3

To customize the style of Dynaforms using skins in ProcessMaker 3, it is necessary to overwrite the necessary css classes in a separate file and overwrite the existing styles Dynaforms have when rendered. Remember that when setting these files, ALL Dynafrms in the workspace will apply the changes. To customize an individual Dynaform, it is better to use external libraries (read this page to learn how to do it). To overwrite the styles of the Dynaform in the skin, do the following:

After creating a skin (preferably manually), create a new css file in the following directory (name the file "pm3.css", for example).

Linux:

Windows:

Bitnami:

Now open the config.xml file with your favorite text editor. This file is located in the following directory:

Linux:

Windows:

Bitnami:

Add the following in the extjs section:

Now, add the following after the extjs section in the same file:

The config.xml file should look like the following:

Now that the file has been referenced and added to the skin, it is necessary to add the classes that will be affected by the skin to the CSS file. As mentioned before, for Dynaforms, the classes that manage the styles have to be overwritten in this file. Thus, it is necessary to first identify the class to be overwritten. These styles could be in different files, but the main file containing the styles of the Dynaform is mafe-2564e2b-34cb2a8.css (the suffix code may change depending on the installation), which is in the following directory:

Linux:

Windows:

Bitnami:

See the section below to learn about some of the classes in this file and some of the classes that can be modified for Dynaforms.

Modifying CSS for Specific DynaForm Elements

Editing style.css

As was mentioned before, the most common properties of ProcessMaker are defined in this file, but it is worth mentioning that if the style is changed, all places where the property is used will be modified with the new style.

Below, some examples will be explained:

.userGroupTitle: modifies the case title when a case is running.

To modify the color and font values of the group title:

The final view is:

To change the information windows to the figure below, use the following classes:

form.formDefault .FormLabel Changes the labels at the left side of the window.

form.formDefault .FormFieldContent Changes the labels at the right side of the window.

The image above has the following classes:

Editing the Custom CSS File for Dynaforms

Some of the classes that can be overwritten and added to the custom css file that modifies the style of Dynaforms are the following:

.btn-default: modifies the Submit button in all Dynaforms. If using grids, take care to also set a style for the "New" option in the grid (view the style below). Otherwise, both options will be affected by the style.

The final result is the following:

.pmdynaform-grid-newitem.btn-default Modifies the New option of the grid. For example, add the following style:

The final result is the following:

.pmdynaform-label-title: Modifies the titles of Dynaforms. For example:

The final result is the following:

Using Custom Image Files

To change the image file used by a style, place the image file in the following directory:

Linux:

Windows:

Bitnami:

To access any file placed inside the shared/skins/skin-name directory on the ProcessMaker server, use the web URL:

http://<IP-ADDRESS>:<PORT>/skin/<SKIN-NAME>/...

For example, ProcessMaker is installed in /opt/processmaker on the server and uses the domain https://pm.mycorp.com. It has a custom skin named “corpcolors” and a custom image file located on the server at:

This image can be accessed with the URL:

https://pm.mycorp.com/skin/corpcolors/images/headquartersPhoto.png

To access an image file in a custom skin's CSS file, then use the url() function:

For example, to set the file headquartersPhoto.png as the background image for the login screen of ProcessMaker, use a plain text editor to edit the file /opt/processmaker/shared/skins/corpcolors/css/loginStyle.css and change the lines from:

To:

Note: To comment out code in a CSS file, place it inside: /* … */.

It is recommended to use a relative URL, which doesn't include the protocol and domain name (http://pm.mycorp.com), so that the skin can access the image if the protocol and domain name change in the future.

In addition, ProcessMaker defines its default skins “neoclassic” and “classic” in the directories:

Linux

Windows:

Bitnami:

Files in these directories can be accessed with the URL:

http://<IP-ADDRESS>:<PORT>/skin/<SKIN-NAME>/...

And the url() function can access them in CSS files with:

Modifying the Loading Page View

It is possible to customize the loading page that is displaying when ProcessMaker is starting a session. The logo and the message displayed can be changed to an animated logo of your company, for example.

To customize the login screen, the extJsInitLoad.html file was added in the following location:

Linux:

Windows:

Bitnami:

This file contains for the neoclassic skin. To customize a skin other than the neoclassic skin, copy this file to the skin folder in the shared folder.

In the first part of the file the CSS styles can be modified, while in the second part the images and text can be personalized.

Changing the Loading Page Images

The spinning gears and the ProcessMaker logo may be replaced. Upload a new image to the following directory:

Linux:

Windows:

Bitnami:

Then, edit the workflow/engine/skinEngine/SKIN-NAME/extJsInitLoad.html file with a plain text editor and set it to use the new image file. For example, to replace the default image with the old gears-old.gif image from previous versions, change the following line from:

To:

Then, the ProcessMaker loading page will be:

Personalizing Text

While ProcessMaker is loading, some text is displayed to indicate which components are loading. This text can also be modified in the same file:

For instance, after replacing "Initializing" with "Initializing Application", the loading page will be:

Switching to a Different Skin

The default skin used by ProcessMaker can be set using the System interface or by editing the env.ini configuration file. This setting will set the skin at the login screen, however, the user is free to edit the URL in the web browser to change the skin.

The skin to be used by ProcessMaker is specified in the URL when accessing ProcessMaker through the web browser. The template for ProcessMaker URLs is:

http://<IP-ADDRESS>:<PORT>/sys<WORKSPACE>/<LANG>/<SKIN>/...

To switch to a different skin, simply change the URL in the web browser. The skin can be changed at any time when using ProcessMaker by editing the URL then pressing ENTER to refresh.

For example, while looking at the Cases list, the default "neoclassic" skin can be changed to the custom "green" skin by changing the URL from:

http://<IP-ADDRESS>:<PORT>/sys<WORKSPACE>/<LANG>/neoclassic/cases/main

To:

http://<IP-ADDRESS>:<PORT>/sys<WORKSPACE>/<LANG>/green/cases/main

If just the domain name or IP address is specified in the URL, then the web browser will automatically use the "neoclassic" skin for the login screen. For example, the address http://192.168.1.100 is redirected to http://192.168.1.100/sys/en/neoclassic/login/login

To make ProcessMaker redirect automatically to a skin other than "neoclassic", edit the file workflow/public_html/index.html to specify another skin. This folder can generally be found at:

Linux:

Windows:

Bitnami:

Change the skin in the line:
<meta http-equiv="REFRESH" content="0;URL=sys/en/neoclassic/login/login" />

Forcing ProcessMaker to Use a Skin

To prevent users from changing the skin by editing the URL in the web browser, add the JavaScript code listed below to force users to always use a certain skin.

Changing the skin in the login redirector will only work if the user enters just the domain name or IP address. To force ProcessMaker to always use a certain skin at the login screen, edit the JavaScript code in the workflow/engine/xmlform/login/loginpm3.xml file. Add code to redirect the login screen to a different skin when the page loads.

Change the lines from:

to:

Change skin-name to the name of a skin installed on the system, such as the default neoclassic, or a custom skin like companySkin. Also edit the JavaScript code in the workflow/engine/xmlform/login/sysLogin.xml file.

Change the lines:

To:

Note: This validation is made when the name of the workspace is included in the URL