# Overriding MFE styles **URL:** \ **Category:** Tutor Help\ **Tags:** tutor, tutor-mfe\ **Created:** [December 16, 2022, 11:53am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955 "2022-12-16T11:53:53Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [December 16, 2022, 11:53am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/1 "2022-12-16T11:53:53Z")
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. ![Screenshot 2022-12-16 at 12.46.37](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/c/c0308f3bc653b01cbdf428a9d96092c2863519ed.png) 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 ---
**Author:** ![mtyaka](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/mtyaka/32/230_2.png) [@mtyaka](https://discuss.openedx.org/u/mtyaka)\ **Post date:** [December 22, 2022, 7:55am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/2 "2022-12-22T07:55:58Z")
MFE styles can be overridden by using a custom branding NPM package. See the README at [GitHub - openedx/brand-openedx](https://github.com/openedx/brand-openedx) for some details on how to do that. ---
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [December 23, 2022, 8:19pm UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/3 "2022-12-23T20:19:50Z")
Thank you very much! ---
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [January 3, 2023, 8:16am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/4 "2023-01-03T08:16:14Z")
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. ---
**Author:** ![mtyaka](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/mtyaka/32/230_2.png) [@mtyaka](https://discuss.openedx.org/u/mtyaka)\ **Post date:** [January 4, 2023, 7:15am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/5 "2023-01-04T07:15:45Z")
There are instructions on how to use a custom brand package in tutor in the [tutor-mfe README](https://github.com/overhangio/tutor-mfe#customising-mfes). ---
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [January 4, 2023, 9:29am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/6 "2023-01-04T09:29:59Z")
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: ```auto ( "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. ---
**Author:** ![mtyaka](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/mtyaka/32/230_2.png) [@mtyaka](https://discuss.openedx.org/u/mtyaka)\ **Post date:** [January 4, 2023, 11:32am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/7 "2023-01-04T11:32:54Z")
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](https://gitlab.com/opencraft/dev/tutor-contrib-grove/-/blob/main/tutorgrove/patches/mfe-dockerfile-post-npm-install) when deploying instances with [grove](https://gitlab.com/opencraft/dev/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`. ---
**Author:** ![martibosch](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@martibosch](https://discuss.openedx.org/u/martibosch)\ **Post date:** [January 24, 2023, 10:01am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/8 "2023-01-24T10:01:28Z")
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.: ```auto 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](https://github.com/African-Cities-Lab/brand-openedx/commit/9c1049c90c7f1117d5ab5dc79891cac5e2912ef1)). 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í ---
**Author:** ![arbrandes](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/arbrandes/32/158_2.png) [@arbrandes](https://discuss.openedx.org/u/arbrandes)\ **Post date:** [January 24, 2023, 1:06pm UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/9 "2023-01-24T13:06:22Z")
@martibosch, this could be due to the fact that frontend-app-authn loads its own CSS [after the brand overrides](https://github.com/openedx/frontend-app-authn/blob/master/src/index.scss#L7). And in its own CSS, [it sets the property](https://github.com/openedx/frontend-app-authn/blob/master/src/sass/_base_component.scss#L32) that you’re trying to override. Does your custom property show in the browser inspector as being overriden? ---
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [January 24, 2023, 1:17pm UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/10 "2023-01-24T13:17:56Z")
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 `` tag with the image inside. Try to use: `.logo > img` instead. ---
**Author:** ![martibosch](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@martibosch](https://discuss.openedx.org/u/martibosch)\ **Post date:** [January 24, 2023, 5:49pm UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/11 "2023-01-24T17:49:21Z")
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](http://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](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Regarding point 2, and considering the html in question (note @svkucheryavski that the class logo IS applied to the img element): ```auto ``` 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í ---
**Author:** ![svkucheryavski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/svkucheryavski/32/6278_2.png) [@svkucheryavski](https://discuss.openedx.org/u/svkucheryavski)\ **Post date:** [January 25, 2023, 7:05am UTC](https://discuss.openedx.org/t/overriding-mfe-styles/8955/12 "2023-01-25T07:05:15Z")
Interesting. My HTML with logo inside any course looks as follows: ```auto ``` Without class “.logo”. But great you found the solution.