Customising the logo
As an Objective administrator you are able to customise the logo that displays in the app bar of Objective
Note: When replacing images make sure that they are in SVG format.
You are able to customise the logo on the:
Your organisation’s logo must have the following format requirements to replace the default logo on the right pane of the login screen:
|
File format |
SVG |
|
Image size |
305 pixels wide x 305 pixels high
|
|
Resolution |
72 dpi recommended |
|
Padding |
28px transparent border |
|
Style |
Monochrome |
|
Background |
Coloured |
To replace the logo on the login screen with your organisation’s logo:
-
Use the templates provided in ECM\installer\install\browser-templates\logo-templates.zip to create your organisation’s logo by replacing the default logo.
Create your logo based on the requirements above and using the following templates:
- square-logo.ai
- square-logo.eps
- square-logo.sketch
-
Once you have finished creating your login logo, go to the following folder on your server:
-
If you want to display the login form and any external OIDC provider options (if set up) - \Objective\IdP\themes\objective-loginform-providers\login\resources\images.
-
If you are using only external OIDC provider options (if set up) without displaying login form- \Objective\IdP\themes\objective-providers\login\resources\images.
-
-
Replace the square-logo.svg graphic with your organisation’s logo making sure to leave the name of the graphic exactly the same.
Rename the original long-logo.svg graphic so that you can go back and use it if needed.
The image on the left pane of the login screen can be replaced with a different image relevant to your organisation.
|
File format |
SVG |
|
Image size |
1280 pixels wide x 1440 pixels high This is the dimensions of the left pane. Your image could use the entire maximum dimension of the left pane. Note: For best results for responsive screen sizes, the focus of the content should be biased to the centre of the image. |
|
Specifics |
The left pane is made up of a layered background. The two-toned angled background is persistent and always loads. If you do not wish to the two-toned background to display, make sure that you use an image sized with the maximum dimensions. You could use custom images with transparent sections so that the two-toned background is still visible. |
To change the image on the left pane:
- Create your custom svg image.
-
Go to the following folder on your server:
-
If you want to display the login form and any external OIDC provider options (if set up) - \Objective\IdP\themes\objective-loginform-providers\login\resources\images.
-
If you are using only external OIDC provider options (if set up) without displaying login form- \Objective\IdP\themes\objective-providers\login\resources\images.
-
-
Replace login.svg with your custom image, making sure that you name it exactly the same as the original.
Rename the original login.svg so that you can back and use it if needed.
Your organisation’s logo must have the following format requirements to replace the default logo on the app bar of Objective
|
File format |
SVG |
|
Image size |
342 pixels wide x 71 pixels high
|
|
Resolution |
72 dpi recommended |
|
Padding |
16px transparent border |
|
Style |
Monochrome |
|
Background |
Transparent |
To replace the logo on the app bar of Objective
-
Use the templates provided in ECM\installer\install\browser-templates\logo-templates.zip to create your organisation’s logo replacing the default logo.
Create your logo based on the requirements above and using the following templates:
- long-logo.ai
- long-logo.eps
- long-logo.sketch
-
Once you have finished creating your logo, go to the \Objective\AppServer\static\images folder on your server.
-
Replace the logo-dark.svg and logo-light.svg graphics with your organisation’s dark and light logo versions making sure to leave the name of the graphic exactly the same.
Rename the original logo-dark.svg and logo-light.svg graphics so that you can go back and use them if needed.