Difference between revisions of "Customizing WeBWorK"

From WeBWorK_wiki
Jump to navigation Jump to search
(→‎Introduction: - add link to blog post with modern approach and not on contents being out of date)
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:UnderConstruction}}
 
  +
  +
== Warning - page out of date ==
  +
  +
'''Most of this page is out of date.''' See [http://webworkgoehle.blogspot.com/2014/07/customizing-colors.html Geoff Goehle's blog post] on more recent methods to customize themes.
  +
 
== Introduction ==
 
== Introduction ==
  +
  +
----
   
 
The basic look and feel of the WeBWorK user interface is highly customizable, and can be easily changed by users. Currently, WeBWorK ships with four themes (or skins) to choose from: ur, math, math2 and moodle; however, users with with knowledge of CSS and basic HTML may define their own themes for use in their courses.
 
The basic look and feel of the WeBWorK user interface is highly customizable, and can be easily changed by users. Currently, WeBWorK ships with four themes (or skins) to choose from: ur, math, math2 and moodle; however, users with with knowledge of CSS and basic HTML may define their own themes for use in their courses.
Line 17: Line 23:
 
Changing the theme in this manner only changes the theme for the course you are logged into. If you would like to set a new default theme for all courses created on your WeBWorK server, then change the value of the <code>$defaultTheme</code> variable in <tt>global.conf</tt>. In new installations of WeBWorK, that variable is set as
 
Changing the theme in this manner only changes the theme for the course you are logged into. If you would like to set a new default theme for all courses created on your WeBWorK server, then change the value of the <code>$defaultTheme</code> variable in <tt>global.conf</tt>. In new installations of WeBWorK, that variable is set as
 
$defaultTheme = "math";
 
$defaultTheme = "math";
And changing it to "math2", "ur", "moodle" or "union" would apply the corresponding theme to every current course on your server and to all courses created in the future. Of course, even if the <code>$defaultTheme</tt> is changed in <tt>global.conf</tt>, individual instructors can still override that setting as described above.
+
And changing it to "math2", "ur", "moodle" or "union" would apply the corresponding theme to every current course on your server and to all courses created in the future. Of course, even if the <code>$defaultTheme</code> is changed in <tt>global.conf</tt>, individual instructors can still override that setting as described above.
   
 
== Creating and installing your own theme ==
 
== Creating and installing your own theme ==
Line 28: Line 34:
 
To get started, it is probably best to simply copy the <tt>math</tt> theme under the new name and change it incrementally. To do so, change directories to <tt>/webwork2/conf/templates</tt> and do
 
To get started, it is probably best to simply copy the <tt>math</tt> theme under the new name and change it incrementally. To do so, change directories to <tt>/webwork2/conf/templates</tt> and do
 
cp -r math my_theme
 
cp -r math my_theme
Insde the <tt>my_theme</tt> directory are the files <tt>system.template</tt> and <tt>gateway.template</tt>. Edit both of those files to change the line
+
Inside the <tt>my_theme</tt> directory are the files <tt>system.template</tt> and <tt>gateway.template</tt>. Edit '''both''' of those files to change the line
<code>
+
<link rel="stylesheet" type="text/css" href="<!--#url type="webwork" name="htdocs"-->/css/math.css"/>
+
<nowiki><link rel="stylesheet" type="text/css" href="<!--#url type="webwork" name="htdocs"-->/css/math.css"/></nowiki>
</code>
+
to refer to the <tt>my_theme.css</tt> file we will create next.
+
so that the <tt>href</tt> attribute reads
<code>
+
<nowiki>href="<!--#url type="webwork" name="htdocs"-->/css/my_theme.css"</nowiki>
<link rel="stylesheet" type="text/css" href="<!--#url type="webwork" name="htdocs"-->/css/my_theme.css"/>
+
</code>
+
Note the portion of those lines which says <nowiki><!--#url type="webwork" name="htdocs"--></nowiki>. This special comment style is used by WeBWorK's template system to provide dynamic content. Be sure not to alter ''that'' portion of the <tt>href</tt> attribute's value.
Now change directories to <tt>/webwork2/htdocs/css</tt> and do
+
  +
To put the new CSS file into use, change directories to <tt>/webwork2/htdocs/css</tt> and do
 
cp math.css my_theme.css
 
cp math.css my_theme.css
   
At this point, you have installed a new theme called <tt>my_theme</tt> into WeBWorK. To apply it to a single course, it can be selected and applied from the "Course Configuration" page along with the four provided themes. To apply it to every course on the server, simply set
+
At this point, you will have installed a new theme called <tt>my_theme</tt> into WeBWorK. To apply it to a single course, it can be selected and applied from the "Course Configuration" page along with the four provided themes. To apply it to every course on the server, simply set
<code>$defaultTheme = "my_theme"</code> in <tt>global.conf</tt>
+
<code>$defaultTheme = "my_theme"</code>
   
Now you can go about changing the look and feel of your WeBWorK courses by appropriately modifying the <tt>my_theme.css</tt> stylesheet and the templates under the <tt>/webwork2/conf/templates/my_template</tt> directory.
+
in <tt>global.conf</tt>. Now you can go about changing the look and feel of your WeBWorK courses by appropriately modifying the <tt>my_theme.css</tt> stylesheet and the templates under the <tt>/webwork2/conf/templates/my_template</tt> directory.
   
 
== See also ==
 
== See also ==
Line 51: Line 57:
   
 
* [http://www.w3schools.com/ Web development tutorials from w3schools.com]
 
* [http://www.w3schools.com/ Web development tutorials from w3schools.com]
  +
* [http://sixrevisions.com/web_design/colors-in-web-design-an-exploration/ Colors in Web Design: An Exploration]
   
 
[[Category:Installation]]
 
[[Category:Installation]]

Revision as of 15:21, 25 September 2019

Warning - page out of date

Most of this page is out of date. See Geoff Goehle's blog post on more recent methods to customize themes.

Introduction


The basic look and feel of the WeBWorK user interface is highly customizable, and can be easily changed by users. Currently, WeBWorK ships with four themes (or skins) to choose from: ur, math, math2 and moodle; however, users with with knowledge of CSS and basic HTML may define their own themes for use in their courses.

Changing to a different provided theme

Course Configuration page
Using the ur theme
Problem view with union theme

To change to one of the provided themes, log into a WeBWorK course as a professor and navigate to the "Course Configuration" page under "Instructor Tools." On that page you will be able to select one of the four installed themes: math, math2, ur, moodle, and union.

The math, math2, and moodle themes all look fairly similar. The ur and union themes are different from those and from each other.

After you select a new theme, you must click "Save Changes" for the change to be applied, and then refresh your browser to see the result.

Changing the theme in this manner only changes the theme for the course you are logged into. If you would like to set a new default theme for all courses created on your WeBWorK server, then change the value of the $defaultTheme variable in global.conf. In new installations of WeBWorK, that variable is set as

$defaultTheme = "math";

And changing it to "math2", "ur", "moodle" or "union" would apply the corresponding theme to every current course on your server and to all courses created in the future. Of course, even if the $defaultTheme is changed in global.conf, individual instructors can still override that setting as described above.

Creating and installing your own theme

Currently, to define a new theme in WeBWorK you must create three files which define that theme and put those files in the proper locations in the webwork2 directory hierarchy. To create a new theme called my_theme, you must do the following:

  • create a new directory webwork2/conf/templates/my_theme
  • in that directory, create files system.template and gateway.template.
  • create a new file called my_theme.css in the webwork2/htdocs/css directory

To get started, it is probably best to simply copy the math theme under the new name and change it incrementally. To do so, change directories to /webwork2/conf/templates and do

cp -r math my_theme

Inside the my_theme directory are the files system.template and gateway.template. Edit both of those files to change the line

<link rel="stylesheet" type="text/css" href="<!--#url type="webwork" name="htdocs"-->/css/math.css"/>

so that the href attribute reads

href="<!--#url type="webwork" name="htdocs"-->/css/my_theme.css"

Note the portion of those lines which says <!--#url type="webwork" name="htdocs"-->. This special comment style is used by WeBWorK's template system to provide dynamic content. Be sure not to alter that portion of the href attribute's value.

To put the new CSS file into use, change directories to /webwork2/htdocs/css and do

cp math.css my_theme.css

At this point, you will have installed a new theme called my_theme into WeBWorK. To apply it to a single course, it can be selected and applied from the "Course Configuration" page along with the four provided themes. To apply it to every course on the server, simply set

$defaultTheme = "my_theme" 

in global.conf. Now you can go about changing the look and feel of your WeBWorK courses by appropriately modifying the my_theme.css stylesheet and the templates under the /webwork2/conf/templates/my_template directory.

See also

External Links