This skeleton theme is used to customize the themes of Open edX instances using the simple-theme
role from the edx/configuration
repository.
Below is the list of available SASS variables for customization. Check lms/static/sass/theme-overrides.scss
for the details of what these variables are used for and as the authoritative source for the list of variables.
- $link-color
- $header-bg
- $customize-header-border (boolean). If defined, requires all the following variables to be set.
- $header-border-top-width
- $header-border-top-color
- $header-border-bottom-width
- $header-border-bottom-color
- $customize-footer-border (boolean). If defined, requires all the following variables to be set.
- $footer-border-top-width
- $footer-border-top-color
- $footer-border-bottom-width
- $footer-border-bottom-color
- $btn-primary-bg
- $btn-primary-color
- $btn-primary-border-color
- $btn-primary-hover-bg
- $btn-primary-hover-color
- $btn-primary-hover-border-color
- $btn-secondary-bg
- $btn-secondary-color
- $btn-secondary-border-color
- $btn-secondary-hover-bg
- $btn-secondary-hover-color
- $btn-secondary-hover-border-color
- $main-nav-color
- $main-nav-link-color
- $main-nav-item-border-bottom-color
- $main-nav-item-hover-border-bottom-color
- $user-dropdown-color
- $customize-sign-in-btn. If defined, requires all the following variables to be set.
- $btn-sign-in-bg
- $btn-sign-in-color
- $btn-sign-in-border-color
- $btn-sign-in-hover-bg
- $btn-sign-in-hover-color
- $btn-sign-in-hover-border-color
- $customize-register-btn. If defined, requires all the following variables to be set.
- $btn-register-bg
- $btn-register-color
- $btn-register-border-color
- $btn-register-hover-bg
- $btn-register-hover-color
- $btn-register-hover-border-color
- $customize-logistration-action-btn. If defined, requires all the following variables to be set.
- $btn-logistration-bg
- $btn-logistration-color
- $btn-logistration-border-color
- $btn-logistration-hover-bg
- $btn-logistration-hover-color
- $btn-logistration-hover-border-color
- $login-register-header-color
- $accent-color
- $home-page-hero-title-color
- $home-page-hero-subtitle-color
- $wrapper-preview-menu-color
- $main-color
- $course-nav-menu-color
- $course-nav-menu-border-bottom-color
- $account-settings-nav-border-bottom-color
- $account-settings-nav-border-bottom-color
- $footer-bg
- $footer-color
- $footer-link-color
Of these variables,
- $main-color
- $link-color
- $header-bg
- $footer-bg
- $btn-primary-bg
- $btn-primary-color
- $btn-primary-border-color
- $btn-primary-hover-bg
- $btn-primary-hover-color
- $btn-primary-hover-border-color
- $btn-secondary-bg
- $btn-secondary-color
- $btn-secondary-border-color
- $btn-secondary-hover-bg
- $btn-secondary-hover-color
- $btn-secondary-hover-border-color
are required. All the other variables are optional.
To use on the devstack, you need to create lms/static/sass/common-variables.scss
with the above
variables, and the file lms/static/sass/_lms-overrides.scss
that imports these variables using
@import 'common-variables';
and contains any other edx-platform-specific scss overrides.
You can then install and use it as a regular theme. Run make dev.static.lms
to make
sure that the latest changes are picked up.
This can also be used as a branding package for MFEs.
To do so install this package as an override to @edx/brand
. Any variables specified in
lms/static/sass/common-variables.scss
will be picked up by the MFE as well.
If you're using edx/configuration
for deployment, you can also have this theme applied to MFEs by
adding it as an npm override from the location where it's already installed. You can do so by adding
the following ansible config:
MFE_DEPLOY_NPM_OVERRIDES:
- "@edx/brand@file:/edx/var/edxapp/themes/simple-theme/"