How to use a custom logo and icon

Objective

In this tutorial, you’ll learn how to configure PageSeeder to display your logo on the sign-in page and in the top-right corner of PageSeeder.

PageSeeder defines two files, the icon file is displayed as a favicon and contexts where the logo does not fit. The logo is shown on the sign-in, sign-out and other public pages and in the top left-corner when not in the group or project.

Prerequisites

• You are an administrator
• PageSeeder is configured to use a global template – See How to set up a global template
• You have a PageSeeder developer license or a service provider licence

Tutorial

In the following steps, we upload our logo and icons files and modify the organization config in the global template to make them available in the user interface.

Pages in this tutorial

You will need to go to the Organization settings page:

1. Go to the Administration dashboard
2. Select to the System configuration > Organization settings from the side-menu

You can reach the Templates file page from the Organization settings page, or by going to

1. Go to the Project administration
2. Select the Template > Template files from the side-menu

Upload your logo

In this step, we upload the logo and icon to display in the PageSeeder user interface instead.

From the Template files page of the global template.

1. Create an organization folder if it does not already exist
2. Create an style folder under the organization folder
• the style folder is using a different colour to indicate that its contents are publicly available
3. Upload your icon file (for example example-icon.svg) in the style folder
4. Upload your icon file (for example example-logo.svg) in the style folder

Update organization config

In this step, we ensure that the organization configuration is defined in your global template.

From the Organization settings page or the Template files page:

1. Open the organization-config.xml file in editor panel
2. Update the organization config file, so that it references you images

     <ui>
+      <images icon-filename="example-icon.svg" 
+              logo-filename="example-logo.svg" />
     </ui>

3. Save the organization config

Enable changes

In this step, we reload the organization config changes don't take effect immediately.

1. From the Organization settings page
2. Click Reload button for the changes to take appear
3. Check that your images appear correctly under the User interface section

Notes

We recommend that you use SVG files using while or bright colours with transparency. The icon file should be square.