From Open EdX conference, Stanford University

1. Mike Bifulco
Open edX Conference 2016
TUTORIAL
THEME CUSTOMIZATION USING EDX’S
NEW COMPREHENSIVE THEMING

2. I’m Mike.
I build www.thgymnasium.com.
Not an OpenEdX expert (but dangerous).
Not a python expert (yet).
Completely normal amounts of self-esteem.
Hello.

3. Advanced Rapid Prototyping with Axure
DON’T FORGET THE
SHAMELESS PLUG
livecoding.tv/mbifulco

4. 1. Open edX
2. Devstack on vagrant
3. Dogwood.3
4. We are all on the same team
5. You are smarter than me
Assumptions For This Session

5. 1. State of the Union (as I see it)
2. Talk a bit about theming on Open edX
• Stanford theming
• Comprehensive theming
3. Commiserate
4. Experiment
What We’ll Do Today

6. WRITE THESE THINGS DOWN
RESOURCES FOR HELP

7. 1. #theming (http://bitly.com/openedx)
2. Edx-code Google Group (groups.google.com/forum/#!forum/edx-code)
3. Readthedocs (edx.readthedocs.io)
4. https://openedx.atlassian.net/wiki/display/SOL/Comprehensive+Theming
5. edX on GitHub (http://github.com/edx/edx-platform/)
6. edX Pattern Library (http://ux.edx.org )
Where To Go When You Need Help

8. BUT FIRST
What the heck is theming?

9. IT ALL STARTED
WITH STANFORD.

10. 1. Searches your theme directory for matching template files
2. Renders your templates instead of defaults in /[theme]/templates/* if they
exist
3. Combines your custom SASS with existing SASS
What It Does:

11. Stanford theming

12. THEN THINGS GOT
A BIT
COMPLICATED

13. COMPREHENSIVE
THEMING

14. 1. Searches your theme directory for matching template files
2. Renders your templates instead of defaults in /[theme]/lms/templates/* if they
exist
3. Combines your custom SASS with existing SASS
What It Does:

15. 1. Searches your theme directory for
matching template files
2. Renders your templates instead of
defaults in /[theme]/templates/* if
they exist
3. Combines your custom SASS with
existing SASS
Stanford Comprehensive
1. Searches your theme directory for
matching template files
2. Renders your templates instead of
defaults in /[theme]/lms/
templates/* if they exist
3. Combines your custom SASS with
existing SASS

17. I PROMISE
THIS IS A GOOD
THING

18. THERE ARE SOME
DIFFERENCES

19. 1. Directory structure is slightly changed
2. Relative paths are interpreted differently
3. SASS story slightly changed
4. Comprehensive theming enabled through different feature flags
Differences

20. SO, HOW DOES IT WORK?

22. LET’S DO THE THING
Setting up devstack for theming

24. THEME AT YOUR
OWN RISK

27. This part of the slide is merely a distraction
1. Stand up devstack
2. Clone [or create] your theme repo
3. Configure devstack to point to your theme
4. Run devstack, debug, slam fists on keyboard, etc.
5. $$$
Steps To Have Had Themed Comprehensively

28. Stand up Devstack
curl -L https://raw.githubusercontent.com/edx/configuration/master/vagrant/release/
devstack/Vagrantfile > Vagrantfile
vagrant plugin install vagrant-vbguest
vagrant up
vagrant ssh

34. 1. edxapp@:
• paver update_assets lms --settings=devstack
• paver devstack lms
• paver devstack lms --fast
2. vagrant@:
• sudo rm -rf /tmp/*
Useful Commands

36. https://github.com/edx/edx-platform/pull/12620
THERE ARE MORE CHANGES COMING
edx-platform PR #12620
WL-416: Multi-site comprehensive theming

37. THAT’S ABOUT IT
Any questions?

38. IT’S
DEMO TIME