Add fonts to ProcessMaker

From pmusers
Jump to: navigation, search

The easiest way to add fonts to ProcessMaker is to edit the existing "neoclassic" skin, which is the default skin, but these instructions can also be used if creating a custom skin.

Adding fonts to Dynaforms

Copy the font files to the <install-directory>/workflow/public_html/lib/pmdynaform/build/css/fonts/ directory.

Then, edit the file <install-directory>/workflow/public_html/lib/pmdynaform/build/css/PMDynaform.css and at the top of the file, add the following lines so the CSS file will recognize the font files:

@font-face {
  font-family: "Crazy Killer";
  src: url('fonts/Crazy-Killer.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Crazy Killer";
  src: url('fonts/Crazy-Killer-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

At a minimum, there should be a file for a font-weight which is "normal" and "bold", since both are used in Dynaforms, even if both point to the same file. The format('...') depends on the file type. .ttf is 'truetype', .eot is 'embedded-opentype', .woff is "woff" and .svg is 'svg';

It is also possible to have many different font-weights and font-styles:

@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');  
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";  
  src: url('fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

Then, add the following line to the CSS definitions for the elements whose font should be changed:

font-family: "font name";

For example, to set the font in the labels of Dynaform controls, change from:

.pmdynaform-label {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

To:

.pmdynaform-label {
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: "Crazy Killer";
}

To set the font used inside input fields, then change from:

  .form-control {
    display: inline-block;
    width: 93%;
    padding: 6px 5px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }

To:

  .form-control {
    display: inline-block;
    width: 93%;
    padding: 6px 5px;
    font-size: 14px;
    font-family: "Crazy Killer"; /*add font here*/
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }

This change needs at various places since PMDynaform.css defines different styles for different page widths, so make this change in five different places under:

@media all and (max-width: 2000px) and (min-width: 1600px) {
  .form-control {

@media all and (max-width: 1600px) and (min-width: 980px) {
  .form-control {

@media all and (max-width: 980px) and (min-width: 550px) {
  .form-control {

@media all and (max-width: 550px) and (min-width: 300px) {
  .form-control {

@media all and (max-width: 300px) {
  .form-control {

After making those changes, the new font should appear in Dynaforms:

ChangedFontInDynaforms.png

If other elements need to be changed, use the Inspector in your web browser's debugger to discover the class used by the different elements in the Dynaform:

InspectorWebBrowserToChangeFont.png

Adding fonts to the rest of the interface

To add fonts in the rest of the ProcessMaker interface, copy the font files to the <install-directory>/workflow/public_html/skins/neoclassic/fonts/ directory (if using the default neoclassic skin).

Then, edit the file <install-directory>/workflow/engine/skinEngine/neoclassic/css/style.css and add lines like the following at the top to define the available fonts:

@font-face {
  font-family: 'Crazy Killer';
  src: url('/skins/neoclassic/fonts/Crazy-Killer.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Crazy Killer';
  src: url('/skins/neoclassic/fonts/Crazy-Killer-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

To change the font of the ProcessMaker menus in the header, in the same file change the following CSS class definition from:

body {
  margin: 0px;
  background-color: #ffffff;
  color: #333333;
  font: normal 8pt "Open Sans", Tahoma, sans-serif, MiscFixed;
}

To:

body {
  margin: 0px;
  background-color: #ffffff;
  color: #333333;
  font: normal 8pt "Crazy Killer", "Open Sans", Tahoma, sans-serif, MiscFixed;
}

ChangedFontProcessMakerMenus.png

Changing the font of task titles

Copy the font files to the <install-directory>/workflow/public_html/lib/fonts/' directory.

To change the titles of tasks in the process map, edit the file <install-directory>/workflow/public_html/lib/css/mafe-build-number.css, such as mafe-cab9372-99ec24f.css, and add similar lines to the top of the file:

@font-face {
  font-family: "Crazy Killer";
  src: url('../fonts/Crazy-Killer.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Crazy Killer";
  src: url('../fonts/Crazy-Killer-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

Then, in the same file, change from:

.pmui-pmactivity .pmui-label span {
  color: black;
}

To:

.pmui-pmactivity .pmui-label span {
  color: black;
  font-family: "Crazy Killer";
}

ChangedFontInTaskTitles.png

Make sure to delete your web browser's cache in order to see the changed font in the task title.