Configure Branding

Implementers can configure various aspects of the user interface to match their branding. This includes:

Changing the logo on the login screen
Changing the logo on the navbar
Adding Logos under the Powered By text on Login Screen
Changing brand colors

Changing logos

Logos are used in two places in O3:

The login page
The navbar

Changing the logo used on the login page

The default logo used in the O3 login page is the OpenMRS SVG sprite defined here. You can override the logo by providing a valid image src URL as the value of src property in the login frontend module's configuration schema. The following is a snippet of how this would look like:

{
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo.svg",
      "alt": "KenyaEMR logo"
    }
  }
}

In this case, the logo specified at that URL will be applied as the default login page logo. To persist this change, you will need to add the configuration to your instance's configuration.

Step 1

Add your resource to a directory in the distro. For example, a logo.png file can be added to the frontend/resources directory.

Step 2

Add this line to the Dockerfile in the frontend directory:

COPY ./resources/logo.png /usr/share/nginx/html

This will copy the logo to the root of the application within the Docker image.

Step 3

Add the following snippet to the config-core_demo.json file in the frontend directory:

Note that the paths to your configuration files might be different. Adjust the paths to match your application's structure.

{
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "${openmrsSpaBase}/logo.png",
      "alt": "Logo"
    }
  }
}

This scopes the logo to the login app only.

Changing the Logo in the Login footer under the Powered by Text.

The default logo used in the footer O3 login page is the OpenMRS SVG mono defined here. In addition to the OpenMRS logo you can configure an additional set of implementer logos in the footer under the powered by text. By default all added logos appear in grey scale to persist with the O3 design. You can do this by providing a valid src URLs in the login frontend modules configuration schema for the footer additional logos. The following is a snippet of how this would look like:

To persist this change, you will need to add the configuration to your instance's configuration. You can repeat Steps 1 to 3 as shown above.

Changing the logo used on the navbar

Similarly, the default logo used on the navbar is configured here. You can optionally use a string or an SVG image as the navbar logo. To override the navbar logo, use a configuration similar to the snippet below:

To persist your changes to your distro, follow the same steps in the section above with the following config file snippet in the config-core_demo.json file:

This scopes the logo to the primary navigation app only.

If the image you're using for the logo is hosted outside the OpenMRS distribution, you might need to modify the Content Security Policy to allow the image to be loaded. To do so, you would need to tweak the map block that defines CSP headers in the nginx configuration file in the gateway directory. You might want to add a img-src * directive that allows all images to be loaded. img-src * allows loading images from any origin, including your domain, any external domains and data URIs.

Changing the favicon

To change the favicon, you'd need to add the favicon file to your distro. You'd then add the following line to the frontend Dockerfile:

This will copy the favicon to the root of the application.

Note: You would need to rebuild the application for this change to come into effect.

Changing brand colors

Implementers can change the default brand colors specified in the styleguide, overriding them with hex values that conform to their own brand colors. The default brand colors that determine how the UI looks like are defined in the styleguide configuration schema. To override them, use a configuration similar to the snippet below:

These colors impact the following UI elements:

Primary color

The primary color affects:

The navbar color
The app menu item hover color
The color of the selected app (circle) in the siderail

Secondary color

The secondary color affects:

App menu items' background color

Tertiary color

The tertiary color affects:

The color of buttons
Widget title underline color

Video demo

Watch the video to see a demo of how to configure branding:

https://youtu.be/u5TmUFBrm_s?feature=shared