Responsive design and custom Open edX platform theming by Raccoon Gang
Stanford Theming (standard Open edX approach to custom theme design and implementation before the Eucalyptus release) was cumbersome, as it required overriding standard HTML and SASS settings with custom ones. This was not easy as Open edX frontend logics is quite complex. Thus said, branding the Open edX platform static pages like "Terms of Service" or "About us" according to customer’s style could have been quite a task. Luckily, this changed with Eucalyptus release, which introduced comprehensive theming model.
Why comprehensive theming is better than Stanford theming
Comprehensive Open edX theming uses a totally different approach to theme development. The theme templates can be located anywhere, even outside of the platform directory, as long as it mirrors the default theme directory contents. The only actions needed to override the default theme settings are placing the new assets like images in the correct locations of custom theme folder and adding the new rules and settings to standard SASS files. As of now, there is quite a large list of variables from fonts and colors to backgrounds and HTML templates that can be replaced with custom ones to create visually stunning and highly brandable custom Open edX themes.
Another challenge arises, however. Themes should be responsive in order to provide smooth user experience both from desktop and mobile devices.This requires another layer of styling, adding to the theme complexity. Luckily enough, comprehensive theming provides the tools to address this issue.
Raccoon Gang comprehensive themes with responsive design and deployment script
We created several custom themes and a script allowing reconfiguring the theme in several clicks. How does it work?
- With one click you select the theme you like and download it
- Launch the script in the downloaded folder
That’s it, the theme is installed!
The script takes the code descriptions of the colors, fonts, sizes and other design parameters and replaces them with the new ones across all of the settings, which leads to rapid update of all elements involved across the whole theme, instead of updating them one by one for each separate page. This is all done behind the scenes and you don’t need to worry about a thing!
In addition, as most of our customers order responsive theming, we have ample expertise with rewriting standard Mako templates and adding custom styling that ensures responsiveness.
Raccoon Gang delivers highly customizable and responsive Open edX theming that is easily installed and configured using our script. We had also compiled our own library of most common issues, which helps us correct and improve customer’s custom themes quickly and easily. Should you need any of these services – we are always glad to help!
Related Open edX Articles: