MFE Custom Theming - Configuration Changes Not Applying to Frontend

Problem:

Hello everyone.
I am trying to implement custom MFE theming in Tutor OpenedX 19.0.5, but the configuration changes are not showing up in the frontend despite successful saves and restarts.

What I am trying to achieve:

  • Custom header navigation links in MFE
  • Blue color scheme with custom styling
  • Tab styling with active states

Approaches tried:

1. MFE Configuration Method:

config.yml

MFE_CONFIG_OVERRIDES:
HEADER_BACKGROUND_COLOR: ‘#1e40af
PRIMARY_COLOR: ‘#1e40af
MAIN_MENU_LINKS:
- type: “external”
href: “http://local.openedx.io
content: “Home”
Result: Colors work, navigation links don’t appear

2. CSS Injection Method:

MFE_CUSTOM_CSS_OVERRIDES: .navbar,.header{background:#1e40af!important}.nav-tabs .nav-link.active{background:#1e40af!important}
Result: Basic styling works, complex navigation CSS doesn’t apply

3. Plugin Development:

Created custom tutor plugins with theme configurations and CSS injection.
Result: Either didn’t apply or caused system instability

Main Issue:

Simple configuration changes (colors, platform name) apply with tutor config save + tutor local restart, but complex changes
(navigation, advanced styling) seem to require something more.

Questions:

  1. Do MFE configuration changes require tutor images build mfe to take effect?
  2. Is there a difference between what can be configured vs what needs rebuilding?
  3. Are navigation links supported in MFE_CONFIG_OVERRIDES or do Ι need a different approach?

Environment:

  • Tutor 19.0.5, Sumac.3, MFE 20.0.0
  • Local development environment

What works: Basic theming, logo changes
What doesn’t work: Header navigation links, advanced tab styling

Looking for guidance on when MFE rebuilds are necessary vs configuration-only changes. But any help on how I can make a custom theme that affects all tutor pages in openedx would be critical and helpful.

1 Like

Are you using Indigo @anastasiouxrhstos ?

@sarina Thanks for asking!

Yes, I started with Indigo as the base. I noticed that direct modifications to Indigo would be lost with any upgrade, so I created a copy and tried to implement it as a custom theme.

What I’m looking for:
A reliable approach to create a persistent custom theme that survives upgrades while supporting:

  • Custom header navigation links
  • Custom styling
  • Tab styling with active states

Is there a solution you can suggest for what I want that I may not have seen?

I just want to be able to easily and simply make changes to header, footer, images etc.

I hope I gave you the information you wanted and you can help me.

Thanks!!!

Have you investigated plugin slots? There are lots of forums posts already about using plugin slots!