Open edX: verawood installed with tutor version 22.0.0
All I want to change is the catalog default message subtitle: “It works! Powered by the Open edX® Platform”
I had minor success with a plugin, but that either removes the html overlay or replaces the h1, p tags, which then have no styling for light/dark mode.
I would have thought that changing default text would be quite simple.
Please help, this shouldn’t be this difficult?
Plugin slots are the primary way to customize most things in recent OpenEdX. That includes the banner you are referring to.
We do change that banner through a plugin:
with our home banner defined here:
https://github.com/calculquebec/tutor-plugins/blob/cq/verawood.dev/theming/home_banner.tsx
Note that we include a custom JavaScript which handles the multilingual text based on the language cookies
https://github.com/calculquebec/tutor-plugins/blob/cq/verawood.dev/scripts/cq.js
Feel free to reuse ideas from our repositories.
Thank you for the links to your repo.
Below is working, and I thought it would be an easy change. I thought there would be an easier way. For example, if I have this plugin, deployed say for 5 different sites, and each site customizes their theme, I would then have to customize this plugin for each of the 5 sites, to accommodate for the hard coded html styling. Maybe I’m not explaining my issue very well.
# Replace default "Welcome / It works!" banner on catalog homepage
(
"catalog",
"org.openedx.frontend.catalog.home_page.overlay_html",
"""
{
op: PLUGIN_OPERATIONS.Hide,
widgetId: 'default_contents',
},
{
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'custom_welcome',
type: DIRECT_PLUGIN,
RenderWidget: () => {
const { getConfig } = require('@edx/frontend-platform');
const config = getConfig();
return (
<>
<h1 className="display-1 text-white text-center">
{config.SITE_NAME}
</h1>
<p className="lead text-white text-center mb-3">
{config.CUSTOM_WELCOME_MESSAGE}
</p>
</>
)
},
},
}
""",
),
I suppose what I’m asking “Is there an easier way to change default messages, without having to create a custom plugin”
@arbrandes any thoughts?
Short answer: not today. That string (catalog.home-page.subtitle) is a translated message inside the app, and there’s no config setting for it, so the plugin slot is the supported route. The good news is you only need to write that plugin once, not once per site.
The trick is to have the plugin read its text from config rather than hardcode it. Anything you put in MFE_CONFIG / MFE_CONFIG_OVERRIDES is served by /api/mfe_config/v1 and merged into getConfig(), custom keys included, so:
// env.config.tsx
import { getConfig } from '@edx/frontend-platform';
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
const HomeOverlay = () => {
const { SITE_NAME, HOMEPAGE_TITLE, HOMEPAGE_SUBTITLE } = getConfig();
return (
<>
<h1 className="display-1 text-white text-center">
{HOMEPAGE_TITLE || `Welcome to ${SITE_NAME}`}
</h1>
{HOMEPAGE_SUBTITLE && (
<p className="lead text-white text-center mb-3">{HOMEPAGE_SUBTITLE}</p>
)}
</>
);
};
const config = {
pluginSlots: {
'org.openedx.frontend.catalog.home_page.overlay_html': {
keepDefault: false,
plugins: [{
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'custom_home_page_overlay',
type: DIRECT_PLUGIN,
RenderWidget: HomeOverlay,
},
}],
},
},
};
export default config;
Then each deployment only differs by a config value, set from a tiny Tutor plugin that patches openedx-common-settings:
MFE_CONFIG_OVERRIDES.setdefault("catalog", {})["HOMEPAGE_SUBTITLE"] = "Courses for Acme Corp"
Same plugin code, same image build, one setting per client. Note the title is already config-driven, since it interpolates SITE_NAME.
On the styling side, keep the Paragon utility classes (display-1, lead, text-white) instead of inline styles, and leave the banner itself alone: it reads --catalog-home-page-banner-background-image and --catalog-home-page-banner-background-color, so per-site background and colors belong in your brand override CSS (PARAGON_THEME_URLS), not in the plugin.
Thank you very much. I will continue with this.