Configure Your Branding

Adding Your Logo

For the Login Screen: in the openmrs/esm-login-app (sample config below) For the Banner: in the openmrs/esm-primary-navigation-app (sample config below)

Changing the Colors

This can be configured via the openmrs/esm-styleguide module with these configuration elements. Sample config:

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

Legend for impact of Primary, Secondary, and Tertiary colors:

Brand color #1: (Primary Color) Impacts the following:
- Global Navigation Bar color
- Hover color

- Siderail Highlight Circle color
Brand color #2: (Secondary Color) Impacts the following:
- Unselected App Nav color
Brand color #3: (Tertiary Color) Impacts the following:
- Widget Title Underline color
- Button color (unselected)

Video: O3 Branding Tutorial

Example config.json file

You can configure your branding in a few ways. Ultimately this will live in your config.json file - see this example one here (opens in a new tab) in GitHub or see example below:

{
  "@openmrs/esm-patient-chart-app": {
    "extensionSlots": {
      "patient-chart-dashboard-slot": {
        "remove": [
          "test-results-summary-dashboard",
          "conditions-summary-dashboard",
          "results-summary-dashboard",
          "programs-summary-dashboard",
          "allergies-summary-dashboard",
          "attachments-results-summary-dashboard",
          "drug-orders-summary-dashboard"
        ]
      }
    },
    "notesConceptUuids": [
      "161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
      "437d1e25-e7ab-481c-aabc-01f21c6cdef1"
    ]
  },
  "@openmrs/esm-patient-banner-app": {
    "extensionSlots": {
      "patient-actions-slot": {
        "remove": ["add-patient-to-patient-list-button"]
      }
    }
  },
  "@openmrs/esm-styleguide": {
    "Brand color #1": "#1A3054",
    "Brand color #2": "#131E35",
    "Brand color #3": "#0078A6"
  },
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "https://ohri-demo.globalhealthapp.net/openmrs/images/logos/ohri_logo_lightbg.svg",
      "alt": "Logo"
    }
  },
  "@openmrs/esm-primary-navigation-app": {
    "logo": {
      "src": "https://ohri-demo.globalhealthapp.net/openmrs/images/logos/ohri_logo_darkbg.svg"
    }
  }
}

Core concepts Choose O3 Apps: Configure the O3 apps you want