CSS Styling in OpenEMR

I am working on updating the appearance of previous addresses and have a few questions.

(1) OpenEMR CSS Styles/Themes
How should I do custom css styling in OpenEMR?
I know that you don’t want inline styling.
There are multiple themes. Is there a way that I can specify a custom style without having to change it in every theme?
Where do I put the custom styling?

(2) Using bootstrap styling
I am trouble having bootstrap do the exact styling that I need. Bootstrap documentation shows I can modify/customize some of the bootstrap styling.
Where in OpenEMR can I do this?
For example, there are 8 background colors in class .bg-primary, etc. I don’t like these. I would like to use gray-400 (specified in bootstrap) but I can’t figure out how to set the background to gray-400. .bg-gray-400 does not work.

(3) Table vs DIV
Previous addresses uses a table for the header, but div’s for the rows. I see why Stephen changed the rows to divs. I am thus trying to change the header to a div and not use table. However, I would like to display the divs using bootstrap’s table styling. I like the style of thead-light. However, it won’t work if I specify the class of the div as thead-light. I also like the lines between the table rows like class table-sm in bootstrap. Is there a way to easily use this in the div class? Or, should I just specify a bottom border to each row in css? Where do I specify this if I should not do inline styling.

Thank you for any advice/guidance.

In regards to my question 1
For styling, are we supposed to modify the following file:
/interface/themes/theme-defaults.scss

Then, from the root folder of OpenEMR, run:
npm run dev

And, will this insert the changes into the css files of all of the themes?

hi @psoas, do you use the easy-dev docker? Step 6 of the guide has some tips.

Think you can run npm run build in general to build the themes again.

1 and 2
If this is for your personal or clinic use (and not standard codebase / PR), one of the options is something like Bootstrap Magic generate a full theme. Save that as xxx in themes directory and let everyone select it if they want.

3 - Table vs DIV
This is age old question. Tables by definition can’t be responsive. So if you expect same page to be used on desktop and tablets/phones, use div with col-* classes in BS. If the primary use will be desktop, table with few BS classes kinda works.

Somewhat related note re. addresses or data that can have wildly different sizes (e.g. something as simple as state - Ohio and New Hampshire), BS offers other elegant options like cards rather than traditional tabular layout (tables and/or div). Does need bit more effort though.

1 Like

npm run build worked.

I am wondering:
–If an OpenEMR update involves style changes, does the update script run “npm run build” or does that need to be run after the updates are made?

–If someone pulls code to get the latest commit and there are scss file changes, I guess that they definitely need to run “npm run build”, correct? Do most people do that when they pull commits? Probably not. I guess there is no way around that, though, is there?

1 Like