How to Modify openemr UI

OpenEMR Development
1

How we can create Admin UI in openemr as below :

  1. What files [ in which path ] we need modify to create UI as below :

image
image1920×1080 374 KB

2

To modify the OpenEMR UI (User Interface), you can follow these general steps depending on what part of the UI you want to customize — whether it’s colors, layout, forms, menus, or entirely new modules.

:wrench: 1. Customize Themes (CSS)

You can modify the visual appearance (colors, fonts, layout) through the themes.

Files to Edit:

interface/themes/ – contains themes like style_cobalt.css, style_light.css, etc.

Modify or duplicate a file like:

interface/themes/style_cobalt.css

Example: Change background color

body {

background-color: #1e1e2f; /* Dark blue background */

color: #ffffff;

}

:jigsaw: 2. Modify Menus / Navigation

Edit the menu_template.php file if you’re using the default layout engine.

File:

interface/main/tabs/menu_template.php

You can change or add menu items using:

  • Custom Page

    • :receipt: 3. Edit Forms / Layout-Based Forms (LBF)

    To modify custom intake forms and UI layouts:

    Navigate in OpenEMR to:
    Admin → Forms → Layouts

    Or modify in the DB:

    SELECT * FROM layout_options;

    You can change:

    Field labels

    Input types (text, date, radio)

    Conditional display rules (“Hide this field if…”)

    :gear: 4. Modify Page Content or Add New Pages

    You can modify specific modules like:

    interface/patient_file/summary/demographics.php

    interface/forms/ (for clinical forms)

    To add a new page:

    Create interface/forms/custom_form/new.php

    Add HTML + PHP logic to it.

    Register the form in the OpenEMR GUI under Admin → Forms.

    :technologist: 5. Advanced: Modify Angular Frontend (OEMR v6+)

    Some parts of OpenEMR now use Angular, especially Patient Portal and API interfaces.

    Angular code: interface/weno/ and newer modules

    React-based components: (some newer interfaces)

    If you’re customizing the Patient Portal UI:

    portal/ (for legacy)

    react-portals/ (for new versions using React)

    Pro Tip: Always Backup

    Before editing:

    cp -r openemr/ openemr_backup/

    Useful Dev Tools

    Use Chrome DevTools (F12) to inspect UI elements and find relevant CSS/HTML

    Use VSCode for editing .php, .css, .js files

    Let me know what specifically you want to change — like:

    Color theme?

    Intake form layout?

    Patient summary page?

    Menu structure?

    I can give you exact file paths and code examples.