Versions Compared

Version Old Version 2 New Version 3
Changes made by

Grace Potma

nethmi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

Code Block
languagesh
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

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

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

This scopes the logo to the login app only.

Changing the logo used on the navbar

...

Code Block
languagejson
{
  "@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:

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

This scopes the logo to the primary navigation app only.

Note

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:

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

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

Info

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:

...