# Open edX theming improvements and simplification **URL:** \ **Category:** Collaborative Proposals\ **Created:** [September 9, 2019, 2:49pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461 "2019-09-09T14:49:47Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\ **Post date:** [September 9, 2019, 2:49pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/1 "2019-09-09T14:49:47Z")
Hi everyone, I’m Giovanni from OpenCraft. We faced many issues in the past when dealing with theming Open edX instances, specially because there are so many theming systems and not all of them work in the same way or are very consistent. To deal with that, we built a simple theme that fixes most inconsistencies on the platform and adds a few variables to allow easy customization and offer a more streamlined experience for new users that is easy to customize and offers a good amount of customizations. We think that these improvements might help the community and offer an easy way to customize the platform without requiring much HTML/CSS/SASS knowledge to operate. **Now for the technical bits:** We built this theme around the Comprehensive theming system, that allows a more direct customization to the platform’s files. Using the same CSS selectors that exist on the platform, we have created a common, base SASS file with all the styles with additional variables that allow us to customize things as we need. These styles we have created are an exact copy-paste in almost all the cases - we use the same selector and CSS property and just use a variable there to easily override colors. The idea is to be able to customize colors in various common parts of the interface easily using specific SASS variables instead of having to write custom SASS which works across two types of styling. We did that for our simple theme, but we want to incorporate those changes into the platform while the microfrontends and officially supported theming system lands. We wish to have these variables merged upstream and use the configuration role linked below to pass the variables to the platform. **edX:** Can you take a look at the PR’s and give feed back on the changes? What to we need to change to land this? **Community:** What do you think of this idea? Here are the links to the theme and role pull requests: - [Simple theme branch](https://github.com/open-craft/edx-simple-theme/pull/2) - [Upstream configuration PR](https://github.com/edx/configuration/pull/5281) And here is an internal discovery that we did to implement this change: > **[Upstreamable simple theme public](https://docs.google.com/document/d/1os7_jP2tgxzr3hCmETq7PUykQM1ubLn_TXohneKTE6Q/edit?usp=sharing)** > > Technical Discovery & ScopingUpstreamable instance theming Prepared by OpenCraft August 19th, 2019. Background The current Open edX platform theming has a lot of issues and it’s hard to customize. The goal of this discovery is... ---
**Author:** ![regis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/regis/32/2640_2.png) [@regis](https://discuss.openedx.org/u/regis)\ **Post date:** [September 10, 2019, 11:14am UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/2 "2019-09-10T11:14:49Z")
@giovannicimolin This is interesting, could you please post a few screenshots of the theme in action? ---
**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\ **Post date:** [September 10, 2019, 2:09pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/3 "2019-09-10T14:09:48Z")
@regis Sure! I’ll spawn a sandbox with some theming options and ad a few screenshots to the post before the end of the week. ---
**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\ **Post date:** [September 20, 2019, 8:20pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/4 "2019-09-20T20:20:51Z")
@regis Sorry for the delay. Here are a two samples of the theme: - Sample 1: ![sample-2-course](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/1X/252ce78abe7520b63a4bee631dffa38efd68084b.png) ![sample-2](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/1X/1febe132bd075a1001f63da8e178860c1848fe2a.png) - Sample 2: ![sample-1-course](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/1X/45ceeea311865fcdedf5a6ff2597b8be0a8b309a.png) ![sample-1](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/1X/7aa908085d00acba9889ffbf5f3901181cd89c1d.png) I might not have picked the best colors, but the screenshots show what can be done using the theme. In addition to foot and header colors, it’s also possible to: - Add a border with a different color on header and footer (see `customize-header-border` and `customize-footer-border` on [the repo](https://github.com/open-craft/edx-simple-theme/tree/guruprasad/wip-high-level-theme)) - Configure the homepage hero - Individually pick colors for buttons on header, footer, login and courseware pages - Set different link and text colors for header and footer Inconsistencies between pages themed using bootstrap and other technologies are mostly fixed. The aim for the repo is to have the right balance of customization and ease of configuration. We want to merge these improvements upstream to help the community until the microfrontends and supported theming system are released. If you want to check other pages, [here is the link to test instance](https://high-level-simple-theme.stage.opencraft.hosting/) (beware of ssl certificate issue). The usual test users work `staff`, `honor`, `verified`, etc. ---
**Author:** ![regis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/regis/32/2640_2.png) [@regis](https://discuss.openedx.org/u/regis)\ **Post date:** [September 23, 2019, 7:42am UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/5 "2019-09-23T07:42:54Z")
Hey @giovannicimolin! I like what I am seeing. In particular, I like the fact that you managed to customise the appearance through the use of SASS variables. I wonder if you have given any thought to the customisation of template content? Just to pick the most obvious example, most users will want to change the “It works! Powered by Open edX©” line. I have worked on this in my own custom theme branch, but I have not found a satisfactory solution, yet. ---
**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\ **Post date:** [September 24, 2019, 12:34pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/6 "2019-09-24T12:34:39Z")
@regis We’re still working on a solution to that. Static pages such as TOS and privacy policy can be overwritten using SiteConfiguration (via [this method](https://github.com/edx/edx-platform/blob/c20c770eb076a90abfbf475ac1ea7989d7881a8d/lms/djangoapps/static_template_view/views.py#L59)). But not all elements are customizable yet. ---
**Author:** ![regis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/regis/32/2640_2.png) [@regis](https://discuss.openedx.org/u/regis)\ **Post date:** [September 24, 2019, 7:50pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/7 "2019-09-24T19:50:21Z")
Please post your ideas here if you find a way to include customizable, translatable text elements inside a template 🙂 ---
**Author:** ![nedbat](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nedbat/32/3317_2.png) [@nedbat](https://discuss.openedx.org/u/nedbat)\ **Post date:** [October 8, 2019, 12:17pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/8 "2019-10-08T12:17:41Z")
I should have mentioned this earlier: we’ll have a quick demo of this theming at today’s community hangout: [https://openedx.atlassian.net/wiki/spaces/COMM/pages/1056964932/October+8+2019](https://openedx.atlassian.net/wiki/spaces/COMM/pages/1056964932/October+8+2019) ---
**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\ **Post date:** [October 8, 2019, 5:50pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/9 "2019-10-08T17:50:11Z")
Here is the link to the presentation from the Community Hangout: > **[Simple theme](https://docs.google.com/presentation/d/10laI_9yjlnsH_B4IB5rsB7lXbPnigMvmKHVZYTYqj74/edit?usp=sharing)** > > Giovanni Cimolin giovanni@opencraft.com Guruprasad Lakshmi Narayanan guruprasad@opencraft.com Open edX Theming Improvements ---
**Author:** ![regis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/regis/32/2640_2.png) [@regis](https://discuss.openedx.org/u/regis)\ **Post date:** [October 8, 2019, 8:27pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/10 "2019-10-08T20:27:53Z")
Too bad I missed the hangout! I didn’t catch the date change, but I’ll be sure the watch the video. ---
**Author:** ![djoy](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/djoy/32/542_2.png) [@djoy](https://discuss.openedx.org/u/djoy)\ **Post date:** [January 28, 2020, 4:14pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/11 "2020-01-28T16:14:02Z")
Hi all, Just to give it a signal boost, I added some comments to the PR over in GitHub: [https://github.com/edx/edx-platform/pull/22543](https://github.com/edx/edx-platform/pull/22543). ---
**Author:** ![antoviaque](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/antoviaque/32/32_2.png) [@antoviaque](https://discuss.openedx.org/u/antoviaque)\ **Post date:** [January 29, 2020, 10:38am UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/12 "2020-01-29T10:38:03Z")
@djoy Thank you for the pass of comments! CC @giovannicimolin @guruprasad who will want to chip in on the points you have brought up on the PR. ---
**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\ **Post date:** [January 29, 2020, 6:40pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/13 "2020-01-29T18:40:00Z")
> [@djoy](#): > > Just to give it a signal boost, I added some comments to the PR over in GitHub: [https://github.com/edx/edx-platform/pull/22543](https://github.com/edx/edx-platform/pull/22543). @djoy, thanks for the review and providing a lot of details on what’s being worked on and what’s in store for the future! 🙂 I have replied on the PR with some concerns and questions. ---
**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\ **Post date:** [July 13, 2020, 7:11am UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/14 "2020-07-13T07:11:43Z")
@abutterworth, (CC @marcotuts) in the discussion on our PR for this - [https://github.com/edx/edx-platform/pull/22543](https://github.com/edx/edx-platform/pull/22543), you had mentioned that the removal of the pattern library from the platform was scheduled to be done and that eduNEXT will be working on it. The community page for this project, [https://openedx.atlassian.net/wiki/spaces/COMM/pages/1564672304/BD-10+Pattern+Library+v1+Deprecation](https://openedx.atlassian.net/wiki/spaces/COMM/pages/1564672304/BD-10+Pattern+Library+v1+Deprecation), has some details but has nothing about the timelines or the expected completion dates. We, at OpenCraft, are very much interested in the platform theming story (uniformly theming the platform across various theming and frontend systems) and would like to know if you or @Felipe have any details that you can share regarding the timelines for this work. ---
**Author:** ![Felipe](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/felipe/32/60_2.png) [@Felipe](https://discuss.openedx.org/u/Felipe)\ **Post date:** [July 13, 2020, 3:39pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/15 "2020-07-13T15:39:04Z")
Hey @guruprasad, the work to remoe the pattern-library is underway and progressing very nicely. Those community pages have been created just recently so they still don’t have much info in them. You can see the Jira Epic here: [https://openedx.atlassian.net/browse/DEPR-62](https://openedx.atlassian.net/browse/DEPR-62). ---
**Author:** ![Felipe](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/felipe/32/60_2.png) [@Felipe](https://discuss.openedx.org/u/Felipe)\ **Post date:** [July 13, 2020, 3:54pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/16 "2020-07-13T15:54:59Z")
I circled back with the main dev on this and some of the statutes have not been changed (we don’t have access to that), but you will find comments in each of them stating the current situation. ---
**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\ **Post date:** [July 22, 2020, 8:56pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/17 "2020-07-22T20:56:28Z")
@Felipe, thanks for the update and the link to the Jira epic. I am very happy and glad to see that the work is progressing very nicely 😃 ---
**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\ **Post date:** [August 24, 2020, 12:06pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/18 "2020-08-24T12:06:51Z")
@djoy, @nimisha, do we have a plan/roadmap for (comprehensively) theming the MFEs? If yes, can you share some details, references so that we can follow the progress? If no, when would be a good time and where would be a good place to start a conversation on this? CC @braden @xitij2000, @antoviaque ---
**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\ **Post date:** [September 7, 2020, 12:55pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/19 "2020-09-07T12:55:27Z")
@djoy, @nimisha, ping! Did you get a chance to check my question out? ---
**Author:** ![nimisha](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nimisha/32/1511_2.png) [@nimisha](https://discuss.openedx.org/u/nimisha)\ **Post date:** [September 7, 2020, 1:42pm UTC](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461/20 "2020-09-07T13:42:54Z")
@guruprasad Thank you for pinging again. As an update: - **completed Pattern Library deprecation:** @abutterworth and @Felipe’s team have completed the effort on removing Pattern Library (per [DEPR-62](https://openedx.atlassian.net/browse/DEPR-62)). - **starting Bootstrap upgrade:** They are now planning to upgrade the alpha version of Bootstrap to the latest major version (4.5.x). - **update on Theming proposal:** @abutterworth will soon post an update on his latest thoughts on MFE theming - given recent efforts and in-preparation for edX’s own rebranding efforts. [Next page](https://discuss.openedx.org/t/open-edx-theming-improvements-and-simplification/461.md?page=2)