Is it possible to override the MFE styles similar to what can be done for the content outside MFE (e.g. by using _overrides.scss? I tried to set “display:none” for the SVG with green checks in learning sequence navigation line as they look pretty ugly (see screenshot) — nothing happens. I try to override some basic styles, just for experiment, e.g. making background of body green. It works for main page, but inside the course it does not.
MFE styles can be overridden by using a custom branding NPM package.
See the README at GitHub - openedx/brand-openedx for some details on how to do that.
Hi, I tried to follow the guides but have issues with #3 (Configure your Open edX instance to consume your custom brand package.). After many attempts I did the following simplified procedure:
Open folder where I have custom themes: $(tutor config printroot)/env/build/openedx/theme
Do npm install @edx/brand@git+https://git@github.com/edx/brand-edx.org.git. This creates directory node_modules in the theme folder and add the package there.
Change some styles in “_overrides.scss” and then run tutor images build openedx without any effect.
Can you please help and point on what am I doing wrong. Or perhaps there is a link to more detailed documentation? Thanks in advance.
Thanks, there are so many different documentation sources, which suggest different things — it is easy to get lost. The link you gave helped to figure out what am I doing wrong — instead of installing the brand package locally I should set this option to the Dockerfile via plugin hook:
(
"mfe-dockerfile-post-npm-install",
"""
RUN npm install '@edx/brand@file:/./brand-edx.org'
"""
)
And then build a new image for MFE.
However, the question is where to place the folder with the modified brand package so docker can find it? Is there any local folder which is mapped to the Docker internal file system when image for MFE is being built? Or the only option is publish it somewhere, e.g. GitHub?
Thanks once again for your help, I really appreciate it.
Installing a branding package from a local checkout is a bit tricker.
You’ll have to copy the package from your local file system into the docker container before running npm install.
This is how we do that when deploying instances with grove. The first argument to the docker COPY command is the path to your local folder containing the package, which if I rember correctly equals $(tutor config printroot)/env/plugins/mfe/build/mfe.
I am trying as well to override the mfe styles, more precisely those of authn. I have forked the brand-openedx repo and added a tutor plugin as detailed in the tutor-mfe readme, i.e.:
from tutor import hooks
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install",
"""
RUN npm install '@edx/brand@git+https://github.com/African-Cities-Lab/brand-edx.org.git'
"""
)
)
I have put that code into a file at .local/share/tutor-plugins/custommfe.py, and enabled it as in tutor plugins enable custommfe.
I have added some CSS to make the logo bigger in authn (see commit feat: override logo width · African-Cities-Lab/brand-openedx@9c1049c · GitHub).
Then, I have saved the config tutor config save and tried:
tutor local restart
tutor local launch -I
tutor local stop + tutor local start -d
and even tutor images build mfe followed by stop+start.
thank you for your answers. There were two issues:
my tutor images build mfe did not get my latest commit in github.com/African-Cities-Lab/brand-edx.org, so either I specify a reference (commit/tag) in the plugin or I use the --no-cache flag.
after fixing the first issue, as pointed out by @arbrandes, the CSS from frontend-app-authn is loaded after the brand overrides so in order to make the rules from overrides prevail, I need to make the css selectors more specific.
Regarding point 2, and considering the html in question (note @svkucheryavski that the class logo IS applied to the img element):
it was enough to change the .logo selector for img.logo, since img.logo is more specific than the .logo selector used in the frontend-app-authn - since selector specificity is more important than rule order in CSS.
