How to use custom css & js in version 7.0.2?

Support
1

Situation
I am using OpenEMR 7.0.2. I am looking to add custom branding including custom logos & images, custom stylesheets & scripts.
I came across folder /custom/assets which has custom.yaml.example file. And readme file describes the process of how to load custom css & js files in ui.
I tried following the guide from the file but was not able to get it working.
Was anyone able to get it working?

OpenEMR Version
OpenEMR 7.0.2

Browser:
I’m using: Chrome

Operating System
I’m using: Ubuntu x64

1 Like
2

hi @parag-thoughti , does this post help?

3

Yes @stephenwaite, this helped with the logo update.
But I am looking for some references on how to use files from /custom/assets.

4

@parag-thoughti also make sure you can use the versioning as well into the js and css while adding into your code

5

Sure.
But first I am working on getting it working.

6

hi @parag-thoughti, are you seeing errors in the console after following the advice in the custom/assets folder?

7

No @stephenwaite .
I am not getting any errors but also not getting assets loaded.
Looks like I am missing steps.
Will try again to see if it works.

8

@stephenwaite , I am not able to get it working.
I am following below steps as per README.md:

  1. Created my-style.css file in /custom/assets/css directory as follows:
body {
    font-family: verdana, arial, sans-serif;
    background-color: #000000 !important;
}

.btn {
    font-size: xx-large !important;
}
  1. created custom.yaml file in /custom/assets directory as follows:
assets:
    always-load:
        basePath: %webroot%/custom/assets/
        link: my-style.css
        autoload: true

Still it is not working.

9

Has there been any progress on this? I’m stuck as well.

10

It seems I had forgotten the single quotes around the basePath

It works now!

1 Like