How to customize header and footer in tutor mfe

Site Operators Tutor Help
, , ,
3

How to change the footer and header color using @edx/brand package in tutor

  1. Fork @edx/brand package and make the changes:

file _overrides.scss (for example to change the background color in header use class)

.site-header-desktop , .learning-header{
  background: #B6AEE1 !important;
}

_variables.scss (for example to change the background color in footer use variables)

$gray-footer: #B6AEE1;

To make the changes you need to be aware of how files are imported in the MFE apps and what code you want to override, also you can delete files you don’t need. for example, all the images.

  1. Create a plugin to install the package:
    hooks.Filters.ENV_PATCHES.add_item(
    (
    “mfe-dockerfile-post-npm-install”,
    “”"
    RUN npm install ‘@edx/brand@git+https://github.com//brand.git’
    “”"
    )
    )
  2. run commands tutor config save and tutor images build mfe
  3. run tutor local start and you have to see your changes.

image
image1238×270 24 KB

How to change the footer and header using a fork (production)

  1. Fork the header and footer repo and run npm ci or npm install
  2. Make your changes
  3. run npm build to generate the dist folder
  4. create an npm custom package to publish that dist folder or create a branch in the repo that only contains the files for the dist folder.
  5. create a tutor plugin to install the footer or header that contains the distribution files.
  6. build the mfe image
  7. restart your instance to see the changes.

How to test or develop the footer and header, or any dependency using a fork (dev)

You can follow other posts to do that:

I left my explanation here to make it visible for anyone in the community.

1 Like