Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
#####################
Comprehensive Theming
#####################
Comprehensive Theming lets you customize the appearance of your Open edX
installation. You can override Sass and CSS settings, images, or entire HTML
templates.
Eventually, Comprehensive Theming will obsolete existing theming mechanisms,
but for now they co-exist peacefully. This document describes how to use
Comprehensive Theming, and also the changes you'll need to make to keep other
theming mechanisms working.
Creating a theme
================
A theme is a directory of assets. You can create this directory wherever you
like, it does not have to be inside the edx-platform directory. The structure
within this directory mirrors the assets in the edx-platform repo itself.
Files you provide in your theme are used in place of the same-named files in
edx-platform. Here's a sample::
my-theme
└── lms
├── static
│ ├── images
│ │ └── logo.png
│ └── sass
│ ├── _overrides.scss
│ ├── lms-main-rtl.scss
│ └── lms-main.scss
└── templates
├── footer.html
└── header.html
The top directory is named whatever you like. This example uses "my-theme".
The files provided here override the files in edx-platform. In this case, the
``my-theme/lms/static/sass/lms-main.scss`` file is used in place of the
``edx-platform/lms/static/lms-main.scss`` file.
Images
------
Images can be substituted simply by placing the new image at the right place
in the theme directory. In our example above, the lms/static/images/logo.png
image is overridden.
Sass/CSS
--------
Most CSS styling in Open edX is done with Sass files compiled to CSS. You can
override individual settings by creating a new Sass file that uses the existing
file, and overrides the few settings you want.
For example, to change the fonts used throughout the site, you can create an
``lms/static/sass/_overrides.scss`` file with the change you want::
$sans-serif: 'Helvetica';
The variables that can currently be overridden are defined in
``lms/static/sass/base/_variables.scss``.
**Note:** We are currently in the middle of a re-engineering of the Sass
variables. They will change in the future. If you are interested, you can see
the new development in the `edX Pattern Library`__.
.. __: http://ux.edx.org/
Then create ``lms/static/sass/lms-main.scss`` to use those overrides, and also
the rest of the definitions from the original file::
// Our overrides for settings we want to change.
@import 'overrides';
// Import the original styles from edx-platform.
@import 'lms/static/sass/lms-main';
Do this for each .scss file your site needs.
HTML Templates
--------------
You can make changes to HTML templates by copying them to your theme directory
in the appropriate place, and making the changes you need. Keep in mind that
in the future if you upgrade the Open edX code, you may have to update the
copied template in your theme also.
Installing your theme
---------------------
To use your theme, follow these steps:
#. Edit /edx/app/edx_ansible/server-vars.yml to add the edxapp_comp_theme_dir
value::
edxapp_comp_theme_dir: '/full/path/to/my-theme'
#. Re-run the provisioning script::
$ sudo /edx/bin/update edx-platform HEAD
Your changes should now be visible on your site.
"Stanford" theming
==================
If you want to continue using the "Stanford" theming system, there are a few
changes you'll need to make.
Create the following new files in the ``sass`` directory of your theme:
* lms-main.scss
* lms-main-rtl.scss
* lms-course.scss
* lms-course-rtl.scss
* lms-footer.scss
* lms-footer-rtl.scss
The contents of each of these files will be very similar. Here's what
``lms-main.scss`` should look like::
$static-path: '../../../..';
@import 'lms/static/sass/lms-main';
@import '_default';
Each file should set the ``$static-path`` variable to a relative path that
points to the ``lms/static`` directory inside of ``edx-platform``. Then,
it should ``@import`` the sass file under ``lms/static/sass`` that matches
its name: ``lms-footer.scss`` should import ``lms/static/sass/lms-footer``,
for example. Finally, the file should import the ``_default`` name, which
refers to the ``_default.scss`` Sass file that should already exist in your
Stanford theme directory.
If your theme uses a different name than "default", you'll need to use that
name in the ``@import`` line.
Run the ``update_assets`` command to recompile the theme::
$ paver update_assets lms --settings=aws