Using CSS external stylesheets - Is this possible?

I’m important a course that originated as static html. I’ve built the course.xml and linked to the source html files.

Here’s where I’m stuck. The formatting is heavily reliant on the css style sheet. I uploaded it to /static within the course, and referenced it in the head of each html file. BUT edx is stripping off the entire section which breaks the css. And this also means I can’t embed the css into the source html files either. I scoured the docs, this site, web searches and found nothing so far.

How can I implement the css stylesheet? (if it’s even possible)

Hey @fotmasta

Thanks for posting, I have few doubts, what do you really want to customize? A single course or LMS, what are the customizations you are looking for?

Thanks

Thank you for replying. I have a single course to customize.
They want to customize using a CSS style sheet for the headings, indentation, and other formatting.

@fotmasta, there is this OEP about functionality that would provide course-wide HTML overrides, but its status has been “Provisional” for the last 4 years. At the moment, there are some other ways to achieve this, though:

  1. Creating a separate site with a comprehensive theme. To do this, you would need to:

    1. Create a comprehensive theme with desired overrides.
    2. Set up a new Site.
    3. Set the Site’s theme.
    4. Set the course_org_filter option to display only this specific course on the new Site.

    This way, the whole site will have a custom theme, but it will be available on a separate domain.

  2. This workaround is described here. Basically, you can embed the styling directly in XBlocks on each course page. For example, you can add the following HTML XBlock to a unit to override the page’s body:

    <style>
      .course-wrapper {
        background-color: red !important;
      }
    </style>
    

    This will apply only to pages that contain these XBlocks, so other parts like the Course Outline page or Discussions will not be altered.

1 Like

That workaround looks pretty good. I might be able to copy the guts of the master css file and insert it into the head of all the html files.

Thank you!

@fotmasta, I’ve just found that we have implemented OEP-15 and merged it into the edX master branch shortly after my last comment. You can now define custom CSS and JS resources in the course advanced settings in Studio.

If you are using Koa, then we have also internally backported this feature there. Feel free to use our opencraft-release/koa.3 branch if you’d like.