CSS Styling in OpenEMR

OpenEMR Development
7

Now I can share how I was able to compile customized themes:

I have my server running without docker.
I found this fix Fix gulp build deprecated warning by sjpadgett · Pull Request #6543 · openemr/openemr · GitHub
So I have downloaded:

https://github.com/openemr/openemr/blob/master/package.json
https://github.com/openemr/openemr/blob/master/package-lock.json
https://github.com/openemr/openemr/blob/master/gulpfile.js

Paste them on /var/www/html folder (I move everything from openemr folder to it).

I have updated node.js to v18
https://www.hostingadvice.com/how-to/update-node-js-latest-version/ (1. Update Node.js Using Node Version Manager (nvm)), in my case I first installed nvm, then ask it to install

nvm install v18.17.1

Then I run in my server´s terminal

npm install

(it takes a long time). Then create a custom scss with customized palette (for example style_custom.scss), you can take any existing theme. ( interface/themes/colors), and set your colors.

$colorname: "Custom";

$darkest: #404a6d;
$darker: #3a4b84;
$dark: #6b7cb6;
$mid: #8896c4;
$midpale: #a6b0d3;
$pale: #b5bdda;
$midpalepale: #c3cae1;
$palepale: #e1e4f0;
$palepurple: #e7e6f9;
$paler: #f8f8fd;
$midnightblue: #2f2f7d;
$white: #fff;
$navbar-text-color: $pale;

@import "utilities/default_variables";

// Import Bootstrap 4 SCSS Files before doing anything
// This gets replaced in gulp now -- do not touch
// bs4import

@import "../color_base";

I noticed that some files used to compile scss were out of date, so I downloaded most recent files from openemr github:

https://github.com/openemr/openemr/blob/master/interface/themes/core.scss

I replaced them in my server´s folder.

Then downloaded bootstrap4-theme files (src and dist folders).

[public/assets/modified/@ttskch/select2-bootstrap4-theme](https://github.com/openemr/openemr/tree/master/public/assets/modified/%40ttskch/select2-bootstrap4-theme)

I moved select2-bootstrap4-theme folder to match github path.

cd /public/assets

mv \@ttskch modified/\@ttskch

npm run build (at var/www/html where gulpfile.js and package.json are located).

Go and take a cup of coffee (it took 12 minutes in my server).

1 Like