Themes

SWF gives you the ability to create themes and change the look of the UI. A theme includes options such as colors, background
and logo, both in light and dark mode.

Important!

The theme files are available at <web-root-folder>/theme, where the web root folder defaults to public. If you do any updates there, they will be overwritten when installing a new version of SWF. To keep your changes, instead add them into your overlay folder at overlay/theme.

Creating themes

You can choose to edit and override the default theme, or to create a new theme with a specific name.

Override the default theme

This will be the default theme for all authentication views if no specific theme has been specified. Start with locating the original theme called default.json in <web-root-folder>/theme/:

/public/theme/default.json
Click to copy

Copy it to the overlay folder at /overlay/theme/.

/overlay/theme/default.json
Click to copy

Do all modifications in default.json in /overlay/theme/.

Create a New Theme

Create a new JSON file in your overlay folder with the name of the theme, for example my-theme.json.

/overlay/theme/my-theme.json
Click to copy

You can use the Theme JSON Reference or the original default theme file found in /public/theme/ as a template.

Set a custom theme

To apply your own custom theme, set the following in the root of the config.json file:

{
  "theme": "my-theme"
}
Click to copy

Replace "my-theme" with the name of the theme file in your /public/theme/ folder or your /overlay/theme/ folder without the file suffix. If you want to implement a theme in a file called myGreenTheme.json, you add myGreenTheme as your theme in your config.json file.

Configuring a Theme

The Theme JSON Reference consists of two main sections, favicon configuration and color palettes.

All properties are optional, but are listed in the examples below even when empty for demonstration purposes. Any empty or omitted value will be ignored by the application.

Assets for the theme, like images etc., should be placed in the /overlay/ folder, preferably in the /theme/ folder.

Important!

When linking an asset in a theme JSON file, make sure the path to the asset file is relative to the /overlay/ folder.

Favicon Configuration 

"favicon": {
    "icon_png_16x16": "favicon-16x16.png",
    "icon_png_32x32": "favicon-32x32.png",
    "icon_png_48x48": "favicon-48x48.png",
    "icon_png_192x192": "favicon-192x192.png",
    "icon_apple_touch_png_180x180": "favicon-180x180.png"
}
Click to copy

To accommodate for the most common devices, use PNG files in each specified size, for example height 48px and width 48px for icon_png_48x48.

In the favicon section, change each URL to your custom versions placed within /overlay/.

Another option is to keep the configuration above and add files with the same names to /overlay/. These files will then override the original files, for example:

/overlay/favicon-16x16.png
Click to copy

Color Palettes

A theme can have two color palettes, light mode and dark mode.

"palettes": {
    "light": {
      "primary": "#22457A",
      ...
    },
    "dark": {
      "primary": "#22457A",
     ...
    }
},
Click to copy

Important!

