Customizing WeBWorK

Changing to a different provided theme

Course Configuration page

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." Currently, the options are: math4, math4-red and math4-green.

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 localOverrides.conf. In new installations of WeBWorK, that variable is set as $defaultTheme = "math4"; And changing it to "math4-red" or "math4-green" 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 localOverrides.conf, individual instructors can still override that setting as described above.

Customizing the theme up to version 2.16

For theming WeBWorK up to version 2.16 see Geoff Goehle's blog post on more recent methods to customize themes.

Customizing the theme for 2.17 and beyond

The current theming is quite different from before and is mainly based on only changing colors. Also, you need access to the server and the ability to copy/edit files on the server to create new themes.

1. Change directory to WEBWORK_HOME/htdocs/themes.
2. Copy either the math4 directory or one of the color directories.
3. Modify the _theme_colors.scss file, especially defining the $primary and $info variables. Note: these files are written in SCSS, which provides basic styling like CSS files, but with much more power.
4. Change the theme in the Course Configuration section of the course in WeBWorK.

---

Here's an example to build a purple theme.

1. cd $WEBWORK_HOME/htdocs/theme
2. cp -r math4 math4-purple
3. cd math4-purple
4. Use your favorite editor (vim, nano) to open _theme-colors.scss.
5. Change the values of the colors stored in the variables $primary and $info. For example, $primary: #994cf4 and $info: #38036b;.
6. In your shell run the command npm run generate-css.
7. Return to WeBWorK and the Course Configuration page for your course.
8. Under the General table, the select popup for the Theme should now contain the math4-purple theme. Select it and click Save at the end of the page.
9. After the page reloads, the only theme is still present, but navigating anywhere else will now change the theme.

Adding a banner image

Starting in version 2.16, there is an easy way to add a banner image to your theme. It will be placed in the top bar by following these steps. Let's say that you have an image (jpg, png or svg) that is wide and short. Let's say it's called my-banner.png. If you want to use in the default theme (say math4), add this file to htdocs/themes/math4/images. If you want it in a custom theme add it to the images directory of your custom theme.

In the configuration file localOverrides.conf, uncomment or add the following lines:

$institutionLogo = 'my-banner.png';
$institutionURL  = 'https://www.my-university.edu';
$institutionName = 'The University Name';

The banner logo will then have a link to the above URL.

See also

• WeBWorK logos

External Links

• Web development tutorials from w3schools.com
• Colors in Web Design: An Exploration