Page Comparison

...

• Changing the logo on the login screen

• Changing the logo on the navbar

• 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 logo page is the OpenMRS SVG sprite defined here(opens in a new tab). 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.

Changing the logo used on the navbar

Similarly, the default logo used on the navbar is configured here(opens in a new tab). 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",
    }
  }
}

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:

{
  "@openmrs/esm-styleguide": {
    "Brand color #1": "#00473F", // The 'primary' color
    "Brand color #2": "#363463", // The 'secondary' color
    "Brand color #3": "#51A351" // The 'tertiary' color
  }
}

These colors impact the following UI elements:

Primary color

The primary color affects:

• The navbar color

  Image Added

• The app menu item hover color

  Image Added

• 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

  Image Added

• Widget title underline color

...

Video demo

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

...