Page Comparison

...

• 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

...

The default logo used in the O3 logo 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:

...

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:

{
  "@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.

The default logo used in the footer O3 login page is the OpenMRS SVG full color defined here. In addition to the OpenMRS logo you can configure an additional set of implementer logos in the footer that show up in the bottom right corner. 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:

{
  "@openmrs/esm-login-app": {
    "footer": {
      "additionalLogos": [
        {
          "src": "https://www.ozone-his.com/wp-content/uploads/2021/11/Ozone-Logo_white-300x63.png",
          "alt": "ozone"
        },
        {
          "src": "https://cdn.prod.website-files.com/61d4e56d3582c41ad9c3068b/6623f22da4bb52f10cad7043_Philips%20Foundation-p-500.png",
          "alt": "CDC"
        },
        {
          "src": "https://cdn.prod.website-files.com/61d4e56d3582c41ad9c3068b/6623f22cd21ff54f50f06df8_Cross%20Border%20Ventures-p-500.png",
          "alt": "ADC"
        }
      ]
    }
  }
}

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.

Image Added

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:

{
  "@openmrs/esm-primary-navigation-app": {
    "logo": {
      // Using an SVG image URL
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo-nav.svg"
      // Or, using a string
      "name": "KenyaEMR",
    }
  }
}

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:

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

This scopes the logo to the primary navigation app only.

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:

COPY ./path-to-the-favicon /usr/share/nginx/html

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

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:

...