Package: tutor-contrib-branding
This plugin, inspired inIndigo,
allow changing the look and feel of Open edX installations.
It can control the appearance of both legacy pages based on HTML
(like the course catalog, dashboard, login, register, etc.), as well as
MFE components.Installationpip install tutor-contrib-brandingConfigurationCustomize colorsMost Bootstrap variables can be set using settings.
These are the available variables and their defaults:BRANDING_PRIMARY: #0000FFBRANDING_SECONDARY: #454545BRANDING_FONT_FAMILY: <no default>BRANDING_BRAND: #9D0054BRANDING_SUCCESS: #178253BRANDING_INFO: #006DAABRANDING_DANGER: #C32D3ABRANDING_WARNING: #FFD900BRANDING_LIGHT: #E1DDDBBRANDING_DARK: #273F2FBRANDING_ACCENT_A: #00BBF9BRANDING_ACCENT_B: #FFEE88BRANDING_BACKGROUND: #ffffffBRANDING_BG_PRIMARY: #ffffffBRANDING_BODY: #FFFFFFBRANDING_HOMEPAGE_BG_IMAGE: “”You can add these settings to theconfig.ymlfile or using thetutor config--set"<setting>=<value>"command.These settings affect the Bootstrap’s_variables.scssfile in thecomprehensive themeand in theMFE branding module.You can also add CSS overrides using theBRANDING_EXTRASand theBRANDING_OVERRIDESvariables,
to impact thecomprehensive themeand theMFE branding modulerespectively.E.g., this setting will add a CSS block to change the color of h1 texts in all MFE:BRANDING_OVERRIDES: >-
  h1 {
        color: red;
  }Managing fontsSetBRANDING_FONTS_URLSto a list of URLS pointing to a zipped set of font files.
Then use thetutor brandingdownload-fontscommand to download an unzip the font files
to$(tutor configprintroot)/env/build/openedx/themes/theme/lms/static/fontsand$(tutor configprintroot)/env/plugins/mfe/build/mfe/brand-openedx/fontsif the mfe plugin is enabled.Tip: copy the download url from thehttps://fonts.google.comsite,
for instancehttps://fonts.google.com/download?family=Roboto%20Flex.E.g., to add Roboto Flex font, set:BRANDING_FONTS_URLS:
- https://fonts.google.com/download?family=Roboto%20FlexThen runtutor branding download-fontsTo add a specific font definition, use theBRANDING_FONTSsetting, e.g.:BRANDING_FONTS: >-
    @font-face {
        font-family: 'Roboto Flex';
        src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
           url('RobotoFlex-VF.woff2') format('woff2-variations');
    }Learn more about using flex fontshere.Finally, set the font family using theBRANDING_FONT_FAMILYvariable:BRANDING_FONT_FAMILY: Roboto FlexDownloading imagesCMS and LMS images can be included as long as they can be accessed through a HTTP(S) request.
Most important images are:LMS:favicon.icologo.pngCMS:studio-logo.pngA banner can also be added to the homepage.E.g., to add custom logos and banner set the following:BRANDING_LMS_IMAGES:
- filename: banner.png
  url: https://url/to/banner.png
- filename: favicon.ico
  url: https://url/to/favicon.ico
- filename: logo.png
  url: https://url/to/logo.png
BRANDING_CMS_IMAGES:
- filename: studio-logo.png
  url: https://url/to/studio-logo.png
BRANDING_HOMEPAGE_BG_IMAGE: banner.pngThen runtutor branding download-imagesCustom HTML block in home pageYou can add a custom HTML code to be rendered in the home page after the banner
and before the list of courses by settingBRANDING_INDEX_ADDITIONAL_HTML.Customize HTML certificateBy settingBRANDING_CERTIFICATE_HTMLyou can override the standard certificate with
your own HTML code.Tip: Create a file with the HTML code (e.g.,branding_certificate_html.html)
and then update the configuration from the file.tutor config save --set BRANDING_CERTIFICATE_HTML="$(cat branding_certificate_html.html)"Customizing static pagesYou can set your own HTML content to the typical static pages by setting the corresponding
variable:BRANDING_STATIC_TEMPLATE_404BRANDING_STATIC_TEMPLATE_429BRANDING_STATIC_TEMPLATE_ABOUTBRANDING_STATIC_TEMPLATE_BLOGBRANDING_STATIC_TEMPLATE_CONTACTBRANDING_STATIC_TEMPLATE_DONATEBRANDING_STATIC_TEMPLATE_EMBARGOBRANDING_STATIC_TEMPLATE_FAQBRANDING_STATIC_TEMPLATE_HELPBRANDING_STATIC_TEMPLATE_HONORBRANDING_STATIC_TEMPLATE_JOBSBRANDING_STATIC_TEMPLATE_MEDIA_KITBRANDING_STATIC_TEMPLATE_NEWSBRANDING_STATIC_TEMPLATE_PRESSBRANDING_STATIC_TEMPLATE_PRIVACYBRANDING_STATIC_TEMPLATE_SERVER_DOWNBRANDING_STATIC_TEMPLATE_SERVER_ERRORBRANDING_STATIC_TEMPLATE_SERVER_OVERLOADEDBRANDING_STATIC_TEMPLATE_SITEMAPBRANDING_STATIC_TEMPLATE_TOSCustomizing MFE header and footerTo use a custom header or footer, clonefrontend-component-headerand/orfrontend-component-footer,
push to your custom repository and set the repository URL in the variables:BRANDING_FRONTEND_COMPONENT_HEADER_REPOBRANDING_FRONTEND_COMPONENT_FOOTER_REPOUsagetutor plugins enable branding
tutor branding download-images
tutor branding download-fonts
tutor images build openedx
tutor images build mfe
tutor local settheme themeIn K8s deployments, you will need to push the docker images and restart Tutor.LicenseThis software is licensed under the terms of the AGPLv3.