Open edX: Custom Theme
25 Sep 2014

Theming

See here: https://github.com/edx/edx-platform/wiki/Developing-on-the-edX-Developer-Stack#configuring-themes-in-devstack

When you go to rename the .scss file, leave the leading underscore in place or you’ll get:

error /edx/app/edxapp/themes/usbs/static/sass/example.scss (Line 47: Undefined variable: "$sans-serif".)

i.e. rename it to _example.scss, not example.scss.

I also had issues if the LMS was running at the same time I was trying to update (Line 47: Undefined variable: "$sans-serif".). Things worked much better if I shut it down first.

To run the custom them, you need to start the LMS with

paver devstack lms

This will recompile everything at startup. The easiest way I’ve found to do theme development is to just Ctrl-C the paver process and restart it when I change something.

Then, to deploy the theme on your production server:

TODO

/edx/bin/supervisorctl -c /edx/etc/supervisord.conf restart edxapp:
# Note the colon at the end!

Deploying themes

The default reference is at [https://github.com/edx/edx-platform/wiki/Custom-Theming]. It mostly worked, but I had issues with the SSH key; /edx/app/edxapp/tmp_id_rsa was being zeroed.

I could not find any reference to EDXAPP_LOCAL_GIT_IDENTITY in the edX code. The relevant Ansible playbook uses the content directive, so… I guess we put the private key directly in server-vars.yml. Don’t do this for a key with read-write access to anything!

Here’s my working server-vars.yml that worked, sans key. Note the indentation before the contents of the key.

edxapp_use_custom_theme: true
edxapp_theme_name: 'themename'
edxapp_theme_source_repo: 'git@bitbucket.org:username/themename-edx-theme.git'
edxapp_theme_version: 'HEAD'
edxapp_git_identity: '/edx/app/edxapp/tmp_id_rsa'
EDXAPP_GIT_IDENTITY: |
  -----BEGIN RSA PRIVATE KEY-----
  MII...
  ...
  ...Wg
  -----END RSA PRIVATE KEY-----
EDXAPP_USE_GIT_IDENTITY: true

comments powered by Disqus