Customizing MFE

Development
1

Hi, I want to customize the header and footer in MFE, second I want to add logos to the login/signup page in MFE (authn), third I want to add a custom dashboard where I can view stats, graphs etc. and can generate reports etc. Can anyone guide me how I can customize the mfe? Should I create a plugin or should I use Brand package?

1 Like
2

Hi @brunodev - there are lots of posts in this forum about customizing MFEs. Could you please search around, and make a more specific post about what version of Open edX you’re running, what you’ve tried, what’s working, and what’s not?

3

Hi @sarina I am currently using tutor version 20.0.3. I have clone the tutor-indigo plugin and made changes to it which changed the logos in the header and footer of lms and cms but did not change the logos in the MFE. As far as customizing MFE goes, I haven’t done anything. I just wanted to know whether I should use the brand package or create my own plugin because I need to do three different customization to MFE.

  1. Add custom logos to header and footer of MFE
  2. Change the login/signup page
  3. Add a custom dashboard where the admin can view stats and generate reports.
4

I would recommend updating your post body with these details and a more specific post title detailing the problem you’d like solved. I’m not a frontend engineer so I can’t help further.

1 Like
5

Hi @brunodev ,

For changing logos in Open edX:

  • Studio site: You can directly change the logo at

    tutorindigo/templates/indigo/cms/static/images/studio-logo.png

  • LMS site: Change the logo at

    tutorindigo/templates/indigo/lms/static/images/logo.png

As for customizing MFE pages like the login/signup or any other page:

  • You can use the brand-openedx package for this. It allows you to apply CSS-based customizations across MFEs, but it won’t let you change the HTML structure.

  • For changes beyond CSS (like adding new components or modifying the layout), you will need to fork the relevant MFE and make changes directly.

Regarding your custom dashboard:

  • You’ll need to create a new custom MFE for that. You can start from this template:
    Open edX Frontend Template Application

  • Follow the README there—it will guide you on setting up your MFE

If you follow this approach, you can mix simple branding via brand-openedx for minor CSS changes and full custom MFEs where you need more control.

Let me know if you still face any issue

1 Like
6

@brunodev

To help you out further, you can see how Edly’s Brand Open edX package customizes MFE pages here:
https://github.com/edly-io/brand-openedx

This is actually the same package used in Tutor Indigo as well:
https://github.com/overhangio/tutor-indigo/blob/f20e8ef67d48dfe55acec51a4cf9208ed4751a2e/tutorindigo/plugin.py#L125

You can use this package to customize MFE pages—mostly for CSS and branding changes. For deeper changes like HTML structure or adding new components, you’d still need to fork the relevant MFE.

1 Like