Versions Compared

Key

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

...

  • 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:

...

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:

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

Changing the logo used on the navbar

...