Introduction

The styling of the project has been broken into two main methods

  1. Themification
  2. Stylesheets

Other important topics

  1. Changing or Adding Fonts
  2. Modifying Images
  3. Modifying or Adding Translations
  4. Styling, Modifying the Email Templates

This introduction will focus mainly on the themification and stylesheet usage. There will be descriptions on where to look to make modification for the SWF(Signing workflow).

THEMIFICATION

LOCATION OF FILE

${path}/resources/settings/theme.json


DESCRIPTION

This file contains a condense styling sheet solution. Meaning by adding main coloUrs here you can complete redesign the website too fit with the chosen coloUrs. Small changes in this file will transform most of the website-presentation.

In combination with our ui components we use the theme solution provided by material-ui. We added our own custom look and feel and integrated the theme solution with our whole ui project.

If the configuration is empty, you will get the PhenixID default styling. Modifications to the file are easy and are not cached. Meaning you will see immediate changes on the refresh of the webpage.


GETTING STARTED

Main colour modifications

As mentioned earlier, the theme file offers the ability to change the whole web project by simply adding a main colour. Below you will see that we use a palette with a primary object containing a light, main and dark variable. These variables are used throughout the project to define the colours of the website.

theme.json 
<p>// THEME.JSON
{
  "palette": {
    "primary": {
      "light": "#a3cdef",
      "main": "#006ebf",
      "dark": "#005fa6",
      "contrastText": "#FFF"
    },
    "secondary": {
      "light": "#e5e2db",
      "main": "#c9c6c0",
      "dark": "#888888",
      "contrastText": "#FFF"
    }
  }
}
</p>
Click to copy
Attribute Default Description
main #285a8a
 This is the main colour used throughout the project. The colours for the primary buttons, the loading screen, the side menu & much more...
dark #23303d
 Used as hover feature for primary button.
light #7c9fc7
 TBD
contrastText #FFF
 This is used on text to show through the main and dark colours.

It is important to note that the secondary section is not used as much as the primary section. Although future updates will see more of its use.

STYLESHEETS/CSS

GETTING STARTED

Installation

Requires you to create a stylesheet file and import it directly into the main index.html. Alternatively, you can put your changes directly into the head section in the index.html file via the style tags.

The website is fully configured through association of id and class name references. It should be easy to refer to them and add the style changes this way. You can make use of the inspector in the browser to easily navigate DOM elements and copy selectors or find class name or id attributes.


stylesheet.css

 You can use !important to force style changes if they do not work