All values in the palettes section must be a valid HEX-color (#xxxxxx), unless it's an URL pointing to an image asset.

When arriving for the first time, the user's system setting will determine the mode. The user can then switch modes in the interface.

You can choose to only have one mode by leaving in just one of the palettes. This will force this palette for all users, regardless of system settings. The option for the user to switch modes will not be shown in the interface.

"palettes": {
    "light": {
      "primary": "#22457A",
      ...
    },
},
Click to copy

Palette Main Colors

A palette has three configurable colors:

  • Primary: The most prominent color and the default for most UI elements when appropriate.
  • Secondary: A complementary color for buttons.
  • Accent: A complementary color for buttons with a strong call to action.
{
  "primary": "#22457A",
  "secondary": "#5BA2CA",
  "accent": "#F5AE30",
  ...
},
Click to copy

An example with custom color:

{
  "primary": "#3EAFBE",
  "secondary": "#1B4353",
  "accent": "#F5A65B",
  ...
},
Click to copy 
{
  "palettes": {
    "light": {
      ...
      "logo": {
        "url": "theme/my-theme/logo.svg",
        "width": "",
        "height": "40px",
        "screen_small": {
          "url": "",
          "width": "",
          "height": "30px"
        }
      }
    }
    ...
  }
}
Click to copy

Point to an image asset that you have put somewhere in /overlay/ folder structure. In the above example, the url correlates to /overlay/theme/my-theme/logo.svg. If the url property is removed or left empty, no logo will be displayed.

Set optional width and/or height. Allowed units of measurement are "px", "em", "rem", "%", "vw" and "vh". If no unit is included, the value will default to "px".

To make the logo responsive, it is possible to override the logo settings on smaller screens. These settings will take effect if the screen width is below 600px.

Background 

"background": {
  "header": {
    "color": "#3EAFBE"
  },
  "body": {
    "image": {
      "url": "theme/my-theme/background.png"
    },
    "color": ""
  }
},
Click to copy

Setting a value for the header color property will add a background color to the page header element.

The page body can have a background image and/or a background color. If the body property has a value for a background image url, the following CSS will apply:

background-image: url([url to image asset]);
background-repeat: no-repeat;
background-size: cover;
Click to copy

Texts 

"texts": {
  "headers": "#3EAFBE",
  "links": "",
  "settings": "#3EAFBE",
  "footer": "#FFFFFF"
},
Click to copy

These properties let you override default text colors for the following elements:

  • Headers (\<h1> to \<h4>).
  • Links (\<a>).
  • The settings icon and language indicator in the upper right corner.
  • The footer text.

Buttons 

"buttons": {
  "primary": {
    "contained": {
      "label": ""
    },
    "outlined": {
      "label": "",
      "border": ""
    },
    "text": {
      "label": ""
    }
  },
  "secondary": {
    "contained": {
      "label": "#ffffff"
    },
    "outlined": {
      "label": "",
      "border": ""
    },
    "text": {
      "label": ""
    }
  },
  "accent": {
    "contained": {
      "label": ""
    },
    "outlined": {
      "label": "",
      "border": ""
    },
    "text": {
      "label": ""
    }
  }
}
Click to copy

There are 3 kinds of buttons available:

  • Contained
  • Outlined
  • Text

Each kind of button can have one of the 3 palette colors:

  • Primary
  • Secondary
  • Accent

This configuration lets you override the default text color (label color) for each of these variants. For the "outlined" variant, you can also override the default outline color.

Changing email templates

In the resources/bundles directory, you will find that there is a Message bundle file. Here you will have access to all the key value attributes that can change in the languages, and styling of the emails. Under the resource/images, you can change the default image used for the image.

You can change the resources/template/handlebar directory, but keep in mind that changing too much could result in losing the email structure. We recommend not changing the templates too much.

Location of the image logo file 

resources/images/logo.png
Click to copy

The file image for the email template is located in the images directory. Changes to this folder do not affect the Signing WorkFlow website, but only the email template. You can replace the logo.png with a logo of your choosing, keeping in mind that the image will look best following the aspect ratio below:

WIDTH: 220px
HEIGHT: 80px
Click to copy

The minimum and maximum width will always be 220px, the height will auto adjust to that. Rectangular images will look best.

Location of the file

  • resources/bundles/Messages.properties > Styling properties (see below)
  • resources/bundles/Messages_sv.properties > Texts

Please note that we currently support only a Swedish translation file for the content. This means changes to the Swedish file will override the message.properties file.  Future support for English and other languages to come.

Keep in mind that any changes to the below will affect the styling of the email template. The changes are made in resources/bundles/Messages.properties. For text changes, visit the Message_sv.properties file.

Attribute Variable Explanation
generalBackground background: #f7f7f7; This changes the outer background of the email content.
generalAlignment margin: auto;

Aligning the email content center, left or right. Center alignment:

Margin: auto;

Left alignment

Margin: auto; margin-left: 0px;

Right alignment:

Margin: auto; margin-right: 0px;
fontStyle font-family: ‘Open Sans’, ‘HelveticaNeue-Light’,’Helvetica Neue Light’, Helvetica, Arial,sans-serif !important; font-size:16px; Assigning the paragraph styles and fonts.
fontStyleMobile font-family: ‘Open Sans’, ‘HelveticaNeue-Light’,’Helvetica Neue Light’, Helvetica, Arial,sans-serif; font-size:14px; Assigning the paragraph section for mobile mode.
generalTextStyle color: #444; font-size:16px; Assigning the detail styles and fonts.
generalTextMobileStyle font-size: 13px;color: #444; Assigning the detail styles and fonts for mobile mode.
primaryBackgroundButtonStyle background-color:#285a8a;border-radius:3px;border-bottom-color:#23303d;border-bottom-width:2px;border-bottom-style:solid; Background, size and border of button.
primaryButtonStyle color:#FFFFFF; Color of button text.
textStyle font-size: 12px;color: #444; Small non link text styles.
simpleLinkStyle font-weight:600;color:black; Small link text styles.
footerBackground background: #23303d; Bottom section background colour.
footerFontStyles font-size: 13px; font-family: 'Open Sans', 'HelveticaNeue-Light','Helvetica Neue Light', Helvetica, Arial,sans-serif !important; Bottom section text colour & font size.

Custom subject and message

The subject and message part of the mail can be injected with additional information from the task data.

Supported task data variables are:

  • title
  • description
  • fileName
  • due
  • created
  • name
  • firstName
  • lastName

Use the Handlebar Moustache syntax to insert the variables into subject or message properties.

The subject should only use plain text, but the message part can also handle HTML tags. An example from the Swedish Messages_sv.properties, to add file name and order title in the mail subject:

createSubject=Ditt nya ärende finns i filen {{{fileName}}}, med titel ‘{{{title}}}’
Click to copy

Adding even more information in the body/message with HTML.

createdMessage=Du har en ny elektronisk underskrift att hantera.<br>\
Anpassa med ett flertal variabler, HTML är giltigt här:<br>\
Titel:{{title}}<br>\
Filnamn: {{fileName}}<br>\
Förnamn: {{firstName}}<br>\
Efternamn: {{lastName}}<br>\
Click to copy