Overriding MFE styles

Is it possible to override the MFE styles similar to what can be done for the content outside MFE (e.g. by using _overrides.scss? I tried to set “display:none” for the SVG with green checks in learning sequence navigation line as they look pretty ugly (see screenshot) — nothing happens. I try to override some basic styles, just for experiment, e.g. making background of body green. It works for main page, but inside the course it does not.

If it is not possible to override the styles, can you please recommend another way to tune the MFE’s look? Thanks a lot in advance

MFE styles can be overridden by using a custom branding NPM package.
See the README at GitHub - openedx/brand-openedx for some details on how to do that.

2 Likes

Thank you very much!

Hi, I tried to follow the guides but have issues with #3 (Configure your Open edX instance to consume your custom brand package.). After many attempts I did the following simplified procedure:

  1. Open folder where I have custom themes: $(tutor config printroot)/env/build/openedx/theme

  2. Do npm install @edx/brand@git+https://git@github.com/edx/brand-edx.org.git. This creates directory node_modules in the theme folder and add the package there.

  3. Change some styles in “_overrides.scss” and then run tutor images build openedx without any effect.

Can you please help and point on what am I doing wrong. Or perhaps there is a link to more detailed documentation? Thanks in advance.

There are instructions on how to use a custom brand package in tutor in the tutor-mfe README.

Thanks, there are so many different documentation sources, which suggest different things — it is easy to get lost. The link you gave helped to figure out what am I doing wrong — instead of installing the brand package locally I should set this option to the Dockerfile via plugin hook:

    (
        "mfe-dockerfile-post-npm-install",
        """
RUN npm install '@edx/brand@file:/./brand-edx.org'
"""
    )

And then build a new image for MFE.

However, the question is where to place the folder with the modified brand package so docker can find it? Is there any local folder which is mapped to the Docker internal file system when image for MFE is being built? Or the only option is publish it somewhere, e.g. GitHub?

Thanks once again for your help, I really appreciate it.

Installing a branding package from a local checkout is a bit tricker.

You’ll have to copy the package from your local file system into the docker container before running npm install.

This is how we do that when deploying instances with grove. The first argument to the docker COPY command is the path to your local folder containing the package, which if I rember correctly equals $(tutor config printroot)/env/plugins/mfe/build/mfe.

1 Like

Hello,

I am trying as well to override the mfe styles, more precisely those of authn. I have forked the brand-openedx repo and added a tutor plugin as detailed in the tutor-mfe readme, i.e.:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
RUN npm install '@edx/brand@git+https://github.com/African-Cities-Lab/brand-edx.org.git'
"""
    )
)

I have put that code into a file at .local/share/tutor-plugins/custommfe.py, and enabled it as in tutor plugins enable custommfe.
I have added some CSS to make the logo bigger in authn (see commit feat: override logo width · African-Cities-Lab/brand-openedx@9c1049c · GitHub).
Then, I have saved the config tutor config save and tried:

  • tutor local restart
  • tutor local launch -I
  • tutor local stop + tutor local start -d
  • and even tutor images build mfe followed by stop+start.

None of them worked. What have I done wrong?

Thank you. Best,
Martí

@martibosch, this could be due to the fact that frontend-app-authn loads its own CSS after the brand overrides. And in its own CSS, it sets the property that you’re trying to override.

Does your custom property show in the browser inspector as being overriden?

In addition to @arbrandes answer:

  1. You indeed need to run tutor images build mfe following by restarting tutor.
  2. You are missing semicolon in you css (it should not be a problem, but still).
  3. Class .logo is not an image class, it is a class for <a> tag with the image inside. Try to use: .logo > img instead.

Hello @arbrandes and @svkucheryavski,

thank you for your answers. There were two issues:

  1. my tutor images build mfe did not get my latest commit in github.com/African-Cities-Lab/brand-edx.org, so either I specify a reference (commit/tag) in the plugin or I use the --no-cache flag.
  2. after fixing the first issue, as pointed out by @arbrandes, the CSS from frontend-app-authn is loaded after the brand overrides so in order to make the rules from overrides prevail, I need to make the css selectors more specific.

Regarding point 2, and considering the html in question (note @svkucheryavski that the class logo IS applied to the img element):

<a class="pgn__hyperlink default-link standalone-link" href="https://courses-staging.africancitieslab.org" target="_self"><img alt="African Cities Lab" src="https://courses-staging.africancitieslab.org/theming/asset/images/logo.png" class="logo"></a>

it was enough to change the .logo selector for img.logo, since img.logo is more specific than the .logo selector used in the frontend-app-authn - since selector specificity is more important than rule order in CSS.

Thank you very much for your help. Best,
Martí

1 Like

Interesting. My HTML with logo inside any course looks as follows:

<a href="https://elearn.bio.aau.dk/dashboard" class="logo"><img class="d-block" src="https://elearn.bio.aau.dk/theming/asset/images/logo.png" alt="e-learning platform for Bio"></a>

Without class “.logo”. But great you found the solution.