Request a Demo
Responsive design and custom Open edX theming

Responsive design and custom Open edX platform theming by Raccoon Gang

Vast majority of Open edX-deploying companies prefer the platform to be branded according to their own style. This requires custom Open edX theming and this is the service we provide for almost every customer. However, as the website can be accessed both from desktop and mobile devices, responsive design becomes essential. Here is how we do it at Raccoon Gang.

Table of Contents
Member of the Board, Raccoon Gang

Sergiy has 18 years of experience in eLearning and management. Creating educational programs, career paths, online and offline courses he is making the educational world better as a co-founder of RG.

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? 

  1. With one click you select the theme you like and download it
  2. 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:

Open edX: What Is It And Why 19 Million People Use It?

Open edX LMS features for blended learning 

Custom Open edX Platform Design for NTNU 

Back to Materials
Rate this article!
2 ratings, average 5.0 out of 5
Follow us on social media

Recommended Articles:

  • 467 09/12/2020
  • 393 19/01/2021
Table of Contents
Schedule a Demo Schedule a Demo

We use cookies to personalise content and ads, to ensure we're delivering the best possible website experience for our visitors. You consent to our cookies if you continue to use our website.
Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy 

Accept
Please proceed to the next page for the most convenient date and time for a demo What do we mean by «demo»? How long would the demo take?
Request demo