New documentation for all Grav open education projects is now available! Visit learn.hibbittsdesign.org.

Like any other Grav theme, both of the included Course Hub themes (‘Course Hub Bones’ and ‘Course Hub Bootstrap’) can be visually customized using CSS and/or altering their Twig template files. However, if you make changes directly to the Course Hub theme these will be overwritten when that Course Hub theme is updated. So, what to do?

The easiest method to customize a Course Hub theme is to use Grav’s theme inheritance feature. However, as the Course Hub Bootstrap theme is actually an inherited theme, the following should be included in your /user/themes/mytheme/mytheme.yaml file:

streams:
 schemes:
   theme:
     type: ReadOnlyStream
     prefixes:
       '':
       - user/themes/my-theme
       - user/themes/course-hub-bootstrap
       - user/themes/bootstrap

While an inherited Grav theme usually only has two theme references (the inherited theme and it’s source theme), three theme references are required with the Course Hub Bootstrap theme to ensure all the needed theme elements are available. You will also need to copy the existing Course Hub Bootstrap /css/custom.css file into your inherited theme’s css folder.

For those educators who want to make a lot of customizations, creating an independent child theme is likely the best process. In essence, creating a child theme involves duplicating the folder of an existing theme and then defining the needed unique elements (such as the name) for that theme.

For more information about Grav theme development, check out the Grav Theme Tutorial.

comments powered by Disqus