ProcessMaker Skins

From ProcessMaker

Skins provide the visual appearance to the ProcessMaker interface. By default, ProcessMaker provides the "green" skin for a standard blue/grey interface and the "rtl" (right-to-left) skin for languages such as Arabic and Hebrew which have a right-to-left orientation. In addition, new skins can be created to customize the appearance of ProcessMaker. From version 1.2-2838 on, ProcessMaker provides a user-friendly way to create new skins and import and export them. With older versions of ProcessMakers, skins have to be manually created and managed.

Contents 1 Available Skins 2 Switching to a Different Skin 3 Adding New Skins 3.1 Adding New Skins Manually 4 Modifying Skins 5 Importing and Exporting Skins

Available Skins

To see a list of available skins installed in ProcessMaker from version 1.2-2838 and later, go to ADMIN > SKINS.

Switching to a Different 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 processes list, the default "green" skin can be change to the "rtl" skin by changing the URL from:

http://192.168.1.100/sysworkflow/en/green/processes/processes_List

To:

http://192.128.1.100/sysworkflow/en/rtl/processes/processes_List  

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

To make ProcessMaker redirect automatically to another skin other than "green" then edit the file workflow/public_html/index.html to specify another skin. Generally in GNU/Linux, it can be found at:

/opt/processmaker/workflow/public_html/index.html

In Windows, it generally can be found at:

C:\Program Files\ProcessMaker\apps\processmaker\workflow\public_html\index.html 

Change the skin in the line:

<meta http-equiv="REFRESH" content="0;URL=/sys/en/green/login/login" />

Adding New Skins

To create a new skin in version 1.2-2838 and later, go to ADMIN > SKINS. Then click on the New link at the top of the list of skins. Enter a name and description for the new skin:

Click on Continue and the new skin will be created based upon the default "green" skin.

After creating a skin, the only way to remove it from ProcessMaker is to manually delete the skin's files. For example in Linux/UNIX:

rm workflow/engine/skins/skin-name.*
rm workflow/public_html/skins/skin-name

Adding New Skins Manually

If using a version of ProcessMaker before 1.2-2838, skins can only be added by manually creating them inside the file system.

ProcessMaker skins are organized according to the following directory structure:

Make a copy of the green folder and rename it with another name. It can generally be found in Windows at:

C:\Program Files\ProcessMaker\apps\processmaker\workflow\public_html\skins\green

It can generally be found in Linux/UNIX at:

/opt/processmaker/workflow/public_html/skins/green

For example, if creating a new skin named "skin_test" in Linux/UNIX, then execute the following commands as root:

cd /opt/processmaker/workflow/public_html/skins
cp -r green skin_test 

Go to the workflow/engine/skins directory and make copies of the green.html and green.php files and rename them to the name of the new skin. For example, if creating the "skin_test" skin in Linux/UNIX, then execute the following commands as root:

cd /opt/processmaker/workflow/engine/skins
cp green.html skin_test.html
cp green.php skin_test.php

Open the skin's PHP file with any plain text editor (such as Notepad or Notepad++ in Windows or gedit or vim in Linux/UNIX):

Change the following line of code from:

$smarty->display('green.html'); 

To:

$smarty->display('skin_test.html');

Now the new skin should be able to be used by changing the URL when accessing ProcessMaker through the web browser:

Modifying Skins

To modify a ProcessMaker skin, edit the skin's HTML and PHP files which are found in the workflow/engine/skins directory:

workflow/engine/skins/skin-name.php
workflow/engine/skins/skin-name.html

To modify the graphics for a skin, change the graphics files found in the directory:

workflow/public_html/skins/skin-name

The cascading style sheet for a skin can also be modified by editing the file:

workflow/public_html/skins/skin-name/style.css

Importing and Exporting Skins

Once a skin has been created, it can be exported in version 1-2.2838 and later by going to ADMIN > SKINS and clicking on the Export link for that skin. A tar file will be created containing the skin definition files which can be downloaded.

To later import that skin into another installation of ProcessMaker, go to ADMIN > PLUGINS and click on the Import link.

Select the skin's tar file and click on Import to upload the new skin to ProcessMaker. After importing the skin, it should appear in the list of available skins at ADMIN > SKINS.

If using a version of ProcessMaker prior to version 1.2-2838, then skins can be exported and imported by manually coping the skin definition files from one installation of ProcessMaker to another.

For example, if using scp to copy a skin from the local installation of ProcessMaker to an installation on a remote server with the IP address 192.168.1.100:

scp workflow/engine/skins/skin-name.* root@192.168.1.100:/opt/processmaker/workflow/engine/skins/
scp -r workflow/public_html/skins/skin-name root@192.168.1.100:/opt/processmaker/workflow/public_html/skins/skin-name