edx comprehensive theming tutorial
TRANSCRIPT
![Page 1: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/1.jpg)
Mike Bifulco
Open edX Conference 2016
TUTORIAL
THEME CUSTOMIZATION USING EDX’S NEW COMPREHENSIVE THEMING
![Page 2: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/2.jpg)
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.
![Page 3: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/3.jpg)
Advanced Rapid Prototyping with Axure
DON’T FORGET THE SHAMELESS PLUGlivecoding.tv/mbifulco
![Page 4: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/4.jpg)
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
![Page 5: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/5.jpg)
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
![Page 6: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/6.jpg)
WRITE THESE THINGS DOWN
RESOURCES FOR HELP
![Page 7: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/7.jpg)
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
![Page 8: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/8.jpg)
BUT FIRST
What the heck is theming?
![Page 9: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/9.jpg)
IT ALL STARTED WITH STANFORD.
![Page 10: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/10.jpg)
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:
![Page 11: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/11.jpg)
Stanford theming
![Page 12: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/12.jpg)
THEN THINGS GOT A BIT COMPLICATED
![Page 13: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/13.jpg)
COMPREHENSIVE THEMING
![Page 14: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/14.jpg)
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:
![Page 15: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/15.jpg)
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 Comprehensive1. 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
![Page 16: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/16.jpg)
![Page 17: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/17.jpg)
I PROMISE THIS IS A GOOD THING
![Page 18: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/18.jpg)
THERE ARE SOME DIFFERENCES
![Page 19: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/19.jpg)
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
![Page 20: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/20.jpg)
SO, HOW DOES IT WORK?
![Page 21: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/21.jpg)
![Page 22: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/22.jpg)
LET’S DO THE THING
Setting up devstack for theming
![Page 23: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/23.jpg)
![Page 24: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/24.jpg)
THEME AT YOUR OWN RISK
![Page 25: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/25.jpg)
![Page 26: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/26.jpg)
![Page 27: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/27.jpg)
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
![Page 28: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/28.jpg)
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
![Page 29: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/29.jpg)
![Page 30: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/30.jpg)
![Page 31: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/31.jpg)
![Page 32: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/32.jpg)
![Page 33: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/33.jpg)
![Page 34: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/34.jpg)
1. edxapp@: • paver update_assets lms --settings=devstack • paver devstack lms • paver devstack lms --fast
2. vagrant@: • sudo rm -rf /tmp/*
Useful Commands
![Page 35: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/35.jpg)
![Page 36: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/36.jpg)
https://github.com/edx/edx-platform/pull/12620
THERE ARE MORE CHANGES COMING
edx-platform PR #12620 WL-416: Multi-site comprehensive theming
![Page 37: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/37.jpg)
THAT’S ABOUT IT
Any questions?
![Page 38: EdX Comprehensive Theming Tutorial](https://reader034.vdocuments.mx/reader034/viewer/2022050614/58ec922f1a28ab086c8b46ab/html5/thumbnails/38.jpg)
IT’S DEMO TIME