# How to customize header and footer in devstack mfe

**URL:** <https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362>\
**Category:** Design\
**Tags:** how-to, devstack, tutor, nutmeg\
**Created:** [June 8, 2023, 1:13pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362 "2023-06-08T13:13:27Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [June 8, 2023, 1:13pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/1 "2023-06-08T13:13:27Z")

</div>

In devstack, I working with openedx nutmeg release and now I want to need some changes in the header and footer which will come for mfe like the courses page, Discussion, profile and so more. I figured out mfe header and footer comes from the below repo so i fork the header and footer repo

> **[GitHub - openedx/frontend-component-header](https://github.com/openedx/frontend-component-header)**
>
> Contribute to openedx/frontend-component-header development by creating an account on GitHub.

> **[GitHub - openedx/frontend-component-footer: Site footer component for edX...](https://github.com/openedx/frontend-component-footer)**
>
> Site footer component for edX frontend apps. Contribute to openedx/frontend-component-footer development by creating an account on GitHub.

in the src folder and add the module.config.js file

```auto
module.exports = {
  /*
  Modules you want to use from local source code. Adding a module here means that when this app
  runs its build, it'll resolve the source from peer directories of this app.

  moduleName: the name you use to import code from the module.
  dir: The relative path to the module's source code.
  dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
  */
  localModules: [
    // { moduleName: '@edx/brand', dir: '../src/brand-openedx' }, // replace with your brand checkout
    // { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
    // { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
    // { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
    { moduleName: '@edx/frontend-component-header', dir: '../src/frontend-component-header', dist: 'src' },
    { moduleName: '@edx/frontend-component-footer', dir: '../src/frontend-component-footer', dist: 'src' },
  ],
};

```

in the frontend-app-learning folder and got an below error .

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/e/e0f620f77ea96d1c79cfa3a176e197fd9810a04a.png)

any other way to customize my own header and footer in devstack or any other way like this so please guide me on what can I do…  
Thanks in Advance 🙂

---

<div class="post-metadata">

**Author:** ![djoy](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/djoy/32/542_2.png) [@djoy](https://discuss.openedx.org/u/djoy)\
**Post date:** [June 8, 2023, 4:04pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/2 "2023-06-08T16:04:24Z")

</div>

Hello!

So there are a few things here.

The first thing I want to call out is that module.config.js only works in development - if you run `npm run build` to build the MFE, it won’t currently use module.config.js. It maybe should, but wasn’t built that way, unfortunately. For a production build, you need to ‘alias’ the header/footer using `npm install`.

Syntax: `npm install <package-name>@<type>:<branded-package>`

Examples:

```auto
# npm package
npm install @edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest

# git repository
npm install @edx/frontend-component-header@git:https://github.com/openedx/frontend-component-header-edx.git

# local folder
npm install @edx/frontend-component-header@file:../path/to/local/module

```

So once you finish development and want to do a prod build, do one of the above, and _then_ run `npm run build`.

Regarding the error you’re seeing, it’s that the SCSS import of the footer SCSS has an incorrect path.

I think what you want to do is make your module.config.js include these two lines:

```auto
module.exports = {
  localModules: [
    // This line intercepts imports for the header's stylesheet and redirects them to the `src` directory of your local checkout of the header, which is where index.scss lives.
    { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer', dist: 'src' },
    // This line catches JavaScript imports and points them at that same src directory.
    { moduleName: '@edx/frontend-component-footer', dir: '../frontend-component-footer', dist: 'src' },
  ],
};

```

You can have two lines like this, and that’s okay. It’ll let the SCSS use the first and locate the file it’s looking for, while the JS code will use the second to find its components. There was a thread from a couple years ago where we got this working: [MFE header override - #14 by djoy](https://discuss.openedx.org/t/mfe-header-override/5125/14)

Let us know if it works!

---

<div class="post-metadata">

**Author:** ![djoy](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/djoy/32/542_2.png) [@djoy](https://discuss.openedx.org/u/djoy)\
**Post date:** [June 8, 2023, 4:05pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/3 "2023-06-08T16:05:04Z")

</div>

And as a side note, there was documentation around this and it got lost recently. This issue documents the need to recover it: [Add a How-To doc for overriding headers and footers in an MFE · Issue #272 · openedx/docs.openedx.org · GitHub](https://github.com/openedx/docs.openedx.org/issues/272)

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [June 9, 2023, 9:06am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/5 "2023-06-09T09:06:12Z")

</div>

i did the same in the devstack local but this is not worked for me, got an same error.

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [November 21, 2023, 11:37am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/6 "2023-11-21T11:37:36Z")

</div>

Hello  
in tutor, I working with lettest release Nutmeg and now I want to need some changes in the header and footer which will come for mfe like the courses page, Discussion, profile and so more. so I figured out tutor mfe header and footer coms from this repo so I need to fork this below repo and do changes is there any other way to customize my own header and footer or any plugin way like this so please guide me on what can I do. Thanks in Advance 🙂

```auto
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
# npm package
RUN npm install '@edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest'
# git repository
RUN npm install '@edx/frontend-component-footer@git+https://github.com/edx/frontend-component-footer-edx.git'
"""
    )
)

```

> **[GitHub - openedx/frontend-component-footer: Site footer component for edX...](https://github.com/openedx/frontend-component-footer)**
>
> Site footer component for edX frontend apps. Contribute to openedx/frontend-component-footer development by creating an account on GitHub.

> **[GitHub - openedx/frontend-component-header](https://github.com/openedx/frontend-component-header)**
>
> Contribute to openedx/frontend-component-header development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [December 21, 2023, 6:40pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/7 "2023-12-21T18:40:56Z")

</div>

Hi @Komal_Raval,  
Check the [tutor-custom-branding](https://github.com/aulasneo/tutor-contrib-branding) plugin. You can use it to easily change logos, fonts, and colors.  
If you want deeper changes in your header or footer, yes you have to fork it. Then you can use `BRANDING_FRONTEND_COMPONENT_HEADER_REPO` and `BRANDING_FRONTEND_COMPONENT_FOOTER_REPO` variables to point to your repo.

---

<div class="post-metadata">

**Author:** ![Yagnesh](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/yagnesh/32/9571_2.png) [@Yagnesh](https://discuss.openedx.org/u/Yagnesh)\
**Post date:** [December 22, 2023, 9:15am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/8 "2023-12-22T09:15:14Z")

</div>

@Andres.Aulasneo Your repository appears to be incredibly valuable. The features and content seem highly useful and well-crafted. Kudos to you and your team for creating such a resourceful repository.

**But it seems it is not suitable for Quince at this time.**

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [December 22, 2023, 6:36pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/9 "2023-12-22T18:36:35Z")

</div>

Hi @Yagnesh,  
Thanks for your words! They are very stimulating.  
No, it’s not ready for Quince yet, but soon it will be. Stay tuned for more updates!

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [May 23, 2024, 11:40am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/10 "2024-05-23T11:40:13Z")

</div>

Thanks for response.

Hello @Andres.Aulasneo ,

I have a theme already set in Tutor. After updating my Tutor version, the Learning MFE is now required. I want to change the fonts on the MFE pages to match the fonts in my theme.

I followed the steps mentioned in the readme file, but I’m stuck on the following command:

```auto
tutor branding download-fonts

```

I encountered the following error:

```auto
tutor branding download-fonts
***Downloading fonts***
Downloading font.zip from h to /home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts
Error downloading font.zip: Invalid URL 'h': No scheme supplied. Perhaps you meant https://h?
...
with zipfile.ZipFile(os.path.join(dest_dir, filename), 'r') as zip:
  File "/usr/lib/python3.10/zipfile.py", line 1251, in __init__
    self.fp = io.open(file, filemode)
FileNotFoundError: [Errno 2] No such file or directory: '/home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts/font.zip'

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/f/f15ffc24d885447377f9e3bee0b4406c80b50778.png)

Can you please assist?

Thanks in Advance 🙂

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [May 23, 2024, 12:01pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/11 "2024-05-23T12:01:24Z")

</div>

Hi @Komal_Raval,  
You should upload your `fonts.zip` to a public url, e.g., a public S3 bucket, and set the URL in the `BRANDING_FONTS_URLS` configuration. Adding fonts from a local file is not supported. If your font is public, you can use the public download link directly.

E.g.:

```auto
BRANDING_FONTS_URLS:
- https://fonts.google.com/download?family=Roboto
BRANDING_FONT_FAMILY: Roboto

```

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [May 23, 2024, 12:27pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/12 "2024-05-23T12:27:24Z")

</div>

Thanks @Andres.Aulasneo ,

I have one more question. I already have a custom theme set up. After enabling this plugin, a new theme is created automatically. According to the readme file, I also need to run the `settheme` command.

What should I do in this case?

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [May 23, 2024, 1:05pm UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/13 "2024-05-23T13:05:23Z")

</div>

The branding plugin is not compatible with custom themes. It will actually create a theme itself and replace any other.

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [May 24, 2024, 5:18am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/14 "2024-05-24T05:18:22Z")

</div>

Thanks @Andres.Aulasneo ,

Could you please suggest any other method to change the fonts of MFE pages if we have a custom theme?

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [May 24, 2024, 9:19am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/15 "2024-05-24T09:19:41Z")

</div>

Well… Branding MFEs is quite tricky. You can take a look at what the `tutor-contrib-branding` plugin does in `env/plugins/mfe/build/mfe/brand-openedx/paragon/` and load the fonts in `env/plugins/mfe/build/mfe/brand-openedx/fonts`. Then [patch the MFE image](https://github.com/aulasneo/tutor-contrib-branding/blob/master/tutorbranding/patches/mfe-dockerfile-post-npm-install) in a similar way.

Just for curiosity, what do you have in your theme? In every release more parts of Open edX move to MFE, so very little remains to be theme-able. There are some tricks in our plugin, and maybe I can help moving all your theme to the plugin.

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [May 24, 2024, 9:28am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/16 "2024-05-24T09:28:02Z")

</div>

Thanks @Andres.Aulasneo ,

In the theme, I’ve set up all the legacy pages’ HTML and CSS, which used to work fine with Nutmeg.  
However, since upgrading to the Olive platform, only the Learning MFE is necessary, right? So, for the other pages, the theme is functioning as expected. Now, I aim to align the font changes in the Learning MFE with the theme.

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

---

<div class="post-metadata">

**Author:** ![Andres.Aulasneo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/andres.aulasneo/32/984_2.png) [@Andres.Aulasneo](https://discuss.openedx.org/u/Andres.Aulasneo)\
**Post date:** [May 24, 2024, 9:49am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/17 "2024-05-24T09:49:37Z")

</div>

Legacy CSS can be managed with the tutor-contrib-branding, as it can change the contents of the [\_extras.scss file](https://github.com/aulasneo/tutor-contrib-branding/blob/master/tutorbranding/templates/theme/lms/static/sass/partials/lms/theme/_extras.scss). Write your custom SCSS in a text file and then run `tutor config save --set BRANDING_EXTRAS="$(cat my_scss_file)"`. Then rebuild your openedx image.

You can also modify MFE styles in a similar way by using the `BRANDING_OVERRIDES` variable, then rebuilding mfe.

If you have a custom certificate, you can use the `BRANDING_CERTIFICATE_HTML` variable to customize the HTML layout ([see how it works](https://github.com/aulasneo/tutor-contrib-branding/blob/master/tutorbranding/templates/theme/lms/templates/certificates/_accomplishment-rendering.html))

---

<div class="post-metadata">

**Author:** ![Komal\_Raval](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/komal_raval/32/4153_2.png) [@Komal\_Raval](https://discuss.openedx.org/u/Komal_Raval)\
**Post date:** [May 24, 2024, 10:02am UTC](https://discuss.openedx.org/t/how-to-customize-header-and-footer-in-devstack-mfe/10362/18 "2024-05-24T10:02:49Z")

</div>

okay thanks @Andres.Aulasneo .