MFE branding using brand-openedx

Development
1

Hello,
I am currently working on a project to apply our comprehensive theme to the Learning MFE. I started this work by forking GitHub - openedx/brand-openedx and patching the tutor-mfe plugin to apply our brand as described here: GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.. I can tell that this worked because the color of the banner changes to the color we selected in _variables.scss. However the MFE still shows the default logo and favicon. I replaced all assets with our own assets and retained the naming of the files. Is there additional work needed to apply the image assets to the MFE?

2

@CourtneyMaybe, overriding the logos in the branding package will not change them in the MFEs. Changing the logos is described in this section of the tutor-mfe README.

3

Thank you @Agrendalath!

We have copied the images to the MFE container using this patch:
(
“mfe-dockerfile-post-npm-install”,
“”"
RUN mkdir -p /openedx/themes
COPY ./themes /openedx/themes
RUN npm install ‘@edx/brand@file:/openedx/themes/wgu-brand-openedx/’
“”"
)

And then attempted to change the logo using this patch:
(
“mfe-lms-common-settings”,
“”"
MFE_CONFIG[“LOGO_URL”] = “http://apps.local.overhang.io:2000/openedx/themes/wgu-brand-openedx/logo.svg”
MFE_CONFIG[“LOGO_TRADEMARK_URL”] = “http://apps.local.overhang.io:2000/openedx/themes/wgu-brand-openedx/logo-trademark.svg”
MFE_CONFIG[“LOGO_WHITE_URL”] = “http://apps.local.overhang.io:2000/openedx/themes/wgu-brand-openedx/logo-white.svg”
MFE_CONFIG[“FAVICON_URL”] = “http://apps.local.overhang.io:2000/openedx/themes/wgu-brand-openedx/favicon.ico”
“”"
)
However it does not seem like tutor is able to find our images, the build replaces the default logos with a link. Am I missing anything else here?

4

@CourtneyMaybe, I see. We’re pointing these URLs to external locations, so I haven’t tried hosting them directly from the branding package. You can use any static hosting for this (e.g., an S3 bucket).

If you use the comprehensive theme (and have your logo there), you can set the LOGO_URL to something like http://localhost:18000/static/{DEFAULT_SITE_THEME}/images/logo.png to pull it from there.

If you really want to use the branding package to provide your logos, you might be able to do something like this add the following override to the your_branding_package/paragon/_overrides.scss file:

header a.logo {
  background: url("~@edx/brand/logo.svg") no-repeat;
  background-size: 100%;
}
header a.logo > img {
  visibility: hidden;
}

It’s really hacky, though.

1 Like