Load custom CSS file only for a specific course

Tutor
#1

Tutor version: 10.5.3

I’m curious as to what the “best practice” would be for loading a stylesheet for a specific course. I have a custom theme installed and am running three different courses on the same platform. Let’s say I want to load a css file ONLY for CS103. I don’t want to load it on the CS101 or CS102 courses.

The way I implemented this was to add code to the top of the lms/templates/courseware/courseware.html file in my custom theme:

...
<%block name="header_extras">
% if 'CS103' in course.display_number_with_default:
  <link href="${static.url('css/cs103.css')}" rel="stylesheet" type="text/css">
% endif
...

While this works and loads the custom css file, is this the best way to do this? Is there something already built into Open edX to do this already?

Thanks,

#2

Hi @ToddLichty !
I hope this course can give you some insights regarding this. First part of the course covers how to create and load stylesheets for a course.

#3

@nadheemabdulla While this does show a way to do this, it involves manually adding a link to the CSS file on every page/unit in the course. I wanted to load the CSS in code so that the course authors do not need to manually add a link to the CSS file.

First, you need to upload the file into your edX course. This is just like any other file upload in Studio:

Content > Files & Uploads > Upload file

Then you need to reference the use of the CSS on each page (unit). There isn’t an “apply to all pages” selection on the platform, nor would that always be a good idea (e.g. sometimes you want to use different CSS and would then need a complex ‘exceptions’ method) …