How to customize header and footer in tutor mfe

Site Operators Tutor Help
, , ,
1

in tutor, I working with lettest release Olive 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 :slightly_smiling_face:

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'
"""
    )
)
2

the issue is resolved.

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
4

it is very useful everyone can try it If need to customize the header & footer and also customize related mfe.i also try this all way and all of us work for me for a couple of days ago.

Screenshot from 2023-04-15 15-59-56
Screenshot from 2023-04-15 15-59-561827×562 72.5 KB

5

Hola disculpa tengo el mismo problema, si no es mucha molestia como lo pudiste resolver ? Estoy intentando modificar mi encabezado y pie de pĂĄgina pero aĂșn no encuentro la forma, agradecerĂ­a tu apoyo

6

Hola @Yibran_Vazquez , el comentario de arriba https://openedx-uploads-dedalo.s3.amazonaws.com/cssvars/d84c6f6c-e9cf-4677-884d-b301deb8c411.css tiene algunas indicaciones, trata de seguir los pasos y ver si te funciona.

Saludos.

7

@Yibran_Vazquez can u please use the English language so we can understand your problem and give u an answer?

9

Hello. This is the closest post related to my question so far, so I would like to ask it still. Same principle of editing the tutor mfe header and footer, I want to edit tutor mfe payment template.

This is the page where it goes to upon processing payments https://apps.local.overhang.io/payment

10

Hi @Engr_James_Lusuegro,

The thing that you want to achieve is to modify the code in the MFE, right?

I haven’t worked with other tutor plugins, and hopping I understand your question correctly, the steps that you should follow are these ones How to set your custom fork repo of mfe discussion app changes on tutor

You have to be aware of some things:

  1. You need to fork and modify GitHub - openedx/frontend-app-payment
  2. This is added by tutor-ecommerce no tutor-mfe tutor-ecommerce/tutorecommerce/plugin.py at master · overhangio/tutor-ecommerce · GitHub then I guess using ECOMMERCE_PAYMENT_MFE_APP in the config.yml you should be able to add your custom mfe.
  3. I guess you have to rebuild both images after applying your changes.
11

instead of these whole steps just do it below and set it according to it. use the CLI instead of editing config.yml directly

tutor config save --set MFE_LEARNING_MFE_APP="{'name': 'learning', 'repository': 'https://github.com/openedx/frontend-app-learning', 'version': 'master', 'port': 2000}"

and the rest things u should follow with @dcoa’s answer.

1 Like
12

can please share the standard way to customize the header and footer
with the steps so it is easy to customize?
and also share the production-based steps for the same.
started one discussion for that

13

@Komal_Raval The problem is already solved please follow the above steps exactly.

14

can not understand the steps needed to create a plugin and push the both header and footer in the personal repository?

15

@Komal_Raval To create a plugin u should follow these documents

here we fork the header and footer repo form openedx for our own customization.

you can also follow brand-edx

16

@Yagnesh I just want to know what is the standard way is there any other way we have for the header and footer customization or not please say cause I need to implement it on the production so asking

and please send me the plugin content so I can get a better idea of what I need to add to the plugin.

and repository of header and footer no need to clone right only add both in our private repo for development and need to add this in the plugin it takes automatically and installs the same.

thanks for the suggestion.