edx comprehensive theming tutorial

Mike Bifulco

Open edX Conference 2016

TUTORIAL

THEME CUSTOMIZATION USING EDX’S NEW COMPREHENSIVE THEMING

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.

Advanced Rapid Prototyping with Axure

DON’T FORGET THE SHAMELESS PLUGlivecoding.tv/mbifulco

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

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

WRITE THESE THINGS DOWN

RESOURCES FOR HELP

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

BUT FIRST

What the heck is theming?

IT ALL STARTED WITH STANFORD.

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:

Stanford theming

THEN THINGS GOT A BIT COMPLICATED

COMPREHENSIVE THEMING

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:

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

I PROMISE THIS IS A GOOD THING

THERE ARE SOME DIFFERENCES

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

SO, HOW DOES IT WORK?

LET’S DO THE THING

Setting up devstack for theming

THEME AT YOUR OWN RISK

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

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

1. edxapp@: • paver update_assets lms --settings=devstack • paver devstack lms • paver devstack lms --fast

2. vagrant@: • sudo rm -rf /tmp/*

Useful Commands

https://github.com/edx/edx-platform/pull/12620

THERE ARE MORE CHANGES COMING

edx-platform PR #12620 WL-416: Multi-site comprehensive theming

THAT’S ABOUT IT

Any questions?

IT’S DEMO TIME