How to override the xblock loaded in a iframe in learning page

Site Operators Tutor Help
, , ,
1

i want to override a css class inside the xblock loaded in iframe on learning page.
I tried the mfe edx-brand the brand css were not getting applied in the iframe dom element why so.
Also tried the custom indigo targed the element and added the css in the
”custom_tutorindigo\templates\customindigo\lms\static\sass\partials\lms\theme_extras.scss”
still this was also not loaded.

i have updated the indigo folders to customindigo so replaced all the templates and css location in entry point and plugin file still this css were not loaded and the brand css was not getting applied then after build the mfe and openedx again still the extra css not getting applied.

Any option how to override that css.

ex→ hide a hd-3 class element in all the xblocks on learning page.

2

Hi @viral - when you make a post could you please always include what version of Tutor you’re running? Thank you!

3

I am using the openedx teak version and the tutor 20 version.

4

I’m not sure how Indigo interacts with this. @tutor-maintainers any help? (as a sidebar, could I create an indigo-maintainers group to better tag the right people for Indigo questions? Who would belong to that?)

5

(I haven’t looked into XBlock theming in a while, so maybe @kmccormick can keep me honest.)

First off, MFE branding won’t work with XBlocks, because as you’ve seen, they’re loaded inside iframes, and the content of iframes can only be styled from within. This means that applying brand packages and rebuilding the MFE image won’t do anything to XBlocks.

However, the iframes do load lms-main-v1.scss, which in turn loads sass/partials/lms/theme/_extras.scss. This means that XBlocks can indeed be customized with a comprehensive theme as per the corresponding Tutor documentation. In other words, if in your $(tutor config printroot)/env/build/openedx/themes you add a /mycustomtheme/sass/partials/lms/theme/_extras.scss and then subsequently enable the theme (including rebuilding the openedx image via tutor images build openedx), your XBlocks should be styled accordingly.

This is what Indigo itself is doing in this file, which subsequently gets loaded into sass/partials/lms/theme/_extras.scss.

If this doesn’t work, it’s likely you’re missing a step. Did you run the settheme command to enable your custom theme?

1 Like
Applying a design token-based theme to the LMS (*NOT* MFEs)
6

Yes, what @arbrandes describes is correct. To take what he’s described one step further, those Sass variables are actually exposed to XBlocks as CSS variables: openedx-platform/common/static/sass/_builtin-block-variables.scss at 22485757573d32e3c0cb1c36855d83bcd2b1251d · openedx/openedx-platform · GitHub . In a future release, we’ll have a way to customize the CSS variables directly without having to set the Sass variables.

These Sass variables will eventually be removed once all other frontends have been moved to MFEs, but we will continue exposing the CSS variables forever, so those are safe to reference in builtin and external XBlocks.

1 Like