Custom CSS for custom appearance

Technical Support
1

Dear all,

I can add anything on the appearance and it create a custom DOM class “or-appearance-{}” but now I would like to add a CSS to control the UI.

Can I add simply a CSS file that is loaded for forms without changing the docker images ?

Thanks in advance

2

Hi @delcroip

As far as I know. there is no way to inject CSS into webapp, be it a form or just the base page.

3

Thanks,

Do you think it could be possible to add something like below (LMM generated) pointing to a custom css folder ?

// Route to dynamically include all CSS files
app.get('/', (req, res) => {
  const cssDir = path.join(__dirname, 'public/custom_css');
  let cssLinks = '';
  
  // Read all files from css directory
  fs.readdir(cssDir, (err, files) => {
    if (err) {
      console.log('Error reading directory:', err);
      return res.send('Error loading CSS files');
    }
    
    // Filter for .css files and create link tags
    cssLinks = files
      .filter(file => file.endsWith('.css'))
      .map(file => `<link rel="stylesheet" href="/css/${file}">`)
      .join('\n');
    
    // Send HTML with all CSS links
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          ${cssLinks}
        </head>
        <body>
          <!-- Your content -->
        </body>
      </html>
    `);
  });
});
4

The problem is not so much the technical “how” to allow custom CSS (though it would be a bit more involved then that code since we need to basically rebuild the service worker file to include the new css). The challenge is doing it in a maintainable way.

To have something like this as a first-class CHT feature, I think we would want to have some way to guarantee things would not break when upgrading to a new CHT version (or at least to be able to warn folks when relevant stuff changes). That becomes very difficult when the control surface is just a blank-slate for any stylesheet. I do know that other apps/platforms offer support for custom stylesheets, but I have not looked too closely at what is involved. It would be interesting to investigate and see what kinds of guardrails are in place (e.g. just supporting customizing a certain fix list of things).

For those wanting to live on the edge, it is technically possible to update the css files for the CHT without rebuilding the Docker image. The api container builds the service worker file from the assets that live in the container at /service/api/build/static/webapp. Technically I do not think there is any reason you could not volume-map your custom .css file into that directory. However, you would also need to update the /service/api/build/static/webapp/index.html file to explicitly link to your custom stylesheet (since by default it is only loading styles.css). Once that is done, you still have to trigger the api server do re-build the service worker file (since it is not actively watching for changes in that directory). You can do this by restarting the api container or by changing something else in the service worker file that is already tracked by the api server (e.g. make some change to the branding doc in the medic db).

Of course, I don’t recommend doing any of this in production. Any of this could change without warning in later CHT versions (and even if things don’t change I am not sure what challenges you might face just trying to upgrade and put your custom changes into a new api container…)

2 Likes
5

in our case we just want to have a background color based on the severity so very low risk

and I just see that we can already use the existing CSS to have something similar cht-core/webapp/src/css/enketo/medic.less at a2682caf70f2bf0a5e2ca870ad7adeb99f2a57df · medic/cht-core · GitHub

1 Like
6

to use it should I write ‘summary h1 red’ ?

7

I think it would be nice to have those css available outside summary or even hx, would you accept a PR that put those color management outside summary-hx sections ?

br

8

Let me try to summarize my understanding of what we are talking about here. :sweat_smile: You want to be able to set different background colors for questions in a form. We already have a (poorly documented) feature that lets you set specific background colors for notes that are within a summary group by setting a header appearance (e.g. h2) and a color appearance (e.g. red). You are proposing expanding this functionality to allow setting the background color of form questions independently of the other summary or header appearances.

Does that sound correct? If so, I have a few followup questions:

  1. Do you want to set the background color just for note fields or for pretty much any type of form question?
  2. Would a fixed list of available colors (like what we have currently) be sufficient for your needs?
  3. Am I correct in thinking you just want to set the background color (and not affect any other formatting/text-size)?

In general, I do think this could be a viable feature that would be useful to the broader community!

1 Like
9

exactly

I think having few colors available for question/note would be great and sufficient in most of the cases (background and/or font color)

Adding an empty custom CSS (like an empty custom.less file, that could be replaced) could also be useful for more advanced case (sometime the customers have very specific requests) but it is a nice to have.

br

1 Like
10

Issue logged!

1 Like